{"id":12672,"date":"2016-02-24T20:02:14","date_gmt":"2016-02-25T04:02:14","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=12672"},"modified":"2020-10-13T01:01:51","modified_gmt":"2020-10-13T08:01:51","slug":"10-practitioner-tips-for-junior-ui-designers","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/10-practitioner-tips-for-junior-ui-designers\/","title":{"rendered":"10 Practitioner Tips for Junior UI Designers"},"content":{"rendered":"

User interface design is a highly demanded science today, and for good reason. <\/span><\/p>\n

With computing power and business ambition skyrocketing, the digital landscape is rife with too many features, and overly complex applications begging to be simplified by empathetic, thoughtful, and creative technologists. <\/span><\/p>\n

Over the years, I\u2019ve come to realize that the most beautiful user interface solution is not necessarily the one with the most likes on <\/span>Dribbble<\/span><\/a>, but the one that\u2019s most user intuitive, provides the right amount of choice, and frankly knows when to get the heck out of the way.<\/span><\/p>\n

Here is a list of tried and true concepts I\u2019ve practiced in successful UI projects over the years. <\/span><\/p>\n

1. Draw on the wall with a 3-up exercise<\/span><\/h2>\n

Here\u2019s a <\/span>great UX exercise to watch<\/span><\/a> from the <\/span>Skool Network<\/span><\/a> video series titled, \u201cWhat is UX Design?\u201d. Watch the thought process involved in a real-life UX design kickoff for a one-pager sales website design.<\/span><\/p>\n

The gist: <\/b>Hang three large pieces of poster paper on the wall, side by side. Grab some colored sharpies and post-it notes. This exercise works best if your client is present.<\/span><\/p>\n

Use poster #1 to list critical notes about your primary target user. Give your \u2018user persona\u2019 a name & age, and list out all their needs and challenges that you can think of. Next, brainstorm and discuss business methods and design concepts to meet those user\u2019s particular needs. Circle tasks and messaging ideas you find most important. Try completing an <\/span>empathy map<\/span><\/a> to immerse into the behavioral and social perspective of your users.<\/span><\/p>\n

On the second paper, repeat this process for another target user persona. <\/span><\/p>\n

You\u2019ll soon surface many of the most critical concepts, tasks and touch points to highlight in your design project.<\/span><\/p>\n

On the third paper, start sketching a possible page template design informed by the most important user tasks you\u2019ve decided to focus on. No need to create beauty at this point, but focus on the prioritization (stacking order) of content, messaging and basic UI needed to give the users you’ve just studied something meaningful and well-organized. <\/span><\/p>\n

\"image00\"<\/p>\n

This design exercise also works for designing homepages, landing pages, and other critical screens and user flows. It\u2019s a great method sketching designs with your user notes accessible in the same glance.<\/span><\/p>\n

2. Don\u2019t just record meetings, bring a note-taker.<\/span><\/h2>\n

Having a dedicated note-taker with you during design meetings allows you to truly listen, think clearly and facilitate effectively. <\/span><\/p>\n

Your note taker can silently document all discussion points, takeaways, follow-ups, and dependencies that would otherwise tax your ability to stay focused.<\/span><\/p>\n

Consider incorporating Brad Frost\u2019s <\/span>Project Hub<\/span><\/a> for documenting your project notes and deliverables from start to finish.<\/span><\/p>\n

3. Document your design thinking.<\/span><\/h2>\n

To improve your ability at articulating design micro-decisions, approach each project like a mini case study.<\/span><\/p>\n

Throughout your design process, dedicate a few minutes after every mockup to capturing some simple notes on why and how you arrived at that final design (even if the design is subject to change based on forthcoming analytics). <\/span><\/p>\n

4. Design on paper.<\/span><\/h2>\n

Using paper & pencil to sketch out UI ideas is fast, and offers a refreshing tactile experience for you quite different than your usual keyboard, mouse, or stylus. <\/span><\/p>\n

This unconstrained method of visual thinking might open up new creative doorways to you and make your process feel less robotic too. Try collecting and analyzing a volume of paper sketches (even from non-designers around you) before jumping straight into your wireframe software. Be aware of more concepts and ideas before you rely on pure intuition and personal taste.<\/span><\/p>\n

\"image03\"<\/p>\n

Photo credit: <\/span><\/i>Box UK<\/span><\/i><\/a><\/p>\n

Here\u2019s a free printable <\/span>paper sketch template<\/span><\/a> to capture 6 ideas and supportive notes. <\/span>Todd Zaki Warfel\u2019s Prototyping<\/span><\/a> book and the free <\/span>Guide to Prototyping<\/span><\/a> also offers great exercises for collecting UI ideas in bulk and narrowing down the strongest ideas.<\/span><\/p>\n

5. Design mobile-first.<\/span><\/h2>\n

Designing on a mobile canvas size forces you to understand what you are designing\u2013the content and it\u2019s purpose, priority and messaging. There\u2019s no room (literally) for getting lost in extravagant desktop layout ideas & complex hover effects that many of your users may not appreciate or see.<\/span><\/p>\n

\"image01\"<\/p>\n

Programs like <\/span>Sketch<\/span><\/a> and <\/span>UXPin<\/span><\/a> allow you to quickly extend and sanity-check your <\/span>mobile first layouts and design ideas on tablet and desktop canvases simultaneously. Ping-ponging between multiple canvas sizes will strengthen the responsive design ideas and tease out the edge case screen sizes that threaten your layout choices. Think deeply before you simply \u2018hide\u2019 a particular UI element on mobile because you can\u2019t think of a quick way to display it within the allotted space.<\/span><\/p>\n<\/section>

Grab design ebooks created by best designers<\/h3>

All for free<\/p>