35 Designers x 5 Questions

Advertisement

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?

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

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.

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

  • Clear communication. [Cameron Adams24016613482363, Australia]
  • The ability for it to communicate. This is also what I admire the most in design. [Filipe Varela24417014288664, 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 Slatineanu23816412684415, 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 Weakley274200122118506, Australia]

1.2. Usability

  • 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 Peatling246172120103597, 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 Griffiths26919512597758, UK]
  • Usability, always! Everything we design should be easy to use. [Paul Boag254180135110479, 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 Beattie23616215093817810, 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 Francis23416012786533011, US]
  • Usefulness. [Mike Davidson2331591471054612, USA]

1.3. Typography

1.4. Navigation

  • 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 Heilmann2521781241137318, 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 Masuga225152140915219, 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 Lindop263189128965120, UK]

1.5. Details

  • Details. Little things like spacing and buttons have a huge impact on the overall design. [R. Marie Cox248174123987121, 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 Jones260186144906322, US]
  • Attention to detail. [Wolfgang Bartelme2501761461045423, 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 Downey2651911411126724, 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 Goodlatte268194138925625, US]

1.6. Standards, Accessibility

  • 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 Lloyd2351611211006926, UK]
  • Accessibility. [Roger Johansson271197137875727, Sweden]

1.7. Content

1.8. Approach

  • 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 Dimon2701961451087729, 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 Francis23416012786533011, 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 Mathias247173136944431, 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 Jost256182148857632]
  • 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-Chamberlain2271541191076133, Canada]

1 most useful CSS-technique you use very often.

As we’ve found out earlier, there are at least dozens of CSS-based techniques34 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

2.2. Browser Bugs Workarounds

  • 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 Mathias247173136944431, US]
  • The underscore hack45. [Mike Davidson2331591471054612, USA]
  • An understanding of what the HasLayout bug is and how to work around it. [Paul Boag254180135110479, 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 Smith2311581311014813, 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 comments49 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 Weakley274200122118506, 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 Lindop263189128965120, UK]

