Common Design Practices

Naming Conventions

It is very important that all our files are consistently named. This makes it very clear to all members of staff what it is they are looking at and what to expect when navigating typical project folders.

Source Files

These files should take the format of: [Client_Name]_[Desktop,Tablet,Mobile]_[Template_Name]_[Version].afdesign

An example might be: We_Create_Digtial_Desktop_Homepage_002.afdesign

Website Assets

Whether you are exporting images, videos or documents, if the file is being used on the web we should always substitute spaces with dashes and files should always be in lowercase.

Furthermore, it is good practice to think about the filename from an SEO perspective for example a photo for an about us page named about-us.jpg is fine but if we take 30 seconds longer to consider more descriptive filename, the client may receive have a better chance of performing better in search engines.

Modules

Modular design involves creating components of design and using a grid-based layout to construct our web pages. The designed components make up the overall template and are designed to be reused.

Reusing designed modules can be exclusive to one website or might be reused over many of our websites. A good first read might be: Modular Design the complete primer for beginners

We are building a library of our modular code, which will be available soon.

Font Choice

When possible we should use web safe fonts rather than relying on a CSS web font. You can see typical support for web safe fonts by going to CSS Font Stack

An alternative approach is to use the system default fonts, we’ve done this recently on Omniowl

If we need to use a CSS web font we should consult Google Fonts first. We have a TypeKit account, which we can use as an alternative.

Affinity Designer

Since 2014, we have been using Affinity Designer and Photo for all our design work. There were multiple reasons for the move away from Adobe, many of which you can read here.

Layers

To keep documents clean and tidy, you should use layers when appropriate. Layers should have short names, which should be clear and consistent.

Rasterising

If using multiple bitmap images in an Affinity Designer document, a file can become large in size very quickly. It is recommended that you rasterise images as you go to ensure we keep document sizes as low as possible. This makes it easier to store, share and access source files within the office or remotely.

Folder Structure

Almost every project we complete will have its own folder, which will contain the following folders::

Asset Preparation

Preparing assets for a website is a very important process. If not done correctly, it may increase the page weight of a web page, which may have adverse affects.

File formats

It is tricky to sometimes know what type of file format to use on a web page. Here are some rules, which can be used when determining what format to use:

Bitmap images

Vector SVG

With an increase in the use of retina screens, as well as the need to cut down the number of server requests and to keep page load down, SVGs have become very popular and provide a very sharp and clean alternative to traditional bitmap images.

Animation

From time to time our websites will feature some element of animation. If animation is not possible using CSS, then a more 'low-tech' approach should be taken:

Button States

It's important to remember that buttons are not static and devices behave differently for some states. Most importantly some users require different button states so it's important that we don't forget about these users.

The following are required when designing websites, however, there are a range of pseudo classes that you should be aware of::

Hover

Focus