Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

35 Designers x 5 Questions

35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world. In March we’ve selected over 35 prominent designers and design companies, contacted them and asked to answer five design-related questions, sharing their knowledge and experience with fellows developers. Here on Smashing Magazine.

35 Designers: how did we find them? Link

How do you find the best designers worldwide? OK, a legitimate question. The fact is that we’ve tried so select the best ones, but we definitely have missed many creative, talented artists with solid portfolios, who are rather unknown in the community.

We didn’t choose by our intuition, we weren’t looking for any suggestions. Instead, we’ve spent few days analyzing Technorati rankings, Alexa rankings, link popularity, 9Rules directory1, Design-Feed contributors2 and few more design-related web-sites. Besides, we’ve taken a close look at the professional experience of designers, their reputation in the design-community and the popularity of articles they’ve written in their weblogs.

We’ve browsed through numerous articles and hundreds of portfolios and in the end we’ve managed to select over 45 out of them. We’d like to thank all designers for participation and also thank to designers who had informed us in time whether they will be able to participate or not.

Five Questions Link

We’ve asked five questions. One single text line would have sufficed.

  • 1 aspect of design you give the highest priority to.
  • 1 most useful CSS-technique you use very often.
  • 1 font you use in your projects very often.
  • 1 design-related book you highly recommend to read.
  • 1 design magazine you read on a daily/weekly basis (online or offline).

In the end we’ve received more answers than we expected. The results – over 80 CSS-based tips, design ideas, suggestions, fonts, design-related books and online-magazines – are listed below. It’s interesting to know, how designers work their magic. It’s interesting to know what you can actually learn from them.

35x5

1 aspect of design you give the highest priority to. Link

The initial part of the design process is probably the most creative and sophisticated part of web-development. First sketches, first layouts, first typography and color decisions – sometimes it appears that there are simply too many things to keep in mind – but also too many things left out by mistake in the final design. Yet there have to be the most important ones. Design aspects you, being a professional web-developer, give – or should give – the highest priority to; the ones that make or break a web-site.

You don’t learn them – you explore and grasp them. Depending on your personal style and your personal workflow, you determine the things you consider to be the most important in your designs – according to your professional experience, demanding clients, users’ behavior and constructive feedback. Communication is the key, but to find the right key is the task web-developers have to accomplish. In fact, every developer makes his/her own decision, setting the priorities of the things to be considered during the whole design process.

Yet it’s interesting to know, which aspects of design are given the highest priority by experienced and competent web-developers.

1.1 Communication Link

  • Clear communication. [Cameron Adams21815612576343, Australia]
  • The ability for it to communicate. This is also what I admire the most in design. [Filipe Varela22216013382604, Portugal]
  • Design is all about finding the right solution to a particular problem (usually a communication problem when dealing with sites). That’s why I feel that the most important aspect would be understanding the user and centering everything around him/her. [Lucian Slatineanu21615411778395, US/Romania]
  • The initial stages of design: meeting the client to establish key audiences and aims; designing overall site labelling and architecture that meets the aims of these audiences; testing initial layouts to determine if they are successfully achieving the key aims. If these aspects have not been thought through carefully and tested then the overall site could fail – regardless of how elegant or engaging the design.
    [Russ Weakley185113110476, Australia]

1.2. Usability Link

  • I think design usability has to be right up there. I like to think about how people will navigate the site even before starting any other design elements. By getting the navigation clear in my mind, the design begins to fall into place around it. [Andy Peatling22416211197567, Canada]
  • Usability. There’s a lot of room for creativity, but I want my web sites to be functional first and foremost. I’ll compromise graphic design for usability, but try not to compromise usability for graphic design. [Patrick Griffiths18111691698, UK]
  • Usability, always! Everything we design should be easy to use. [Paul Boag232126103449, UK]
  • I think that I apply the most emphasis on usability in my designs. As well as being aesthetically pleasing, a design should be a joy to use. It’s no good having the sexiest user interface in existence, if the user can’t figure out how to use it. It’s practically worthless. The true challenge of design, I feel, is making something look visually beautiful – but combining this with a lot of usability. Nobody says that something which is accessible can’t be aesthetically pleasing – in my mind, there are different levels of beauty, and to make a design work, utility has to be a major one of them. [Oliver Beattie21415214187757210, UK]
  • Usability and functionality is always the first priority, but past that there are no boundaries. Thanks to css and javascript, you can make most anything happen on the web now. [Nick Francis21215011880503011, US]
  • Usefulness. [Mike Davidson211149138994312, USA]

