At our 2016 national web design contest in Louisville, KY (June 21 – 24, 2016), I mentioned that I would pass along general comments received from our judges. These notes are directed at all submitted work (we are not singling any team out with these observations). We hope these comments help you improve your future web design and development efforts. I have tried to group these observations into categories.

Graphics

Clients often have brand standards that represent the company brand. The standards usually require specific use of colors including the hex, RGB, pantone, etc… This is to keep consistency in shades of a color, for example blue being used. Otherwise the printed materials, and various company website end up with a range of different blue tones which not considered good for brand identity.  This is not an opportunity to be creative and choose a shade of blue.

If a client specifies a specific color by code you need to use that color. You may get limited use of accent colors approved, but the main color scheme needs to be the specific color codes they requested. Note that even if the client “approved” use of a different color, they are not the graphic designer or marketing department. It is important to adhere to what is asked for in the client work order.

Logos – don’t use a logo if the text in the design is not legible or is fuzzy. Just don’t do it.

Test, test, test. Place your images and scale that page up and down and don’t forget to step back and look at the whole page design and how the logo, text size of headers and body text and images relate to each other. The proportions should be similar but display the hierarchy appropriate for each element. If you have a tiny logo, tiny body text, a huge header image and header text, the site is not going to scale well for smaller devices.

HTML and CSS

Although the contest work order clearly spelled out that there was a desire for rotated text in a circle, few actually accomplished with with CSS. In CSS-3, this is a relatively easy task. One simply uses border-radius and the transform properties. If you are not being taught how to use CSS-3 effectively (such as for this example), have your teacher contact WebProfessionals. We may be able to provide additional help/ guidance.

Some teams used templates (for CSS, JavaScript, overall layout). The work order specifically indicated not to do this. Yes, all those judging the competition readily recognize the use of templates and deducted significant points when those were used. It is very important to follow the instructions clearly.

Some teams developed very elaborate and well commented code (from scratch). Some clearly used CSS pre-processors effectively. This impressed those judging.

A few teams relied on the use of tables for design of the web page. This concept has fallen out of favor over a decade ago. Tables should only be used for tabular data. They should not be used for design. That is what CSS-3 is all about. If you are being taught this – you are being taught outdated technologies. Using tables for design causes all sorts of problems with respect to web accessibility. Since the majority of visitors to a web page are blind (search engine bots), overall search engine rank will decrease with use of this older approach.

Some judges also commented on the use of Animate CC (formerly known as Flash) .swf files. Again, this is an older technique and should not be used. This does not mean that Animate CC should not be used. It can be used effectively to create all sorts of HTML animations. Of course, you can only do this using the Creative cloud version of the software. If you only have access to an older version (such as CS6 or earlier), just don’t use it.

Interview

We mentioned the majority of these comments during the debriefing, and have included them again for clarity.

Most started their interview with an overview of their skillsets and qualifications. Give some thought to what differentiates you from others. What do you do differently/ better than anyone else?

Many conveyed their passion and willingness to learn and challenge themselves in our dynamic and ever changing industry. Try to clearly define what you have learned or done differently because of what you learned. In today’s environment, it is important to be able to rapidly learn a new concept; recognize when that new concept is becoming stale – then unlearn it and relearn the current industry “best practice” with respect to that concept.

When you are explaining your overall process, make certain you clearly spell out the details. Don’t just provide an overview – get specific.

JavaScript

It was noted that many teams did not attempt to include any JavaScript. If this is not something included in your web education, it should be. At a minimum, everyone should have been able to code the bits required for this competition with their base knowledge of JavaScript.

Process

It was wonderful to see the improvements to everyone’s processes this year. In years past we’ve had to just get students to understand that they needed to have a process. Now the skills have risen to the point that we can actually begin to judge the details of your planning process. This is wonderful and so encouraging to me as an organizer.

It is important to understand that the things you produce as you are planning a website serve multiple purposes. On the one hand they are ideation tools for you to quickly generate ideas, throw half the ideas away and refine the other half. It is important to remember that they also serve as communication tool between you and your client. I

Most of the wireframes I saw were too general. When thinking about Information architecture and planing out the layout with wireframes, it is important to identify WHAT content is going to live in a given location, not just THAT content is going to live there.

It was rare that I heard teams talk about any principals of usability or relate content to users. This should be you baseline. Everything should be placed purposefully with thought to they user.

Web fonts

Fonts are a core element of design these days. First, make sure you understand the fundamentals of how a web pages displays a font. Understand that they rely on a user’s system fonts; this appears to be a missed concept! Once you thoroughly understand it, next study web fonts and how to correctly utilize web fonts in a web page. Fonts play a very important role in the design and usability of your site. If you aren’t specifically defining the fonts to be used throughout your site, then you aren’t “designing” your site. Some judges were shocked by lack of understanding of how to use the font-family tag and how to use a web font.

Text on a website should not be in an image. It should be real text. With the wide availability of web fonts there is no reason to make text into an image. It decrease the legibility and quality of the text when it is an image and it makes the site less accessible.

One should always define a set of fonts for your body and header tags, and always, always set a backup/alternative/default (whatever you want to call it) font. Use web fonts not images for text. There are no excuses with today’s modern browsers and CSS-3.

Be careful using script fonts for nearly anything on a web page because they are often hard to read. They should not be used for navigation or body text.  The occasional header or a 1 to 3 words to add emphasis or contrast on a page is an okay use.

One of the most frequently asked questions (remember each team could ask 2 questions) dealt with how to implement web fonts. Obviously, there is recognition of the importance of selecting the proper font as part of the design process. Many teams did implement web fonts, but they often overlooked the fact that the font was located in another directory (which meant the code did not cause the font to display properly).

We may receive additional comments from other judges. As soon as we do, we will update this post with the added information.