Designing UX/UI without design skills
I’m currently working on further parts to sw-toolbox tutorials, so stay tuned!
What are the things you need to make a our site look great:
No one wants to use an app that doesn’t work. Apps with circuitous menu routes, extra pages and forms will cost you users.
Make it function
- Use flow diagrams to chart out the typical user journey, then storyboard your app based off this
- Make sure that users can go back and make changes without having to start from scratch
- Core elements of app navigation should always be visible in your app window [Highlight in fig1]
- Display the information that matters to the users and remove the irrelevant clutter.
- Designing for mobile first is a must, it helps to distill the UI. If you run out of dev time for a desktop redesign your app will still be perfectly usable on desktop / tablet.
If there are small variations in the styling, spacing or size of elements throughout your app, your app won’t look clean and googley.
Make it Consistent
- If your still using photoshop ditch it and move over to XD / sketch, I spent way too much time fiddling with selecting layers and getting alignments right in it.
- Create a style guide, this means picking a consistent size, font underline etc for your headings, sub headings, paragraphs etc. Have this somewhere where you can constantly copy and paste from.
- Design components in isolation to ensure they work independently of the rest of the app
- Create a component library in your design tool of choice. Small variations that you won’t notice till later have the potential to ruin your design, keep a master copy of your components that you can use everywhere.
- Use 8px / pt divisions for padding, margins and positioning, this will help take the wobbly look off your designs.
A strong colour scheme and judicious use of drop shadows can really help your app.
- Use color hunt to find a complete colour scheme that will work.
- Pick 1–3 standard colours specifically for warnings, alerts and validation.
- Reuse the same elements as much as possible, design completely new elements is a risk to consistency and user experience.
- Pick 2 fonts no more. If your new to design its wise to pick one font for headers and one for the body. Different fonts convey different emotion depending on their style and period, so find one that works well for your style and play it safe with the other.
- Use whitespace for emphasis and repeat design patterns in logo / branding throughout the app for a consistent look.
Thanks for reading the article this week, feel free to leave comments / opinions below! Don’t forget to follow the publication.