1.3. Typography Link

1.4. Navigation Link

  • Readability and clear indication of what is navigation and what is content. There is nothing worse than a really pretty page that leaves me thinking where I am and what I can do. [Christian Heilmann2301681151066718, UK]
  • Navigation. Doesn’t matter how the site looks, or what Javascript trickery you tack on, if the navigation doesn’t make sense the site simply isn’t user-friendly. [Ryan Masuga204143131854919, US]
  • I think that the navigation of any website is the most important element. I try to make sure that the site content is organised into logical sections and that the navigation then reflects this. [Dan Lindop239175119904820, UK]

1.5. Details Link

  • Details. Little things like spacing and buttons have a huge impact on the overall design. [R. Marie Cox226164114926521, US]
  • I try to give highest priority to the small details. You know, the stuff that most people overlook. That means noticing the extra 1px of padding, the color of that gradient, or the size of that text. [Keegan Jones2361721358422, US]
  • Attention to detail. [Wolfgang Bartelme228166137985123, Austria]
  • Never underestimate the power of a detailed wire-frame. Take the time at the beginning to plan, it will pay off immensely during design/development. [Matt Downey2411771321056124, US]
  • I try to take a balanced outlook on the importance of individual design elements. However, one area I often catch myself obsessing over is color selection. [Rob Goodlatte180129865325, US]

1.6. Standards, Accessibility Link

  • Standards and accessibility. It is the main consideration I have with anything that I build or design, sometimes to the detriment of the design itself. Accessible and standards-based designs do not automatically mean they will be ugly, but I know I’m a stronger coder than I am a designer, so I tend to find that if I focus on that aspect, the design suffers from ‘neglect’ if that makes sense. [Ian Lloyd213151112946326, UK]
  • Accessibility. [Roger Johansson183128815427, Sweden]

1.7. Content Link

1.8. Approach Link

  • I’d say it’s impossible to nail it down to one thing, but if I have to, the simple answer is purpose. It’s easy to create something that appears to be visually sophisticated, but it rarely serves a purpose.For me, design is about the underlying purpose and what you want to communicate. Design as decoration, or design without purpose, often hurts more than it helps. However, I’ve found that if the goal and the underlying content is valuable, the rest of the design will generally take care of itself. [Garrett Dimon1821361017129, US]
  • We consciously don’t consider code at all during the design process. Our designer still does a lot of print work, and what’s great about print is that there are no constraints. Print design has no boundaries with texture, typography or the smallest of details. As long as it fits on the page, it works! So in many ways, we try to bring the layering and the detail of print design to the web. It takes twice as long to code it, but who cares, we are in this for great design. [Nick Francis21215011880503011, US]
  • I always try to give priority to a solution for the problem at hand, even if it means doing something less aesthetically pleasing or having to ignore a coding standard. [James Mathias225163127884131, US]
  • Rest – the most important (and least utilized) tool in design is to make time AWAY from design in order to strengthen the time you do spend designing. [Natalie Jost139797032]
  • I usually spend the most amount of time focused on solving my clients #1 objective (or solving the largest problem). Aesthetically speaking, I tend to get caught up in the subtle details of design, trying to make sure everything is *just right*. [Jesse Bennett-Chamberlain, Canada]

1 most useful CSS-technique you use very often. Link

As we’ve found out earlier, there are at least dozens of CSS-based techniques33 a web-developer should always keep ready to hand. However, some techniques are being used more often than the other ones. Learning through each and every designed web-site, developers follow their personal development schemes, using the same tricks all the time, using the same approach consequently during the design process.

A look behind the scenes reveals: professionals permanently use CSS Global Reset, numerous browser bugs workarounds, CSS Image Replacement as well as some further techniques. They all are listed below.

2.1. Global Reset Link

  • Whitespace reset. Though I’m a bit more judicious in my selection of which elements to zero out. [Cameron Adams21815612576343]
    * { margin: 0; padding: 0; }
  • I prefer all elements (across the browser board) to start at 0. Helps ensure that pages look consistent. [Derek Punsalan220158120893528, US]
  • Resetting the browser default styles. Either manually or using the styles from Yahoo. [Mark Boulton243179124733614, UK]
  • I never start coding a site without stripping the default browser styling. To quickly achieve this, I’m using a modified version of Tantek Celik’s “undohtml.css37“. More details can be found in Undoing html.css and using debug scaffolding38. [Lucian Slatineanu21615411778395, US/Romania]
  • Whitespace reset in CSS (originally inspired by Left Justified). It’s gone into all of my projects for the past 2 years. [Kyle Neath234170140744015, US]
    * {
    padding:0;
    margin:0;
    }
    
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
    li, dd { margin-left:5%; }
    fieldset { padding: .5em; }

