How can I ensure consistency in web design?

Question

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?

Answer 1

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.

Answer 2

To me this sounds like a validation and information issue, not a design one. While the font size and style issues should be visually apparent, even if they're not, the intern should have the tools to verify the styles. If the intern is able to be this inconsistent, it shows that there is a lacking proper use of CSS, as proper CSS usage revolves around usage of defined styles to multiple elements of the same intended style. The fact that this isn't done is the root of the issue in my opinion. However, even if this isn't done, the person should still have the tools and knowledge to validate this themselves. Thus, to me the issue is multiple:

• Maybe your specification isn't specific enough. Are the font types, styles, and sizes mentioned even in the wireframe stage?
• The fact that they are inconsistent for same styled elements means improper usage of CSS. For example, all H2's should be the same, defined by a global H2 style, and overriden when needed.
• The fact that they allow different styles to get passed them also points to an issue with validating their own styles. I don't need to even see that X is a different style, I explicitly would view the style settings of X and validate it matches specifications.

Answer 3

Everybody with normal eyesight can see, but most people (including your intern) never learn how to look.

If you want somebody to see inconsistencies, you have to teach them to look for them.

You can also get the point across by (gently) challenging the intern to justify his/her decisions, along the lines of "why did you choose to make these two entities different sizes/fonts/colours/whatever?" It may be that there isn't any conscious choice involved, and learning that "no reason" is never a good reason is another basic lesson for your intern.

Answer 4

I don't think there's a single method here.

If this person is an intern, presumably (s)he is there to learn the job from other more experienced people in the team, manager included. Yes, the job sometimes involves the 'boring' part of checking that all your headlines are actually in the same font size and color.

As an intern, (s)he should be open to learning what consistency is, why clients pay money for consistency and how consistency should be applied via predefined styles, which are available in most editing software and very useful for consistency in color, font size, spacing and so on.

I'd say the quick answer is to implement and re-use styles where possible.

Answer 5

A slightly more labor intensive method (at the start) would be to use SASS and set commonly used elements as variables. So instead of using font-size: 10px;, they would use font-size: $font-size-small or color: #303030 they'd use color: $deep-grey. It could be that using words instead of numbers helps them remember precise values more.

Answer 6

the design happens in a tool, after that it will be made by a front-end developer.

This assumes something such as Photoshop, Illustrator, Sketch, Affinity is being used to create a mock-up.

In order to teach consistency with this workflow, you really need to impress upon the intern attention to detail and the need to duplicate then change elements rather than constructing them multiple times.

For example, create one "newsfeed block", group it, then duplicate it for the second newsfeed block.

Use of application features designed to help consistency, such as Paragraph/Character styles help ensure type remains consistent. If the "tool" offers features such as Symbols, then utilizing those will assist as well. Symbols being one item that is merely placed as instances -- change the symbol, all instances change as well.

Beyond this, it's really just hammering in "attention to detail". Often it can take a extra "pass" over something for a designer to catch some small inconsistencies. Unfortunately, if a designer doesn't "see" the difference between 12pt and 16pt type or Arial and Roboto faces.. well.. that may take far more patience. Most designers start seeing those differences after a few months in the field. Even if they don't know what the difference is, they can generally tell there is a difference.

---

Not to be too harsh.... but it's also important to realize that not everyone who wants to be a designer has the capacity. There are restrictions when designing anything. Restrictions that often must be foremost in the designer's mind. Nothing is typically done with rampant creativity. There are always medium restrictions. Failure to grasp medium restrictions can often mean the work is unusable, or less usable, due to a consistent need to "fix" or "correct" it, increasing costs.

---

I'm not overly fond of the "image mock up" workflow. I don't personally feel it's a creativity hurdle, especially if a wireframe has been determined. If element positions and sizes have been determined via a wireframe, the only items left are font choices and colors and possibly sprite images, all easily altered via a Style Sheet. In addition, things can be explored in an image editor, then implemented in an HTML/CSS build out. The time spent constructing an entire image mock up is often wasted time/cost. But, this is merely my opinion and admittedly depends upon the type of sites being created. If they are image-rich there may be a need for more give where this is concerned.