Uploaded website on Github pages

Design guidelines for Web Development

This is a a collection of links and thoughts about web design which tries to give some guidelines. It is in no way meant to be complete.

First, consider web page layout

  • Which part of the web page is visible? (scroll?)
  • What viewport size(s)? Try aiming at least: Small (under 600px), Medium (600px – 900px) and Large (900px+)
  • Will it be scale-able, fixed or responsive?

Articles:

Do: Test your site on your mobile, on other computers, at home etc.

What’s good? … and what’s not?

  • Content is king! [readable, clear, to-the-point]
  • Texts: quick-scan & in-depth [texts should be very short, but if necessary, provide more info]
  • Navigation [easy to navigate, can we find what we want… and expect?]
  • Graphics & colors
  • Technical aspects: valid HTML, multiple browsers… (test!)

Articles:

Composition

Look at the images below. Which one do you think looks the best? Why?

Now look again, with added sections, 3 rows and 3 columns:

(thanks to dolcepics.com)

When to compose an image, page, or layout, try to follow this “Rule of thirds” or “Divine proportion” (1.62).

Example for a webpage:

Articles:

Color

See w3schools color tutorial, use palette of matching sets of colors.
Use tools like the W3schools ColorPicker, ColorZilla (it has a color picker, gradient generator and more).

Design resources

Remember to:
Respect the rights of owners of media*
Check copyrights/license/terms of use of (stock) media*

* “Media”: texts, quotes, templates, scripts, plugins, fonts, photos, images, icons, pictures, animations, video’s…