2.3. CSS Image Replacement

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 performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Amazing that nobody prioritizes “sellability” when working with clients. That’s always at the top of my list. Then, usually, usability is the means which makes it happen.

    0
  2. 52

    Slightly shocked at how much I didn’t know, although hardly surprising since I’m in awe of the quality of work I’ve seen from all of these designers and developers over the years. With these final pieces of the puzzle in place I can finally ask for a payrise…

    Thanks for giving up this priceless info!

    0
  3. 103

    Fantastic information from such influential figures in world design. Although its always good to see other designers adopting your own methods, its as good being enlightened on certain aspects which maybe aren’t as commonplace in online design.

    My initial read on Smashing Magazine and it’s the first of many I’m sure!

    0
  4. 154

    Respiro, the logo design guy

    April 23, 2007 9:45 pm

    Great resource but it treats quite poorly the design aspects…

    0
  5. 205

    Fantastic post. Gives you a great idea of an overall view of the web design industry. Keep up the good work.

    0
  6. 256

    What a wealth of useful information! Counting my tabs, I’ve opened over 10 links I will spend probably an hour or more reading.

    THANK YOU TEN FOLD!
    Ian Camarillo

    0
  7. 307

    @MrT

    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.

    No, a good font won’t save a bad design … but a bad font can quite easily destroy an otherwise good design!

    0
  8. 358

    what a gold mine! I’m going to take my dear sweet time going through what folks have spent years learning…thank you, thank you!!

    0
  9. 409

    Thanks a lot for the survey. It really helps budding designer like me.

    0
  10. 460

    Regarding 2.3. CSS Image Replacement, not sure I understand why you would use the h1 tag for this. If the logo is a link to the home page, then doesn’t this make the top level heading on each page the same?

    I tried embedding the h1 tags within a tags to make the logo a link to the home page but this seems to confuse IE. The link works but the pointer doesn’t change when hovering over the logo. This can be fixed I guess but is it all worth the trouble.

    I must be missing something here, but not quite sure what. I can see CSS image replacement can be desirable but dont’ quite get why we should use the h1 heading, can anyone here elaborate a bit on this?

    0
  11. 511

    Christian Nally

    April 25, 2007 6:05 am

    Thanks for the resource! As a coder-turning-design-beginner this makes for a great laundry list of stuff to tackle.

    0
  12. 562

    @James
    “…Regarding 2.3. CSS Image Replacement, not sure I understand why you would use the h1 tag for this. If the logo is a link to the home page, then doesn’t this make the top level heading on each page the same?…I can see CSS image replacement can be desirable but dont’ quite get why we should use the h1 heading, can anyone here elaborate a bit on this?…”

    h1 is not mandatory – it could be a different element. The idea is to replace the text of the h1 and replace it with an image. It’s not mandatory to have the same h1 text across every page (but it’s likely that h1 text would be replaced with the same image across every page)

    “…I tried embedding the h1 tags within a tags to make the logo a link to the home page but this seems to confuse IE. The link works but the pointer doesn’t change when hovering over the logo. This can be fixed I guess but is it all worth the trouble….”

    I ran into this just today when checking a project on the w3c validator. An h1 (block level element) should not be wrapped inside of an ‘a’ (inline level element) because inline elements aren’t supposed to wrap around block level elements. That might be why you had an issue (so just wrap the h1 around the ‘a’)

    I hope that makes some sense. If you want to read up on css, I highly recommend “Bulletproof Web Design” by Dan Cederholm or check out some of the other books mentioned in the article. good luck!

    0
  13. 613

    Really useful and I picked up a lot of useful tips for my next css project – thanks!

    0
  14. 664

    Lots of nuggets here. Maybe it would be an idea to continue this with more specific topics as well? Came here through boagworld, I’m happy to say Smashing is now bookmarked!

    0
  15. 715

    Since when does a ‘Designer’ need to know CSS? I know many more amazing Designers that don’t even know what CSS is, than I do ‘Web Designers’. I think you should change the title as not all ‘Designers’ are ‘Web Designers’

    0
  16. 766

    The funny part is I think the page the article links to in the whitespace reset link looks horrible.

    0
  17. 817

    1.2 Usefulness. [Mike Davidson, USA]
    I’d argue that that’s not the same as usability.

    0
  18. 868

    Awesome article =)

    0
  19. 919

    @jazzle:

    1.2 Usefulness. [Mike Davidson, USA]
    I’d argue that that’s not the same as usability.

    I’d argue the same. Usefulness would fit much better in ‘1.8: Approach’

    0
  20. 970

    Great article!
    Learning new things makes me feel great.
    And today I feel really, really good!

    0
  21. 1021

    Good insights! Do you have any work around tips regarding safari browsing issues? Some of my pages looked good on IE, Firefox 2.0.0.3, and Opera 9.10 except Safari. They looked disastrous! Thanks for sharing. Keep it up.

    0
  22. 1072

    Sweet article, I’d be interested what kind of work environments these designers prefer (work from home? coffee shop? listen to music while working? if so what kind? very organized person or very messy person?).

    0
  23. 1123

    What a smashing article. There is a little too much information for me to read ni one gulp, but I’ll be back.

    0
  24. 1174

    Web Design India

    June 15, 2007 7:02 am

    Article can save lot of headaches in cross browser compatability.

    0
  25. 1225
  26. 1276

    Please keep up the good work!

    0
  27. 1327

    How cool is this! I wish someone would do such a survey for book designers. Hell, may I appropriate and adapt your survey into one of my own for book designers and then run the results and, perhaps, my own commentary on my blog? It’s just such a good idea, I think print designers might give it a good ride, too.

    0
  28. 1378

    wow! this is very nice article!!

    thank you very much!! keep it up!

    0
  29. 1429

    hi,

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

    0
  30. 1480

    very useful information! thanks!

    0
  31. 1531

    Denver Web Design by Shycon

    August 10, 2007 7:24 am

    Great article. The CSS and required reading is especially good! Thanks!

    0
  32. 1582

    Great material from respected designers. I’d like to see more articles like this. Nicely done. A

    0
  33. 1633

    I think this article might do some novices more bad than good, some of the “facts”/opinions should have been omitted since they are clearly not usable, many noted in the comments above.

    I strongly urge readers to test their code/sites out on as many different browsers as possible. You may find you’re getting advice from someone who knows less about it than you do and just plopped in a comment for a fix that worked in one instance but not really stable overall.

    Really only the first two questions asked to designers were really relevant.

    The third about fonts is interesting but maybe should have focused on Web-safe or soon-to-be Web-safe fonts instead of every font that could be used in a graphic, still interesting to see trends over the years.

    The last two about books and magazines are for people reading at leisure and not really relevant for people who realize the Web is months and years more accurate for looking up coding techniques. Best advice: check out the W3C and look at code from “cool” sites using tricks you haven’t seen before (or that didn’t work before but now do with the newer browsers, easy to forget some things open up as a possibility as Microsoft moves at a snail’s pace closer to a usable browser). I really find these last two about books and magazines to be more of an advertisement than useful.

    Overally, thanks for the replies from those designers, albeit far varying in skill level.

    If you’re going to continue this type of questioning, I did like the CSS tricks section, plenty more there that are hard to happen across. I also think it would be useful to have some design Q&A like what trends you see coming around (or again), colors of the year, fastest ways to get from design to solid code, other scripting trinkets (JS, AJAX), and even some other than print media inspirations that have had a direct impact on someone’s designs, coding contest: have them submit how they’d do a linked image that contains text while remaining in good standing with search engines and text readers.

    My contribution:

    If you want to have an image or menu system use graphics, try using them in a bulleted list and apply your graphics to the UL, LI, hover and a styles where necessary, then keep the text as text. This will provide search engines and text readers with a clean bulleted list as your menu. Simple, basic, but many don’t use it. Most designers in my experience are still primarily coding with tables and other HTML basics due to old browsers like IE6. Use left float to make a horizontal menu.

    0
  34. 1684

    Great info, Thank you to all that contributed. The information has been very helpful!

    0
  35. 1735

    Hervorragende Informationen.

    0
  36. 1786

    this one is very good… nice article… i really need this…

    nice way one explain this things

    0
  37. 1837

    Great article.
    I really liked the CSS part.

    0
  38. 1888

    This is a very informative article on CSS. Lots of great kernels of information!

    0
  39. 1939

    very handy, ive bookmarked this for future use. I particularly liked the bits on how to approach a new project, because thats the one part i struggle with myself! Well done chaps.

    0
  40. 1990

    Nice.. thanks a lot for doing the survey. We get lots of information through this.

    Great Job! :-)

    0
  41. 2041

    Thank you for such excellent information actually teaching.

    0
  42. 2092

    Apteric Technology

    February 16, 2008 4:21 am

    One of the best informative articles we’ve read in a while!

    0
  43. 2143

    Great article. Thank you!

    0
  44. 2194

    Great Great article.Superb
    I didn’t see such responses from readers(275 comments).Keep it up.
    I expect some more survey…

    0
  45. 2245

    Godfrey Mashava

    June 11, 2008 7:28 am

    this is stuff for me i need this type of information i am also a designer i am overwhelmed by the content

    0
  46. 2296

    Fantastic article, good read and passed a lot of time! Thanks to everyone who contributed.

    0
  47. 2347

    LOL at [Nick Francis, US] on the image replacement .

    If so why there is the img tag. The logo image, my friend is not for decoration like it’s a gradient image for example. so it should be accessible when css is off

    0
  48. 2398

    very nice article ! tnx you!
    my site Link [www.adf.lt]

    0
  49. 2449

    Thanks for article

    0
  50. 2500

    thanks for the article

    1

↑ Back to top