Web Design Guidelines

Designing a website using industry standards is a necessity. By doing so, the final product truly pays off in a substantial way. It can aid in ongoing design maintenance, encourage technical conversation regarding the functionality of how an element should operate and increase development efficiency. Within this article, I will walk you through the key areas of web design as a standardized guideline of design specifications when kicking off your project. Meeting these guidelines is an investment into achieving a successful final product.

File Types

Adobe Illustrator (.ai)

The current trend for flat, material and minimal responsive web design, it’s looking more and more as if Illustrator should be considered a viable option, especially as developers favor vector output such as scalable vector graphics (SVG).

Adobe Photoshop (.psd)

Photoshop is not, nor will it ever be a redundant program. Besides vector graphics, for website design, it will be the strong leader for the foreseeable future. Note: Out of the two software types mentioned above, recommended the option for today’s design trends is a vector base software like Adobe Illustrator. All vector based objects such as icons, call to action graphics, buttons can be extracted from the document and used for development. All delivered in one (.ai) file as opposed separate files for vector graphics.

Document Setup

Size

The size depends on which device you are designing for. Normally it will be a desktop device to begin with or you’re style might be a mobile first approach. Either way below is the recommended sizing per device. Desktop: 1920 x 1080 Tablet: 786 x 1024 Mobile: 320 x 568 Note: The height of your document may increase in value based on the needs of your design.

Units

As we are designing for the screen devices, pixels are used in this case.

Colour Mode

When designing for the web we use RGB

Raster Effects

This will be at 72 ppi

Layer Panel

Having layered structure within the layers panel assist the developer to hide or select objects quickly without any confusion of structure. A common layer structure sequence would be as follows:

1. 1. “GRID & GUIDES”: This will consist of any use of grid systems (for example bootstrap) and ruler guides.

1. 1. “HEADER”: This will consist of your main menu area. (Example: Top navigation, company logo, social icons, etc.)

1. 1. “BANNER”: This will consist of your banner images, possible slogans, call to actions, etc.
      1. If you have more than one banner (like a slider) you can hide or make layers visible. For example:
         1. “BANNER 1”
         2. “BANNER 2”
         3. “BANNER 3”

1. 1. “CONTENT”: This is the main body content of the page.
      • If the body contains sections you can also group layers and name accordingly. For example:
        1. “INTRODUCTION”
        2. “SERVICES”
        3. “NEWS”
        4. “TESTIMONIALS”

1. “FOOTER”: This will consist of the footer area of the site.

Note: Use the above 5 points as a guideline, everything else is examples. Your use of all entirely depends on the need of elements and influence of content.

Grid System

Keeping up with technology trends is important as a digital designer. Popular coding languages like HTML, CSS, and Javascript frameworks are commonly used developing responsive websites. Bootstrap’s 12-column grid system is a commonly use responsive framework for websites today. As a digital designer, it’s important to know what type of technology or frameworks are intended to be used within the project as this may influence your design. For more information on Bootstrap’s Grid system, visit the bootstrap website

Typography

Font

Google Fonts: When choosing font a good resource is Google fonts. Different systems such as browsers, operating systems, and mobile devices can cause font errors on some devices. Thanks to Google’s fast content delivery network (CDN), you no longer have to worry about those cross-platform issues anymore. Custom Fonts: In some cases, we have strict branding guidelines to follow in which custom fonts are required for use. If this is the case, when handing over a design file to to a developer, custom fonts should be provided also.

Sizing

When designing for the web we have hierarchical heading tags from H1 – H6. H1 is normally the largest font in design and H6 being the smallest. You’re sizing of H1 – H6 can vary based on your design however rules of thumb of sizing are as follows:

• H1 – 36px
• H2 – 30px
• H3 – 24px
• H4 – 18px
• H5 – 14px
• H6 – 12px

For a paragraph, this can vary based on your design requirements. Bootstrap default font sizes are 14px, however for readability according to World Wide Web Consortium (W3C) 16px is recommended.

Imagery

When using images, it is best to embed the images into the Adobe file rather than placing it. Embedding the image into the document avoids having to link an external image file to the design document. Placing images can be problematic when handing over design documents to a developer as folder paths may change resulting in images not displaying for the receiver.

Handover

Handing over your designs to a developer should be as clean and easily understood. A few key checkpoints to consider before submitting any design work for development:

• Have I clearly named my files and are they in sequence?
• Do you I need to provide any custom fonts?
• Do I need to provide any high-resolution images?
• Do I need to provide web optimised imagery?
• Do I need to provide any notes that may highlight key functionalities that a static mockup may not translate across for development?

The talented developers will take care of the rest.