2.2. Browser Bugs Workarounds Link

  • I like using #whatever { height: 1%; } in a msie_patch.css file (linked with conditional comments) as it fixes a great deal of problems with that browser. [James Mathias225163127884131, US]
  • The underscore hack42. [Mike Davidson211149138994312, USA]
  • An understanding of what the HasLayout bug is and how to work around it. [Paul Boag232126103449, UK]
  • One particularly useful tool are conditional comments, allowing me to serve up fixes for the broken rendering in Internet Explorer 6 and 7. Even though IE7 is newer, it is still far from being a good product. I am thankful that Microsoft at least provided us with a work-around solution for their shoddy browsers. [Nathan Smith209148122954513, US]
  • I would love to say something like “testing systematically across as many browsers and platforms as possible during the markup/css phase”. Although this is very important, the most useful technique for me is the use of conditional comments46 to deal with older versions of Internet Explorer. This technique allows you to isolate these browsers odd behaviours and deal with them in a single file – away from your other css rules, without any hacks. It is a module and clean way of working. [Russ Weakley185113110476, Australia]
  • If you’re having problems getting a layout to work correctly across different browsers, apply different background colours to the elements you’re struggling with. This is particularly useful for sorting out issues with floated elements and margins as you can normally see exactly where the problem is. [Dan Lindop239175119904820, UK]

2.3. CSS Image Replacement Link

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Brian Harris

    April 20, 2007 3:29 am

    wow! what a great resource. keep up the good work

    0
  2. 2

    If there’s one bad thing I can say about Smashing Magazine, it is that sometimes there’s just too much information to digest… so I end up making a mental note about the info, rather than learning it.

    0
  3. 3

    Canadian Soldier

    April 20, 2007 4:01 am

    This is one of the best post made by smashing magazine !

    0
  4. 4

    Chris Masiello

    April 20, 2007 4:05 am

    Great article. There is a lot of helpful information there.

    0
  5. 5

    This is excellent material! Keep it coming.

    0
  6. 6

    (…) ” and of course Smashing – though you guys need a unique site design. ”

    I totally agree with, Nathan.

    Great great great article, by the way.

    0
  7. 7

    Excellent article. Some of the answers were quite fascinating.

    0
  8. 8

    You guys have really outdone yourself this time! Thanks for all the time behind this article, and also many thanks to all designers who have participated!

    I guess I’ll have to wait a bit to read it, this is overwhelming =)

    0
  9. 9

    You guys have really outdone yourself this time! Thanks for all the time behind this article, and also many thanks to all designers who have participated!

    I guess I’ll have to wait a bit to read it, this is overwhelming! =)

    0
  10. 10

    Chris Robinson

    April 20, 2007 7:33 am

    Great Post!

    I read it all the way through, it’s very interesting to see the diversity and trends among designers.

    Bookmarked!

    0
  11. 11

    Great article. Aside from one question which I found incredibly pointless. Which fonts do you use? What exactly do we learn from any answers to this question? A rotten design will not be saved by using Helvetica, Din or any of the others listed here. That aside, loving it!

    0
  12. 12

    Free Nature Photography Wallpaper

    April 20, 2007 1:26 pm

    Great source, all designers should follow these rules. I have recently seen some horific sites. I had a friend pay a guy 800 USD for one of the worst sites I have ever seen. All designers should abide to this! I tried to, and my workers (developers) all abide by these principals. Thanks for sharing!

    0
  13. 13

    great post!! love it!!

    =)

    0
  14. 14

    Awesome stuff.. Keep the great posts coming smashing!

    0
  15. 15

    Jatin Sarvaiya (Mr nEtime)

    April 20, 2007 2:56 pm

    This is amazing! I have started experimenting…

    Thank you…”Smash Magazine”
    Jatin Sarvaiya

    0
  16. 16

    wonderful,thanks for giving!

    0
  17. 17

    Really enjoyed this article.

    0
  18. 18

    I wish I had found out about you many years earlier, although I don’t really know when you start.

    Great great great work

    0
  19. 19

    Thanks for the effort!

    Although you should have qualified “designer” to “CSS-based web designers”.

    0
  20. 20

    It wouldve been a good idea to put ‘Web’ in the title

    0

↑ Back to top