An overview of best practices within web design and how it translates to better development - considering the value of organisational conventions, layered artwork, file types, and more.
Organising and consistent designs are crucial for a smooth transition and delivery of a web design project. It’s the backbone of keeping everyone involved in the project rollout on the same page.
Regardless of the programme being used to create the designs, naming and organising the assets and elements in your project makes keeping track of everything easier from both a design and development standpoint.
Having everything named clearly and grouped into labelled folders will make navigating a dense design more intuitive. Since the development team tends not to be directly involved in the creative design process, they’re naturally less familiar with the artwork project file. This is why it’s imperative when a design is given to the development team to have things named and labelled for easy perusal.
It's incredibly common for copy or other aspects to change during a project; providing a style guide and copy deck is a great way to keep all parties informed about the latest updates and changes to designs and copy.
To ensure everyone is on the same page on which stage or iterations the current project is at, use a consistent way to name your projects and files.
For example, last-minute copy changes happen and often, it’s hard to avoid. To keep on track, create a copy deck and use a variable value to help differentiate which version of the copy deck it is.
Your copy deck might be labelled ‘Project Lorem Ipsum - Copy Deck’ from there, you can tag on v1, v2, v3, etc… at the start, better, or end of the file to show which version the deck is in. The key is being consistent in how you label the files, in this case, only change the value after ‘v’. Additionally, it’s helpful to highlight all changes to the copy deck to quickly show what is different from the previous version; this will allow designers and developers to quickly make the copy changes.
Providing assets and artwork is a key part of the web design process.
Check that your design and assets are provided as appropriate file types. Ideally, assets and vector-base images should be provided as SVGs. SVGs allow for scalable assets and retain quality no matter the size they need to be. They are great in the development phase as they can be easily stylable with CSS.
If the image/asset cannot be provided as an SVG, it should be available as a high-resolution image. The image should then be downsized as appropriate to maintain a good balance of quality and performance.
When handing the reference design off to the development team, keep your wireframe file as layers rather than one flattened image. This means that individual assets can be exported and adjusted separately from the rest of the project, allowing for the design to be built more responsively. This means during the development phase, the designs can be better adjusted to fit and adapt to several screen sizes without compromising the original intent of the designs and remain usable and comprehensive as a website.
Ideally, web designs should be made in programs and software that have been specifically made with web design, prototyping and wireframing in mind; industry-standard tools such as Figma or Adobe XD are the in a web-design scenario. However, if wireframes and artwork references are made in applications such as Adobe’s Illustrator or PhotoShop, designers need to ensure that layers and elements within the design are cleanly isolated and as mentioned before, an SVG or at minimum, a high-resolution image - usually a PNG.
For example, when a flattened project file is exported, the project elements can’t be exported separately and can only be used as a single image meaning the most that can be done in the development phase is to resize the image to fit different screen size. This results in a website that’s not optimised for certain screen sizes - leading to text or images clipping off the screen or being too small to read or even warped for some devices.
If the designs use custom fonts, make sure that any agencies working on the project will also have access to them. Fonts need to be supplied with the full web font kits provided and in all the browser file types that are required, this includes .ttf, .otf, .woff, .woff2, and .eot.
Designs should always have the user experience front of mind. From a promotional perspective, the majority of users, approximately 85% of participants signing up for prize draws and promotions, will be doing so on mobile devices, so whilst the consideration of multiple display sizes is important, having a mobile-first approach is critical.
When developing, there should be a consistent consideration for the popular screen sizes. Since it’s not realistic to develop dozens of versions of a website to accommodate all device types - adopting responsive web design in websites is standard in the industry.
To make a website both responsive and visually appealing, as mentioned above, wireframe and prototype files should be layered and not a flattened image so that during the development phase, elements can be adjusted whilst maintaining the essence and feeling of the original designs.
Consider making 2 versions of the website during the design phase, one for desktop and mobile to outline the different nuances between them. Of course, there will be slight variances in the dimensions in between and beyond, but having 2 versions will give the developer a general idea of what to do instead of being left to guess.
When designing a website on mobile and desktop - be sure that the correct dimensions are being used. For example, a mobile screen is approximately 500 pixels wide, so ensure the frame being used matches to prevent developers from having to guess and approximate what the design would look like on actual mobile dimensions - particularly if wireframes are being made in Photoshop and Illustrator. Applications like Figma tend to have presets for device dimensions which allow designers to pre-select a screen size and work from there.
Whilst design principles are applicable across several mediums, digital design like web design requires some extra considerations. For example, hierarchy is important in all design, but in digital design, the ‘fold’ is an extra factor to be considered.
The fold point differentiates the content on the screen once the page is loaded and the content that is only visible when the user scrolls down. The area above the fold is crucial and is the first thing users will see.
For this reason, it’s recommended that the area above the fold contains the primary call to action and any main inputs such as the form for promotions.
Refer to the WCAG to understand and improve accessibility for web content. Users are demanding more accessibility, awareness, and compliance from websites which can be done by following the key points of the WCAG 2.2 standards which involve the 5 listed touchpoints of being: perceivable, operable, understandable, robust, and conformance.
Ignoring accessibility not only makes things more difficult for the users who don’t necessarily need those accessibility considerations, but it also isolates a wide demographic of users who rely on standard web accessibility practices such as keyboard navigation, device screen readers, and text alternatives.
We’re happy to answer any of your questions or to tell you more about what we do and how we could support your next promotional campaign.
