12 Essential Web Design Interview Questions *

White space in graphic design is any area left intentionally blank. It doesn’t have to be white. Both in web design and other media white space can be efficiently used to visually separate or group elements, to draw attention to a specific element, to reinforce the content layout or grid. Sometimes, white space is also used purely aesthetically to create visually interesting compositions.

Gestalt principles are part of the theory of visual perception. They deal with the mind’s ability to “see” things that are not explicitly visible, by subconsciously combining shapes, finding similarities, completing compositions of physically disconnected elements. A few of the principles commonly used in design are:

• Similarity - the human mind perceives elements with similar features (either in color, shape, size or combination of the three) as related, meaningfully connected or grouped together. This is especially useful in navigation systems design and application toolbars;

• Proximity - similarly to the similarity principle, elements which are placed close to each other are considered grouped, related, or parts of a whole. This is a building principle of layout design. It’s especially important when designing pages with large amounts of varied content (like the home page of a news website or application)

• Closure - when faced with a familiar looking object which is incomplete in its visualisation (parts of the image are missing) the mind automatically “completes the picture” or fills in the blanks and effectively sees the image as if it was fully displayed. This is a principle often used in logo design. Using the closure principle can make an element more interesting to look at (as the user’s mind “works” to complete the element) which makes the design more memorable;

• Figure-ground relation is the tendency to mentally separate “objects” from “backgrounds” based on combination of color, shape and past experience. When properly used in graphic design, this principle directs the user’s attention to important elements of the composition;

• Common fate - elements moving synchronously in tandem are often conceived as grouped or as parts of a single object. Common fate can be useful in interaction design;

• Continuity - the mind’s ability to see connections and follow one path or another based on similarities and to follow lines past their end points. This principle can be used in logo design to generate interest. It can also be used when building layouts or compositions to make them look as a single tidy object, rather than a bunch of cluttered elements.

Some fonts work together nicely and look good on the same page. To combine two fonts properly we need to look for similarities and differences between them (serifs, historic background, x-height, thickness, aperture, stroke contrast).

As a good general rule of thumb, two fonts work well together if they are either similar except for one important thing (analogous fonts), or if they’re very different but have one thing in common to connect them (complementary fonts). It thing that is always good for the two fonts to have equal x-heights (the height of a lowercase “x” compared to the uppercase “X” of the same font-size) in common.

Combining fonts that look too similar should be avoided (like combining Helvetica with Lucida Grande or Arial with Verdana).

A few rules to create good combinations:

• Combine a serif with a sans-serif font, both of which have very similar x-height, stroke contrast (the difference between the thinnest and thickest parts of a character’s lines) and aperture (how open or closed the characters are);
• Use contrasting thickness options of a single font; a light/thin version of a font is very different than its bold/black versions and the two versions work very nicely in combination;
• Some fonts are designed as families and work well with one another. Examples are Adobe’s Myriad and Minion pair or Museo with Museo Sans and Adelle with Adelle Sans.
• When selecting fonts, it’s important to keep in mind the context each will be used in. The headings or display font could be more lavish, exquisite and detailed, while the main copy should be a simpler font that is readable in smaller sizes.
• For most designs, one or two font families will suffice with a possible third used sparingly for very specific purposes.

Some color combinations are more visually appealing than others, and there’s a reason for that: The human mind looks for harmonies, order and systems, and color schemes that adhere to such systems look more “pleasing”. There are several ways to combine colors effectively.

Here are a few:

• Monochromatic - using a few different hues of the same tint, such as combining pale green with deep, dark green and using bright green for accents. It’s good for foreground color and background color combinations.

• Analogous - using colors that stand close to each other on the color wheel (and the rainbow), such as orange and yellow, blue and green, or red and purple. Usually, it works for elements placed next to each other, but not as effectively as combinations for foreground and background.

