Designing UX/UI without design skills

Hugo Dolan
Jul 7, 2017 · 3 min read

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:

Function

No one wants to use an app that doesn’t work. Apps with circuitous menu routes, extra pages and forms will cost you users.

If the app doesn’t function correctly, forget about making it look pretty.

Make it function

  1. Use flow diagrams to chart out the typical user journey, then storyboard your app based off this
  2. Make sure that users can go back and make changes without having to start from scratch
  3. Core elements of app navigation should always be visible in your app window [Highlight in fig1]
  4. Display the information that matters to the users and remove the irrelevant clutter.
  5. 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.
Use flow diagrams to chart user journey and protoype app logic

Consistency

If there are small variations in the styling, spacing or size of elements throughout your app, your app won’t look clean and googley.

Reducing the UI into reusable components, displaying relevant information quickly to the user.

Make it Consistent

  1. 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.
  2. 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.
  3. Design components in isolation to ensure they work independently of the rest of the app
  4. 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.
  5. Use 8px / pt divisions for padding, margins and positioning, this will help take the wobbly look off your designs.
Style guides will help maintain branding through consistent colours, fonts and standard component design

Aesthetic

A strong colour scheme and judicious use of drop shadows can really help your app.

  1. Use color hunt to find a complete colour scheme that will work.
  2. Pick 1–3 standard colours specifically for warnings, alerts and validation.
  3. Reuse the same elements as much as possible, design completely new elements is a risk to consistency and user experience.
  4. 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.
  5. Use whitespace for emphasis and repeat design patterns in logo / branding throughout the app for a consistent look.

Conclusion

Thanks for reading the article this week, feel free to leave comments / opinions below! Don’t forget to follow the publication.

Hugo1005

OneHourCode

A blog for hobbyist coders and graphic designers

Hugo Dolan

Written by

UCD Statistics & ACM, Learning Data Science, Winning Team @ Citadel Dublin Data Open. www.hugodolan.com/linkedin | Mailing List: http://eepurl.com/gkV7ov

OneHourCode

A blog for hobbyist coders and graphic designers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade