Mastering UI Design: Practical steps to elevate your visual craft
Unpack the essentials of UI design through create tasks and theory, with free resources tailored for both budding and seasoned designers.
UI Design seems like UX's little brother at this rate. Our industry is so focused on the UX role, with its fancy frameworks and double-diamond, sprint, and flavour-of-the-week methods, that UI often doesn't get a look in. This is particularly true when it comes to improving design skills to secure that first or new role.
In the last month, I've been asked multiple times on LinkedIn, Substack, and through mentoring sessions how new product designers can enhance their UI skills. So, let's dive straight into how you can actually improve your visual design skills.
🧑🏻🎨 UI is an art form, so why not copy it?
Just like artists spend hours in museums sketching masterpieces to hone their craft, improving UI skills can also be a journey of emulation and discovery. It's not just about replicating what you see; it's about diving into the 'why' and 'how' of design decisions.
Have you ever looked at a website, app, or software and thought:
Why this font?
Why these colours?
What's the reasoning behind the layout?
Why this illustration style?
If not, then you might be missing a trick to build the foundation of your learning process. When replicating a design, ask yourself these critical questions. Understand the choice of fonts, the colour scheme, the logic behind the spacing. Is there a pattern or grid being followed?
📋 Design Task
Take an app that you like, any UI that you think is brilliant, and go through the steps of recreating it in your favourite design program. This means figuring out the font they're using, the size, spacing, colours, curves, gradients - the lot.
All the while, interrogate what you see. Just the act of practicing to see how closely you can match the real design will push you to make design choices and decisions. This is flexing the muscle that will eventually become as natural as breathing for an experienced designer.
The benefit of this is that you're focusing solely on visual decisions, not getting bogged down in content, app ideas, or anything else you'd face starting with a blank canvas.
It may be obvious, but it's worth stating: this work is just for practice, not to be shared as your own creative genius.
🧠 Knowledge is power
Hands-on practice is great, but adding some theoretical knowledge is super helpful.
Perhaps I'm biased, but studying as a Graphic Designer a decade ago has been an absolute blessing in my transition to Product Design. We learned about grids, typography, colour, hierarchy of information, and the meaning that can come from visual identities.
Colour theory, typography, and grids are mostly universal across print and digital. So understanding these at a core level will really set you up for success when expanding your visual skills, especially when paired with the imitation task.
📋 Design Tasks
Spend time learning colour theory and create your own colour palette to rebrand an existing app that you like.
Learn about typography and create an app wireframe from scratch, ensuring the type looks well-aligned, spaced, and sized at an optimal scale.
Practice responsive design: take a screenshot of a desktop website and recreate it at a mobile size, using a mobile grid to guide your responsive design.
📁 Additional resources
The internet is a treasure trove of free resources – articles, YouTube tutorials – that can give you a solid foundation. Check out the following, find your favourite learning style, and jump right in.
🎥 Videos
📚 Books
Adham Dannaway Blog (Not a book, but loads of great stuff on there!)
🧑🏫 Free Courses
User Interface Design Specialisation
I hope this helps. Please let me know if you found this useful or if you have any other questions. And before I go, here is this week's top jobs I found that I wanted to share with you.
🤑 Jobs
11:FS: Senior Product Designer
11:FS is on a mission to change the fabric of financial services. Building digital strategies and loveable products
FINH: Digital UI/UX Designer
This is a unique opportunity for a digital UX/UI designer with an active interest (or experience) in fintech and crypto to join a team of builders designing and collaborating with a client that is pushing the boundaries of what is possible in the industry.
Loctax: Freelance visual designer, Motion designer and Video editor
Make Loctax product marketing and brand shine like the ones that Loctax really admire Notion, Descript, Linear, Equals, TheyDo - Journey Management and many more.
💌 Did you enjoy this post? Share some love!
I'd be over the moon if you could help spread the word about this newsletter. Feel free to share this with anyone who might find it helpful or interesting – they can subscribe to get their own little slice of newsletter magic!
Got questions or just fancy a natter? I'm all ears! Drop me an email at liz@skyburgerstudio.co.uk or ping me a message on LinkedIn. Would love hearing from you!
👋 Before you go, say hello!
Please give this newsletter a like ❤️ or a comment 💬 if you found it valuable, interesting or useful in anyway. This small gesture can really help this article reach new audiences and helps me learn what posts resonant!
Omg thank you for this! I wish I could like it 100 times!! You are truly doing God's work!!