• Complementary - using colors which stand on opposing sides of the color wheel such as orange and purple, blue and yellow, or green and red. These colors generally have good contrast and if they also differ in lightness, they can be used as pairs for foreground and background colors. The designer should remember that certain complementary combinations don’t look good (red on green and vice versa are irritating to look at and are rarely used in combination) while others have stunning contrast.

Different image compression formats have different purposes with different compression methods.

• JPEG compression reduces the image size by finding areas of a similar color; the higher the compression level, the more aggressively it looks for such areas leading to a loss of visual information and the generation of artefacts at the edges of the compressed areas. This compression is effective for photos, drawings, gradients, most illustrations and other colorful, rich images. JPEG doesn’t work as well for screenshots, simple UI elements, flat icons, schematics, and it is especially bad for text.

• PNG compression works by reducing the number of used colors. Depending on the level of compression this could lead to slight loss of color shades. PNG is great for logos, icons, signs, images containing text, for simple illustrations, UI elements and screenshots. Unlike JPEG, it also allows images to have transparent areas. PNG files are usually larger than JPEGs and don’t provide good compression for photos and complex, colorful images and gradients.

With the abundance of devices equipped with high pixel density displays, it’s important to provide high resolution of some images on a website, and especially important for those with simple shapes and fine lines, such as logos, figures, schematics and product photos.

• When an image is used in HTML as an IMG tag, techniques such as PictureFill may be used until the new PICTURE tag is widely adopted by popular browsers. This way, different versions and sizes of images can be served based on the user’s device size and pixel density.
• When used as a background image in CSS, media queries can be used to target different devices so the most suitable size of an image is served to each user.
• When creating or slicing Photoshop (or other) mockups made for smartphones or high pixel density devices, it’s crucial to remember that the mockup is twice as large as it would be on the device. A device’s 1200-pixel screen width is generally treated as 600-pixel wide. This means a 32-pixel high text in the mockup should be coded as 16-pixel height when writing the CSS file, and a 300-pixel wide image has a width of 150 pixels on the web page (of that device’s screen). Effectively one should treat every two-by-two pixel square of the Photoshop mockup as a single pixel on the device.

When you use video on a website using the HTML5 video element (as opposed to embedding from YouTube, Vimeo or other video-hosting services) it’s the website’s responsibility to serve each browser that video in a format that the browser can play.

As of recently, major browsers, OS and devices support the MP4 video format (using MPEG4 or h.264 compression). To assure compatibility with Firefox clients and certain Android devices that can’t play an MP4 video, it’s good to have copies of the video in OGV and WebM formats. When multiple copies are available, all files should be listed as source elements of the VIDEO tag.

There are many ways to improve the performance of a website and developers may have ideas specific to the nature of each project. A few of the more common and easy to implement optimizations are:

• Minimize CSS and JS code to save a few hundred kilobytes of each page load.
• Have all assets compressed in the most appropriate format and at optimal settings (a good balance between quality loss and speed gain in important).
• Enable server side caching mechanisms (Memcached, Redis, gzip compression, APC, etc.).
• Serve responsive images according to device screen size and pixel density and only load the appropriate ones for the user’s case.
• Write clean and concise HTML, don’t include compiled frameworks, stop loading unused scripts or CSS modules.

The page should only have one H1 element, unless there are ARTICLE or SECTION elements, in which case each of those can have a single H1 of its own.

The H1 tag is important for search engines and other machines that read the web page’s code and interpret its content. The H1 of a document, article or section is considered to be its main heading or title. Not using H1 elements properly can impact the website’s SEO performance.

Although these tags create specific visual treatment (STRONG makes the text bold, EM makes it italicised and SMALL makes it smaller), this is not their purpose and they should not be used simply to style a piece of content in a specific way.

Each of the three has semantic purpose and should only be used to mark text as follows:

• EM - Emphasized text. This is text that should be emphasized thus changing the meaning of its context.
• STRONG - Strong importance. Can be used in titles, headings or paragraphs to emphasize the word or phrase that bears the most importance in the sentence. It can also be used to stress the importance, or seriousness, of a word or phrase.
• SMALL - Small print. Used for disclaimers, clarifications and general de-emphasizing of the marked text.

