Planners should develop the ability to both recognize excellent design and work with no‑code platforms (or communicate clearly with developers) so that the final product meets the unique needs of a planning audience.
For guidance on choosing design platforms, please see Part 3: Choosing No-Code Development Platform for Planners.
The overall rule is that for urban planners, web design is more than a visual pursuit—it’s a means of transforming dense, technical information into accessible digital experiences. The following guiding principles help to achieve this goal.
Before diving into layout or visual embellishments, you need a clear understanding of your content. This means that 1) knowing all the essential content before you sketch out any visual elements and 2) design follows and serves the content, rather than forcing content into a pre-determined aesthetic.
The content includes:
Text with hierarchy (Title, subtitle, section title)
Charts and tables
Interactive (online) and static maps
PDF documents for downloading and displaying
Surveys and sign-up forms
Videos
Slides
Every webpage is composed of distinct sections or rows, with each row dedicated to a single idea. This modular approach not only enhances clarity but also allows users to process information in manageable chunks.
A website designed for urban planning must perform seamlessly on a variety of devices. This means starting your design process by envisioning how your site will look on smaller screens and then scaling up to larger displays.
Think of a website like water in a container—it takes the shape of whatever device it's displayed on. A responsive design ensures the content looks good whether in a “small glass” (phone), “medium bowl” (tablet), or “large pitcher” (desktop).
A mobile-first approach means designing websites and digital tools for mobile devices before scaling up to larger screens. Since many users access planning-related content on phones and tablets, urban planners should prioritize mobile-friendly layouts, fast loading speeds, and touch-friendly navigation.
Key practices to follow mobile-first approach includes:
Start with One-column. Design your website or tool with a mobile layout as the starting point, then adapt it for larger screens. Opt for single-column layouts to enhance readability, especially when coding. Most no-code platforms automatically adjust layouts for different screen sizes, but reviewing and refining the mobile experience is still essential.
Prioritize Essential Content. Keep text concise and avoid clutter. Display the most important information at the top (e.g., contact info, key updates).
Optimize for Speed. This includes:
Compress images using tools like TinyPNG;
Enable browser caching to reduce load times (communicate with professional web developers);
Use lightweight fonts and avoid large files.
Make Navigation Touch-Friendly. This includes:
Use large, tappable buttons (at least 48x48 pixels).
Keep menus simple with clear labels.
Avoid hover-based interactions that don’t work well on mobile.
While innovation has its place, relying on proven design conventions often results in a more intuitive and user-friendly experience. Established design patterns—like standard navigation menus and familiar layout structures—reduce the learning curve and build user trust.
A list of common website design mistakes is provided in Appendix D. (Current not available. It is expected to be available by the end of April)