Design for web

A handbook for aspiring web designers

Appendix

Reading is a great way to think critically, to question, and to challenge your own assumptions. It pushes your creative boundaries.

Ellen Lupton

Content precedes design. Design in the absence of content is not design, it's decoration.

Jeffrey Zeldman, 2008
  1. book cover Don't make me think Steve Krug
    ... why has it been so popular?
    It’s short. Even though it covers a lot of ground, you can read it cover-to-cover in a few hours.
    It’s profusely illustrated.
    There’s a useful insight on almost every page.... quoted from book site
  2. book cover Content Strategy Erin Kissane
    Content strategy is essential. But where did it come from? Why does it matter? And what does it mean for you? This brief guide explores content strategy’s roots, and quickly and expertly demonstrates not only how it’s done, but how you can do it well. quoted from book website

principles & guidance

I don't think you can be a designer without a love for the written word. Books and magazines are where new ideas are born and old ideas get questioned.

David Carson
  1. book cover The shape of design Frank Chimero
    Design gains value as it moves from hand to hand; context to context; need to need. If all of this movement harmonizes, the work gains a life of its own, and turns into a shared experience that enhances life and inches the world closer to its full potential. quoted from book introduction
  2. website screenshot A List Apart
    A List Apart (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on web standards and best practices. quoted from website
  3. website screenshot Practical Typography Matthew Butterick
    This book is about making you a better typographer. [...] Typography matters because it helps conserve the most valuable resource you have as a writer—reader attention. quoted from website
  4. book cover Combining typefaces Tim Brown
    This very brief “pocket guide” is for designers and developers who want to make better choices about type and build their typographic expertise. Successful typeface combinations are partly a matter of good taste, which can be tough to develop. quoted from website
  5. book cover Flexible Typesetting Tim Brown
    From Chapter 1’s philosophical framing, to Chapter 2’s prioritization of text and reader, to the multidimensional considerations in later chapters about picking fonts, shaping text, and managing compositions, this book blends vital typographic tactics with rhetorical questions that challenge the reader to reason deeply about beauty. quoted from website
  6. book cover Web Typography Richard Rutter
    This book is a practical guide and companion reference to all aspects of typography on the web. It deftly combines implementation details with typographic theory, and is ideal for designers, developers and anyone else involved in the process of creating a website. quoted from website
  7. website screenshot On Web Typography Jason Santa Maria
    Typography is your design’s voice and the most powerful tool you have to communicate with your readers. Learn how to wield type with care and wit: how to evaluate typefaces, consider technical constraints, create flexible typographic systems, and put together your own collection of favorite faces. quoted from website
  8. website screenshot Practical SVG Chris Coyier
    SVG is changing the way we build the web. It’s an amazing, powerful tool that is so simple, and yet so complex at the same time. As I like to say, “The more you use SVG, the more you realize you don’t know SVG!” Good thing Chris has written this book to help! (With much better jokes, too.) Val Head, Principal Designer at Adobe
  9. book cover Transcending CSS Andy Clarke
    Andy Clarke has an uncanny ability to make you reconsider what you know and wonder why you hadn’t always done it his way. Dave Shea, author of The Zen of CSS Design (New Riders)

learning resources

references

  1. MDN docs logo developer.mozilla.org
    Resources for developers, by developers
    formerly MDN, MDN Web Docs launched by Mozilla around 2005
  2. W3C logo Web Accessibility Initiative
    Making the Web Accessible. Strategies, standards, and supporting resources to help you make the Web more accessible to people with disabilities.
  3. codrops logo codrops: CSS Reference
    An extensive CSS reference with all the important properties and info to learn CSS from the basics.
  4. php logo PHP
    Home to PHP documentation, references and source code.
  5. mysql logo MySQL
    Developer Zone with official documentation, blogs and forums.
  6. site logo &what;
    AmpWhat is the place to explore the characters and icons ... Discover Unicode and Character Entities.

useful services

  1. MDN docs logo 1ty.me - "One Time"
    One Time Self Destructing Links For Sharing Sensitive Information
  2. MDN docs logo @email
    free e-mail hiding service that hides emails using short URLs redirecting senders to the mailto-url after clicking the link.

The following tutorials as well as demos of the practice examples are included in the related chapters as part of the main page. For easy access, they are also viewable separately.

step-by-step tutorials

  1. tutorial screenshot

    Contact CTA with SVG sprite viewread chapter 6: Working with visuals

  2. tutorial screenshot

    Toggle it! view read chapter 9: Inclusive design

  3. tutorial screenshot

    Glorious sprites view read chapter 9: Inclusive design

  4. tutorial screenshot

    CSS switch setup view demo & read tutorial

demos

  1. tutorial screenshot

    Typesetting explorations viewread chapter 3: Typography

  2. tutorial screenshot

    Flexible Scales viewread chapter 3: Typography

  3. tutorial screenshot

    Simple responsive layout viewread chapter 5: Layout

  4. tutorial screenshot

    Responsive layout, 3 methods viewread chapter 5: Layout

  5. tutorial screenshot

    Toggle setup viewread chapter 6: Working with visuals

design blog

For some further reading, inspiration and various ramblings of mine, you might fancy taking a look at the 'On the topic of web design' blog ツ

website screenshot