Development ready website designs
As a website developer, I get a little rush of endorphins when Figma files are organised and extensive.
I love building great website designs and seeing them come to life. But on the flip side it’s annoying when Figma files are a chaotic mess.
As a developer I don’t want to waste time scrolling around in Figma trying to work out what file I should be working from. Alas, so many time we have built the wrong thing due to messy file structures.
The following is a work in progress wish list for designers that i love to see when working with your files.
Create a UI Kit.
From Little things big things grow. Go deep. Create all the website elements with consistency of brand in mind. All the little elements in the UI kit will make up the entire website. Ensuring consistency and simplicity.
If you need to change 1 thing it should update everywhere across the site files.
What to include in your UI KIT
Provide states and secondary content.
- Hover states are key parts to the design. Its best you as the designer provides these. See ato for great example of hover states
- provide both the open and closed states of accordions
- A 404 page, every website needs a 404 page
- The thankyou message of a form submission
- A validation error of a form
- Open states of dropdown menus
- Pagination for blogs and slideshows
- Designs for the flyout mobile menu
- What does the sticky header look like?
- What does the back to top arrow look like?
Keep files organised and truthful.
- Crop white space off images
- Group elements together to ensure they export correctly
- Work with the correct content, correct links, copy images
- Avoid working with transparent colours
- Reuse components from your UI kit to make up more complex reusable website blocks
- Work to the correct content width. Don’t go to narrow. Don’t go too wide. Ask your developers what they think is best. [[2023-05-03-popular-screen-resolutions-for-designing-user-interfaces]]
- Organise the files with some sort of system for naming
Due Diligence
Avoid the mindset of “we will fix that in development” this mind set can be dangerous and costly.