How can I ensure consistency in web design?

I had a lot of trouble formulating this question, hopefully the title is representative to the question asked.

Currently I’m assisting / managing an intern with his first big ‘web design’ project. All the way from concept to creation. It started great, the intern is super motivated.

However I noticed that when we went from wire-frame to design, there was a lack of consistency in the way the elements were made. The same element was different nearly every time.

Let me give you an example, the intern could not ‘see’ the difference between a font-size of 12px and 16px. The intern could not notice the difference between Ariel and Roboto. So, say you have a ‘news’ element the same element was repeated 3 times on the page but every time the element was shown it was different (color / font-size / spacing etc.)

I keep finding consistency errors in every feedback moment we have. It is troubling me because I’m running out of suggestions to tackle the core problem. I already said: Make sure you group the element and copy it instead of re-creating the element.

Other suggestions include, create a linked element so if you change it in one location it changes everywhere.

When he creates a heading (H2) he might use #333333 for one and then use #707070 for the next H2 heading.

Do you have any system you use so you can keep consistency or do you have a similar experience?

Additional information

There seems to be a discussion going regarding CSS vs Image based built-outs. The intern does know some CSS, enough to create a simple layout. However not enough to be free from any restraints of designing the webpage. So for this specific intern the design happens in a tool, after that it will be made by a front-end developer.

Different interns have different aspirations, I / We try to motivate them to show there is no limitation for their creativity. I only require the top 3 designs made that fulfill the users needs as researched in an earlier process. We then discuss these designs and in most cases merge different elements together to create the best design.

I rather spend the time discussing why he picked a certain element instead of explaining how he can make a certain element. So if that means using a tool like Sketch / Affinity Designer etc. its fine.

Regarding the experience of the intern 3 years of school education.

Question title was originally:
Can you / how do you teach consistency in webdesign?


Can you teach consistency? Yes. That’s what the internship is for.

Design is not something that requires talent to perform well; with enough practice your intern can become a great designer. Keep pointing his mistakes so he knows where it’s wrong, but also give him some training exercises (there are a few color matching games and other skills, you can also set a few lines of text and ask the intern to tell which one is which size).

Practice makes perfect. Eventually if your intern pays enough attention and is interested enough, he’ll get better at it.

Source : Link , Question Author : Kevin M. , Answer Author : Luciano

Leave a Comment