Web Field Manual


Staying Current

“The life of a designer is a life of fight: fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is to cure it somehow, with design.”



“When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back, even though it faces the wall and nobody will see it. You’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”


Style Guides

“Sometimes we can be so focused on getting the site ready and live, that we lose sight of what happens after it’s launched, and how it’s going to be maintained. A simple web style guide can make all the difference.”

Do's & Don'ts

    • Do Create a Styleguide

      Styleguides are essential to establishing and maintaining consistency within a design system. Particularly useful for teams.

    • Do Think in Terms of a System

      By designing a system rather than individual pages you are able to think how something works in relation to the whole site.

    • Do Keep Your Styleguide Updated

      Once you've created a styleguide it is crucial to keep it maintained.



“Building for the web has become a journey with infinite potential for forks and bumps in the road.”



“We’re not designing pages, we’re designing systems of components.”




Grids & Typography

“The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility and produce pages which, by being flexible, are accessible to all.”

Do's & Don'ts

    • Do Use Web Fonts

      Web fonts have been designed and hinted specifically for maximum legibilty on screens. Take advantage of them.

    • Do Always Use a Grid

      Grids help to establish consistency and rhythm in your design. Embrace it without overly relying on it.

    • Don't Over-Extend Measure

      Too long of a measure (the length of a single line of text) reduces legibility significantly. Keep line-length for body copy at 45-75 characters per line.



“It’s not just what it looks like and feels like. Design is how it works.”

Do's & Don'ts

    • Do Avoid Abrupt Changes

      Objects should be accelerated swiftly and decelerated slowly to avoid abrupt changes in velocity.

    • Do Consider Mass

      Keep in mind that the mass of an object will determine how fast or slow it will accelerate and decelerate.

    • Do Consider Purpose

      Use motion to guide the user’s attention and focus through an experience and not simply as an embellishment.


Best Practices

“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.”

Do's & Don'ts

    • Do Pay Attention to Patterns

      Using familiar common UI patterns will keep the user comfortable using your interface.

    • Do Strive for Simplicity

      Avoid unnecesary content: a website's function should be at the forefront.

    • Do Use Visual Hierarchy

      It is crucial that your interface allows the user to focus on what is most important.

    • Don’t Make Users Think

      Your job as a designer is to eliminate ambiguity: your designs should be obvious and self-explanatory.

    • Don't Make Touch Targets Too Small

      Ensure that touch targets are easy to select — 44x44px area is recommended.

    • Don't Make Text Too Small

      Text on the web should be generally larger to ensure optimal legibility.



“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Do's & Don'ts

    • Do Always Use Alt Tags

      Alternative text is read out by screen readers to blind users when using assistive technology and should describe the image's purpose. If the image is pure decoration, provide a null or empty alt attribute.

    • Do Enable Keyboard Navigation

      By making use of focus on your pages, you ensure that keyboard navigation is enabled.

    • Don't Use Images For Text

      This makes text inaccessible on the page and should be absolutely avoided.

    • Do Use Proper Markup

      Using proper HTML markup helps assistive technologies to interpret the content of your web pages more effectively.

    • Don't Use the Same Title Tag

      Two pages on the same website should not share the same title tag.

    • Don't Use Pop-Ups

      Be mindful of components that can make your site content inaccessible, especially pop-ups.

    • Do Create Enough Contrast

      Make sure color contrast is high in order to maximise readability for color blind users.

    • Don't Treat Accessibility As An Afterthought

      Making your website accessible to all users is crucial and should be considered throughout the design & development process.

    • Don't Enable Autoplay Videos

      Video players can be diffucult to locate and not all respond to keyboard control.