Starting Out: basic UI/UX principles for building digital products

How do I start a UI framework?

Greyscale Wireframes

Use a greyscale wireframing technique to map out the UI before adding any design elements, here’s an example from InVision. There’s a lot of good stuff on their blog! Build a prototype! Not sure how in-depth you need to go, but we build and test the UI designs in this greyscale form before adding any designed elements. Here’s what a greyscale prototype looks like. Here are more examples. Only one reason for this to learn what works and what doesn’t; design > test (with users/clients/friends) > iterate> test. Repeat. Keep doing this until the UX design is clear, concise and distinct.

Remember, there are a few extra things to consider as you’re designing: Grid systems (for screen breaks), here’s a good summary of that. W3C guidelines are hard to stick to, but you should be implementing as much as possible, here’s some light reading from W3C.

I know that being a developer and having to design stuff is difficult, it’s why we have at least 3 different roles in building digital products (sometimes more!). Your greyscale design needs to be clean, here’s a quick video on how to make designs less cluttered.

Always consider the Call to Action’s (CTA’s) on a site, this should be the driving force for why people are on the site. For Amazon it’s to buy stuff, on Facebook, it’s to check notifications (so you keep coming back to see more ads), if you’re on a landing page it’s to sign up etc. if you want to know what a CTA is on any service, it’s the button in the top right corner. Here’s a good article from Hubspot (who basically invented this stuff).

We have a greyscale starting doc we created with all of the components you need to get started, if you want a copy, just let me know. Designed Wireframes

Once your greyscale design is signed off, you’re going to want to add some real content, imagery, colours and general pretty things to it. Here’s the designed version of the greyscale I linked above.

Okay, so colours - Coolors is a fantastic tool we use to generate complementary pallets.

Images - make sure you’re using quality imagery; otherwise, it’ll make the design look naff. If we don’t have professional photography, we use Unsplash.

Icons - no need to design any of them, so many exist, but FontAwesome is excellent.

Fonts - use only recognised fonts, free fonts - Google fonts, paid fonts - Adobe Fonts, font pairing is an art, here’s a tool that can help. Always consider the correct hierarchy H1 to H6 and proper tags etc. as well as colour contrast for those with accessibility. Illustrations are a massive trend in web design at the moment, here’s a cool tool to curate pro looking vectors.

You’ll want to prototype and test the designed wireframe and use the same process as before until everyone is happy with the full design.

Building it!

I know this is your strong point so you can probably take it from here. The most useful service our designers have used is Treehouse, which has upskilled our juniors to become UX wizards.

For reference, here’s the completed site from the greyscale and designed wireframe examples I used above.

Some of our front end devs like this Twitter page too, which is techier than the above.

Testing it

W3C has a site validator that scores your live site for accessibility - worth keeping in mind.

This might be going too far, but there are tools you can use to test the UX of live sites, Hotjar and Mouseflow are the ones we use. There’s a whole ton more of refinement theories, but it’s likely overkill for what you need.

Okay, that’s about the basics of it… sorry, turned into a bit of a monster.

The most important thing to remember is that designing for the web has to be fluid, don’t make assumptions and test theories at every stage.