To style text as bold, italic or in smaller font, generic tags can be used and the styles applied with CSS code instead of abusing semantic HTML5 elements.

HTML5 provides many new element types so the more complex content may be properly marked up. This helps machines (such as search engines, parsers, screen readers, etc.) read a web page and understand its content structure.

• ARTICLE defines a piece of self-contained content with a heading of its own, which can exist outside the context of its web page. Useful for a news piece, an article, a product.
• FIGURE designates an image as a figure related to the content such as a schematic, blueprint or chart. With FIGCAPTION, a visual description of the image can be added too.
• ASIDE indicates information related to the main content on the page but is not a part of the actual content. An example usage would be a list of related articles on the same topic as the main article.

• Advantages: Frameworks allow for fast prototyping of layouts, elements and pages, and promote reusability of consistent elements across the whole project. This often eliminates the need of dead end deliverables such as Photoshop mockups or other high-fidelity static sketches. In contrast, the HTML prototypes powered by a framework later evolve into the actual production templates code used by the new site. Another advantage is the myriad of development tools that come with the better frameworks: LESS/SASS preprocessors, variables for key values in the design, builder tools like Grunt/Gulp, ready to use JS scripts for commonly used interactions (modals, carousels and collapsing boxes, among others). Finally, frameworks come with good practices and commonly used pieces of standardized, well documented code built-in, and a large community to turn to when issues arise.

• Disadvantages: Although frameworks provide tons of built-in features and eliminate the need to write repetitive code, they also tend to generalize common elements and often lead to samey-looking designs. Another caveat is that when using a framework for a complex or unconventional design or a layout with a more complex grid, there’s more effort involved in “fighting” the frameworks compared to simply writing the code from scratch. Sometimes, frameworks come with too much stuff that never gets used, or redundant styles that get overridden if not used correctly, leading to slower load times compared to a clean code written from scratch.

To properly utilise a CSS framework, developers should not include the compiled CSS of the framework and then write their own overrides. To take full advantage of the framework, the built-in development tools should be used: variables to be set, LESS/SASS mix-ins to be utilised, and the unused components to be excluded. Another frequent mistake is the heavy reliance on framework markup for layout and styling, which makes the separation of content and style harder and leads to design changes requiring editing HTML instead of CSS.

Mobile First is a methodology for creating responsive CSS code where the styles for mobile devices are written first, without media queries, and for each screen size step up, a new media query is added extending, modifying and overriding the existing styles of the previous (smaller) step.

• Advantages - Easiest to optimise load times on smaller devices as no extra assets and styles apply (the assets linked in the following media queries don’t get loaded). Very effective for simpler designs where larger screen styles are an upgraded version of the smaller ones, for example, when decoration or new elements are added for richer experience on larger screens.

• Disadvantages - This technique is not as effective if the mobile and the desktop versions of the layout have significant differences, or for complex layouts and for most web apps. In such cases, the Mobile First code gets more complex than necessary with too many overrides.

Desktop First is the classic way of writing CSS; the desktop version of the styles is either not in media queries or starts with a minimum width requirement, and for each screen size smaller than the initial one, a new media query is added starting from the largest to the smallest. With each consequent media query, elements are hidden, rearranged or re-styled.

• Advantages - As opposed to the Mobile First approach, Desktop First excels at designs that significantly differ between screen sizes, such as when elements are removed as the screen gets smaller. This is also the only way to add responsive capabilities to an existing older website without rewriting its code.

• Disadvantages - If not implemented correctly, it could lead to unused or overridden code and assets being loaded on smaller devices thus making the website heavier on smartphones. This leads to unnecessary overriding of styles and writing extra code for simpler designs where Mobile First could be implemented more easily.

For websites where the mobile and desktop versions are slightly different, it’s generally a better practice to serve separate stylesheets based on screen size, or to isolate the two layouts in non-overlapping media queries, each strongly specific to its target devices.