secure10 Simple Steps to the Web Design Process

10 Simple Steps to the Web Design Process

5 Oct · 5 min read

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 put together their website and prepare design files for developers. This text will mainly specialize in Adobe Photoshop and Adobe XD. 

PSD / XD / Sketch files

While designing with Photoshop, make sure that separate PSD files are provided for every subpage. It must be ensured that are not any 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 longer 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, select: 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. It improves communication between the online design company and developers and enables asset export.

If you're using custom fonts, a font package is required. 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, you would like to possess a monthly or annual Creative Cloud subscription. Otherwise, you should purchase a one-time license for every typeface (regular, italic, bold, etc.). 

Gaps/distances

Keep unified gaps between elements (i.e., padding and margin). Both of these elements, along with all element heights (and if possible, widths), should correlate with the road height of the text (e.g., 1.5 * line height). 

Colors

To keep the project consistent, you should provide the programmer with a color palette (a list of colours that can be used on the website).

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

Icons

When designing a website, icons or vector illustrations are often created. 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 might be better if the vector elements within the files were Photoshop shapes or the vectors were saved as SVG files and delivered during a separate .zip folder. one SVG file should be clean and contain only the right vector icon. 

Raster graphics/photos

Pictures or raster graphics should be sent during a separate catalogue with an outline. Try to avoid accidental file names. Don't use diacritical marks and special characters. Write a quick name for every picture and use dashes. As an example, an appropriate name for a photograph file would be photography-wawel.jpg, 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. Save traditional photos 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. Is there an invented or selected hover effect? 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 few more design elements to think about. Check out the list below: 

Sample text page

It may not be the main webpage, but it is still important due to the elements that appear in it. 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, but hopefully, users will never see it 😉. 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. Make sure 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 inform the web developer. A precise description or a link to an example from another page can also be helpful if something isn't being shown in the graphic file. 

Favicon

Last but not least, prepare a favicon – a small icon that helps to identify a web page. It can be done by using the online tool: Favicon Generator. First, 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.

Comment as

Login or comment as

0 comments