4

Are there any composition rules specific to web design, or that are otherwise elevated in importance in the context of web design?

There are probably some aspects of composition that would be more or less important depending on the medium, and since my primary space is web pages, I'm curious if there are certain compositional rules that would be of greater importance for web design.

closed as too broad by Zach Saucier, Wrzlprmft, Cai, Westside, Vincent Feb 3 '17 at 11:07

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    As opposed to print design? Could you be more specific? – MikeNGarrett Jan 24 '11 at 14:47
6

NOTE: this answer was added in 2011. Much has changed since then, but most of these recommendations still hold true. —Mike

You can think of web design the same way you think of poster design (in most cases). You have a short period of time to engage a user, deliver the message and hook them in to spending more time to find out the details of your site. That's the biggest difference between designing for the web any anything else.

As far as composition, your canvas will need to adapt to screen sizes from 320px wide to 2100px wide, which may call for completely different designs based on how much content can fit. These are some rules of thumb, but it really depends on your audience.

You will also need to consider how your audience is viewing your site. A site rendered in Internet Explorer may not have the same qualities as the latest version of Safari or Chrome. You will have to decide how your design will gracefully degrade to comply with these older browsers.

As far as type faces and sizes, you shouldn't go below 9px in any instance, with body text not falling below 12px, though the user has the ability to change this on their end. Font families are the norm on most sites. Even if you use TypeKit (font embedding), you still need to define a set of typefaces that everyone has as a fallback, e.g. Times New Roman or Georgia. See: http://www.awayback.com/revised-font-stack/

Finally, you have to consider the interaction a user will have with the site. What will be their gut reaction when visiting the site? For example, make sure your primary navigation is able to be easily differentiated from other elements and looks and feels like a navigation. Also, the page identity is usually found in the top left, but as long as it's near the top you should be fine.

There are millions of other things to consider before even starting to think of the design, but I hope those are a few that can help get you started.

  • 1
    From the standpoint of a user used to having a wide screen, the 800px to 1200px wide idea is not one that makes me happy. Sometimes I really want you to cram down to 400px so I can look at a few things at once, in the case of an information site. Sometimes, I'd like to see as much of what's available at once, like in a music site where the artist has a lot out there. Other than that, I totally agree with your other points. – Hack Saw Jan 26 '11 at 3:08
  • 1
    @Hack Saw: I'm talking about the physical limitations of the hardware. For most audiences you see screen resolutions of between 800px and 1200px with fringe cases on either side with the window maximized. Most sites I design cater to the largest audience and handle the fringe cases with either graceful degradation or fluid layouts (depending on the project). – MikeNGarrett Jan 26 '11 at 4:10
3

When you design about composition it is good to learn from the classic graphic design info that you can find about print (for example Typography, Grids, Kerning, White-Space, Golden Ratio). They will give you a correct linearity and order that you need in order to design "whatever".

The difficulties in web design is that nothing it is displayed in the same way. This depend from multiple factors: size of monitor, resolution, calibration of colors, operative system, browsers, devices (PC or a mobile), text resize, dynamic pages with ever changing content, forms elements, etc...

Your task it is to know about this differences and not fight against it (like many do is called the pre-concept of print design, people expect that what develop has to be the same for every media), but embrace it and adapt everyone of them in a good looking design even if with differences.

Do not forget that in the web concepts like hyperlink, infinite canvas, permalink, interaction flows (like studying about information architecture and usability), accessibility, web standards, bandwidth, and SEO are really important. You can imagine that behind each word that I used there are tons of books and website specialised to any of this things, do not panic. If you want to start from somewhere, please start from this book:

Taking your Talent to the web by Jeffrey Zeldman (a prominent figure in the web standard nowadays).

Not the answer you're looking for? Browse other questions tagged or ask your own question.