10 Simple Steps to the Web Design Process

Our team at Smultron has put together a helpful series of guidelines that will help any web design company to develop their website and prepare design files for developers. This article is mainly based on the specialization involving Adobe Photoshop and Adobe XD. 

PSD / XD / Sketch files

While designing with Photoshop, one must ensure that separate PSD files are provided for every subpage excluding unnecessary layers or files linking to external libraries. Every file’s layout structure should be clear to make the programmer's life easier to avoid any further misunderstandings.

If you’re working in XD, the planning should be sent as a link available with the Handoff Design Specs function. This action ensures that the programmer can further read the element parameters which are likely to be encoded along with downloading the assets. To enable this, follow the necessary steps: Share for development> Include Assets for Download. Remember to ungroup elements that don't constitute an entire (e.g., they're not an icon composed of several shapes) before exporting. 

If you're creating projects in Sketch, it is recommended to use the Zeplin plug-in which improves communication between the online design company, developers and enables asset export.

If you're using custom fonts, a font package is an ultimate requirement. However, we encourage you to use Google Fonts. This library offers a good selection of fonts and allows users to see the looks and availability of specific characters beforehand. The fonts are open-source licensed so that they can be used for both private and commercial purposes. To use Adobe Fonts, one is likely to possess a monthly or annual Creative Cloud subscription.

Gaps/Distances

It's important to keep unified gaps between elements along with all element heights which should correlate with the overall height of the text (e.g., 1.5 * line-height). 

Colors

To maintain the consistency of the project, you should provide the programmer with a color palette.

The list should also include active previews for clickable elements (for instance buttons):

Icons

 The creation of icons or vector illustrations is highly recommended while redesigning a website. While designing in Photoshop, no elements should link to an external library (e.g., Illustrator) that aren’t directly available from the project. 

In this scenario, it will be better if the vector elements within the files are Photoshop shapes and vectors are saved as SVG files.

Raster graphics/photos

Pictures or raster graphics should be sent during a separate catalog with an outline. It is recommended to avoid accidental file names along with avoiding the use of special characters. As an example, an appropriate name for a photograph file would be photography-wawel.jpg and not uoiałflklal.jpg. It's also worth remembering to supply optimized, high-resolution files. If you're using a Mac, use the free tool ImageOptim. At Png quant, you'll find a version for Windows or a Photoshop plug-in. The photos should be saved in jpg format, while illustrations and infographics should be saved in the Png format. 

Animations / interactions

If you've got a separate file with hovers/interactions, it is advisable to mark the point where the element appears. To get the animation style as close as possible, it's worthy to describe all interactions and moving elements. You can also send a link to the instance. Within the event of more complex animations – it's useful to explain the whole animation sequence (e.g., the animation lasts for 2 seconds, starts with the movement of 1 element, and at the 0.3-marks the appearance of the second element). 

Additional layout elements

There are a few more design elements that one can try considering which are as follows:

Sample text page

The elements can be used in the future for text editing in CMS. The text page should consist of text that includes: headings, citation view, a numeric list, a bulleted list, a link, or caption to a photo. 

Error 404 subpage

This page is necessary for any website which is not usually visible to the user. However, sometimes Error 404 pages are encountered that are beyond the designer’s control. For instance, someone may enter an incorrect URL; during this scenario, a mistake 404 page would appear. It is important to ensure that it is visually consistent with the rest of the subpages. 

Cookie banner

The cookie banner gets displayed during each user’s first visit to the site. 

Messages and validation

Messages and validation mainly apply to forms and search engines. It is recommended to prepare the style of error/success messages and the appearance of the active fields in the form. 

Additional information for coders

If you want to have specific dimensions for any element on a page (e.g., a specific height), make sure to provide the information to the web developer. A precise description or an additional link to an example from another page can also be helpful if something isn't being shown in the graphic file. 

Favicon

It is highly suggested to prepare a favicon which is a small icon that helps to identify a web page. It can be done by using an online tool such as  Favicon Generator. All you need to do is to upload the graphic in .png, .jpg, or .svg format. You will then get a package with icons and HTML code which can be sent directly to the web development agency.

To conclude, by making relevant use of the steps mentioned above, one can easily design the website with a hassle-free approach.