September 28, 20174 min read
Web design differs sharply from print design. Completed print designs are static. Websites are dynamic; we design them for change. Physical limits, starting with the size and number of pages, restrain print designs. Web content must scale dynamically to users’ chosen devices and must be expandable to grow with new content.
We design the user interface for a responsive website in order to display managed content optimally across screen sizes and user inputs. Such systems comprise parts that interact. Think of these elements as fluid modules that adapt to each other even as they adapt to changing contexts. Through all this, they must maintain a conceptual hierarchy, meaning, and consistent look and feel. Designs that succeed balance artfulness, usability and maintainability.
One Web Site, Two Kinds of Users: Consumers and Creators
We must serve both content creators and administrators as we design the user experience in a new project. The goal is to ease the workflow for both types of users. Fortunately, these two objectives align. Repeatable patterns for content authors lead to consistency across the site and a better overall end-user experience.
Web Design Workflow, Best Practices and Pitfalls
We look ahead as we design a new web project. We consider not only the content contained at launch, but also future content. To accommodate varying amounts and types of dynamic content, page elements must have elastic dimensions. Font sizes must be flexible as users move from device to device. Our systems must handle many user inputs -- mouse, touch, voice, keyboard, etc. -- often more than one at a time.
So why begin projects with static visual mock-ups?
This part of our process is a holdover from years past, when mock-ups moved from hand-drawn art to digital renderings, which are more realistic and created more quickly. At that time, web technologies were vastly different and responsive design was not a factor.
Static mock-ups, old-school as they are, still have merit. First, the web is a visual medium and mock-ups help clarify our vision and expectations. They also
- Demonstrate visual patterns that portray the identity of the company or entity behind the project.
- Define and direct such user interface elements as color palettes, typography, buttons and forms.
- Help determine the amount of white space appropriate for brand feel and client goals.
While static design comps are a beneficial part of the design process, overly explicit renderings and expectations require customization for each page. If carried through to the finished site, content creators and editors would have to be skilled in writing code specific to each page or layout. Obviously, we don’t want that. The content management system should require no more than basic word processing skills of content creators and managers.
Likewise, design comps that mandate specific spacing and inflexible content arrangement to the level of the pixel look great with placeholder copy and FPO images. But they often fail to hold their design integrity when real content is entered. Initial designs created in Photoshop or Sketch often do not fully incorporate the requirements of the site’s end users and/or content editors. These unrealistic early designs result in lengthy building and revision cycles. Practical requirements have a way of changing everything. When those sites finally launch, they look very different from the initial comps.
Design patterns that prove challenging in an environment designed for dynamic and inconsistent content include:
- Background imagery with text overlay;
- Overall site structure coupled to specific imagery or images and typography, which are integral to the design rather than content within the design;
- Layout combinations in which some content fills the width of the entire viewport, while other content is constrained – for example, a design built on a grid system with items that break the lines of the grid.
- Each of these challenges dictate a higher level of expertise and/or constraints on the content authors.
Stakeholders should consider design comps as snapshots of how the project might look on a specific device, at a set screen-size, at a given point in time. They should not leap to the unreasonable expectation that the project will appear pixel-perfect to the comp across all environments and with changing content. Such an expectation will inhibit the overall success of the site as it evolves in a live environment. Robust and enduring sites are built to be flexible.
The fluid nature of the responsive web demands balance of all the variables of the end user’s environment. The design must adapt to provide the best experience across environments, even as it eases maintenance and content creation for non-developers. Web designs that meet these demands can certainly be beautiful, but the beauty must be more than skin-deep.
Related Blog Posts
Strong data-driven content brings new users to your website, and that’s a start. Once they arrive, take the following six steps to craft a great user experience and develop a coherent strategy that converts visitors into leads and leads into clients.
Does a particular web design trend enhance the usability of your website? Use our infographic to guide you through current web trends.
View All Blog Posts