7

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?

  • 7
    Is the intern familiar with stylesheets? – curious Dec 17 '19 at 11:04
  • 1
    Encouraging the use of symbols can help this as well. – Zach Saucier Dec 17 '19 at 14:47
  • 1
    How much graphic design training has the intern gone through so far? Typically internships are taken nearing the end of formal training. I would expect a student to be able to design consistently to some extent (not perfect but definitely not all over the place) – curious Dec 17 '19 at 18:07
  • 1
    Is CSS being written inline or as an external style sheet? Is he/she redefining CSS elements continually in the style sheet? The consistency issues you point out should not be present with an established Style Sheet unless that style sheet is continually being added to, which is wrong. H2 should be H2, consistently, once it is defined once in a style sheet. And things like font usage should only be declared once for each font then size possibly per element. So mismatched faces shouldn't happen. It is difficult to be definitive with an answer without seeing actual construction markup. – Scott Dec 17 '19 at 19:42
  • 2
    Ultimately, it sounds as if there's a misunderstanding of how to use CSS. (all assuming this is live HTML/CSS construction and not some full page Photoshop image - which may be a different matter entirely and more of an X/Y problem). – Scott Dec 17 '19 at 19:43
10

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.

|improve this answer|||||
  • I can't believe that I got a perfect score on the first color matching game, given that I am color blind and had to guess most of it. – MechMK1 Dec 18 '19 at 15:13
  • @MechMK1 I have a theory that partial color blindedness isn't what people say it is, but rather, such people can actually see color distinctions better than most of the population and get judged as though they see worse. – Andrew Dec 18 '19 at 21:31
  • @Andrew Perhaps it's because I used to play a bit of "I love Hue" and that taught me how to do this intuitively? I don't know. Most of these hues still look basically the same to me. – MechMK1 Dec 18 '19 at 21:40
  • 1
    @MechMK1 Well think about this: if you're really colorblind, how would you possibly be able to get a perfect score? You must be able to tell the distinction between colors just fine. – Andrew Dec 18 '19 at 21:56
4

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.
|improve this 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.

|improve this answer|||||
2

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.

|improve this answer|||||
  • Not boring if using stylesheets or other methods of consistent code. – Andrew Dec 18 '19 at 21:34
1

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.

|improve this answer|||||
1

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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