FM 1.5.1

Designing
for the Web


Headquarters, Dept. of Design
Summer 2014

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.”

Resources

Inspiration

“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.”

Resources

Styleguides

“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.

Resources

Process

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

Resources

Workflow

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

Resources

Toolbox

Resources

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.

Resources

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 abiguity: 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.

Resources

Accessibility

“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.

    • 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.

    • 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 cruial and should be considered throughout the design & development process.

Resources