Web design resources?

General Prog (Archived)
21

The design book/link recommendations were a bit of a grab bag; it was just stuff I tend to come back to, hope they’re useful, and I’ll add a few more here that might be of interest. Tried to avoid any technical frameworks/tools etc, other people have advised better on that, was aiming more for general principles.

One thing I meant to say that is useful - more a tool for thinking about what the design should be or could be - is a technique we were taught on an human-computer interface course (and which I think comes from maybe somewhere like Toyota):

With the thing you’re designing, imagine there’s a vertical scale that goes up and down from the thing you’re trying to build. The example I was given was a shelf to put books on: if you go down, you get more technical and specific, if you go up, you get more general.

  • You need to improve your life.
  • You need a place to store knowledge.
  • You need a place to store books.
  • You need a shelf to put books on.
  • The shelf needs to support weight.
  • The shelf needs a bracket attached to the wall that will support it.
  • The wall needs needs holes drilled to put screws in.

At any point (though generally earlier on, before it gets too hard to refocus), you might realise you’re focussing on the wrong level, or that the design would be improved by focussing on more or less technical aspects. This can be granular as well - it could be part of an interface. Or it could be the whole thing.

Anyhoo,

This medium article 7 Rules for Creating Gorgeous UI is good, especially when supported by this HN comment which adds a number of basic, necessary rules to follow.

Typography: The Elements of Typographic Style Applied to the Web is self-explanatory. Brighurst’s original book is brilliant as well. Anything that is a great print design is likely to be a lousy web design though.

Grid: Grid Systems in Graphic Design by Joseph Müller-Brockmann is gospel. Print focussed though (from 1981), so caveat from the typography link applies.

Colour: The Interaction of Color by Joseph Albers is foundational. There is a wonderful free app version of it for iPads as well.

Bit more abstract, but 101 Things I learnt in Architecture School is [maybe un-]surprisingly relevant to designing for the web. The OO crew figured out A Pattern Langage was quite relevant to architecting systems and programming language patterns, turns out to be pretty useful for design stuff as well (hello again, Material Design). Design as Art by Bruno Munari is a phenomenal thing full of inspiration.

Also, if it’s not native & you’re relying on CSS, flex all the way for layout is :thumbsup:, at least until CSS grids get properly rolled out this coming year (and probably well beyond).

6 Likes
22

I’ve been using Bourbon and Neat almost since they came out, and I’ll keep doing so every time I need to use Sass for a project’s styles. I also like organizing the files using https://github.com/jasonreece/css-burrito which creates a very nice and intuitive file structure.

2 Likes
23

Here’s an interesting article that popped up recently: https://www.smashingmagazine.com/2016/12/mistakes-developers-make-when-learning-design/

1 Like
24

I’ll quote Paul Rand:

Design is a relationship between form and content.

Make sure you know where each piece of info is going, get a pencil and draw some wireframes. Some questions you should ask yourself: is there a sub header or tagline? Are there social buttons? Show timestamp or not? Or more generally, what are my static and dynamic contents? Decide all of the static content and write them down, this usually include button names, page titles. Forget about visuals at this stage. Just figure out what you are going to show.

Once you’ve got the content, now you can fiddle with how you are going to show them.

25

http://designforhackers.com/ has a free “Design Pitfalls” email course. I’ve been getting it for a week now. It’s mostly “keep it simple”, but there is some more specific advice.

1 Like