The ‘UI and UX Design’ Pocket Guide (Volume One) 📘

11 Valuable Hints & Tips for Designers from a…erm…Designer!


Yes. I’m doing all the work, whilst that lady in the background is playing Fortnite. Or am I playing Fortnite too? Mysterious!
“While the boss is away, Fortnite I shall play… again!”

Volume One of the UI & UX Design Pocket Guide is a little ‘Hmm, I could take away some little nuggets of valuable information here’ type of article thang.

If you’re just starting out in this big, daunting, but equally enjoyable world of Product Design, there’s a lot to learn, and a lot of information to digest, so pull up a chair/couch/beanbag/hammock and enjoy this handily collated bunch of tips and advice.

Enjoy the pocket guide, and the ride!


1. Why Creativity is more important than the Design Tool 🛠

“From the Darkside, to the light… and relax. Just don’t mention The Last Jedi.”

In a recent article I read, they touched upon tools for Wireframing, Prototyping, and those tried and trusted UI Design tools that we eat, sleep and breathe (you know the ones). Oh boy, there’s quite a few to choose from, and they cook up all sorts of debates in #DesignTwitter and beyond!

Now, I won’t be touching on the Wireframing and Prototyping tools portion of the article I mentioned, but concentrate on the UI Design tools that are mentioned briefly in the article, and why you need to just choose the one that suits you and roll with it. There’s no magic tool to suit all types of designers, and you need to remember that, however many times you may be bashed over the head with advocates of a certain design tool.

Photoshop is what many designers turn still turn to, and what many, should we say, time-served designers still use on a regular basis, even with the introduction of Adobe XD in recent-ish times. And this can be for all manner of reasons. Something like Sketch not being available to Windows users for a start. The unity between applications inside of the Adobe Creative Suite. Stronger design tools for working with text and imagery. The list goes on.

The same goes for users of Sketch for example. They may have been looking for something more suited to UI Design today, an ability to move more swiftly through a project, or they just hate Adobes walled garden. Who knows. But like I’ve always said the skills maketh the designer, not the tools.

Every single one of the design tools available to us, either desktop or cloud based, is just that, a tool. If a designer has the will and determination to be the very best they can be, then they will become that with whatever tool they decide to go with. Certain tools may place restrictions on how far you can push your creativity, but they’ll never completely stifle it.

Great, no amazing, work can be produced in any design tool that you decide to go with if you’re willing to push yourself as far as you can go creatively.


2. Why Design Principles need to come before Trends 🎨

“The boss said piece together Proxima Nova Black before lunch?!?”

Design trends will come and go, this has, and always will be the case. They’re impossible to ignore, and the influence of them will rub off on you in some way, that’s an inescapable fact.

What is disheartening is to see designers who create a whole portfolio based entirely on trends, and don’t allow their own style and influence to permeate throughout their work. For a young designer this is understandable to a point, they will be more prone to following the crowd, following a trend as they learn, and find their way in the industry, but they need to have more confidence to say ‘This is my style, this is what I do, I feel comfortable with this’. And have the right kind of mindset from an earlier stage that is more in favour of their own style than just following trends religiously.

What plays a big part in not shaping young designers into having an understanding of basic design principles is the way the physical classroom teaches them. I took Graphic Design back in college (you wanted to learn something related to the fledgling web, you took a course on how to deal with Cisco systems, or if you were lucky, how to find you way around Dreamweaver), and this taught me a heck of a lot about basic design principles, and it was something that stayed with me and I’ve taken through to working with digital in a more modern form.

What is offered now seems to have such a great chasm between mediums. You can take a 3/4 year Graphic Design course but does it prepare you for working as a Product Designer in the future? You take a Web Design course but you’re taught the tools, and not the basics of design principles, hence why so many designers get sucked into a cycle of just following trends, and not nailing down the basic principles of design, and this needs to change.


3. Want to get more s**t done? Try Time Blocking ⏳

“Mr. Sandman, bring me a dream. Make him the cutest that I’ve ever seen.”

Ok. You may be thinking ‘This is not really a UI/UX kinda article is it?’. Well, yeah it really is. What you read here is applicable to so many industries, including the one that us folks work in, and I can vouch for it being a turning point for me in the way I approached the design project at hand, personal or professional.

There’s something that I use on a day-to-day basis and one that helps me get the most important stuff done, in a smaller time-frame, and not just being busy for busy sake.

Time-Blocking. That’s what you need to be doing. I came across this a few years back in a great book called ‘The One Thing’ by Gary Keller (and no, I’m not an Affiliate of any kind). I always assumed that just being busy I was actually getting things done. If I cram in 12 hour days I’m in some way getting all the important stuff that needed to be done, done. That wasn’t the case. When I looked back and I noted what I had actually done in that time-frame, I saw that at least a third, if not half of it had been taken up by unwelcome distractions (you know the sort). So my assumption of ‘Well if I’m working 12 hours a day I must be getting more work done than the guy who works 6 hours a day’ was completely false, and I was fooling myself.

Going back to the Time-Blocking method that I mentioned before, I like to get the most important work that I need to do in a day, done first thing (the morning period), let’s say from 9am till 1pm. That’s when the majority of us are at our peak before the creative fatigue starts to kick in in the afternoon, and our focus fuel light starts to flash red.

Avoid those distractions as much as humanly possible for this time period, and yes that means that sneaky quick refresh of your Twitter feed. Just focus completely on the important task at hand for that day, in that time period you’ve set aside, and I assure you you will get more s**t done, the really important s**t done.


4. Be a better Designer by not comparing yourself 👭

“And the argument all started with me saying a cracked copy of Sketch was not good for team moral.”

It’s so true, that we as designers are guilty, on occasion of looking at the guy/girl next to us, and thinking their work is the greatest thing that’s ever graced a users screen, and that our work is in some way inferior to theirs.

Stop doubting your abilities, and the work that you create. Keep doing what you’re doing, your own way, your own style.

There are hundreds, no thousands of people out there that think the stuff you’re creating is awesome. Don’t compare to the next person, or think less of your work.

Be a better Designer by not comparing yourself.


5. Don’t ever devalue yourself as a Designer 💵

“Heard any good tips lately? Erm nope.”

Working as a Freelancer for many years, I’ve lost count of how many times I’ve worked for a pittance on a project that’s comes across my radar.

As a younger designer I had my fair share of projects that either were grossly underpaid, but you needed to take the gig to keep the bank balance topped up, or partnerships that I could play a part in and then share the riches later on when it started to make money, if ever.

I did them, and then some. Many projects that promised the earth and riches beyond my wildest dreams came calling, and pretty much came to nothing, and not through my want of trying. I would deliver the design assets, but eventually the project would run dry, and never see the light of day. I would put it down to experience and naivety rolled into one. When you’re a young designer starting out, or even with a few years of experience under your belt, you can still find yourself getting sucked into these kinds of ‘collaborations’ that 90% of the time come to nothing.

As I gained more experience, a began to put a strict check list into place, and boxes had to be ticked to fill the criteria of do I commit to this, or not?

If someone is looking for a genuine partnership, and respects your work, then they have to be willing to pay for your time, and effort, simple as that. Unfortunately this kind of practice of promising untold riches later down the line after you’ve given your skills and time for free is as commonplace today as it was 10 years or so ago. Tread carefully and don’t cheapen yourself or the industry we work in, however colourful those Unicorns and Rainbows might look.


6. Aspiring Designer, are you ready for this very long journey? 🚵

‘So he said walk up here and look for the green door? He’s sent me the wrong way the joker.’

Anyone can become a designer, but not everyone wants to be one. You’ve got to have a true passion for it, each and everyday, and strive to be the very best that you can be. No shortcuts.

This goes back to a previous article of mine. About not looking at the guy/girl sat next to you and thinking you work is in any way inferior to theirs. Yes, it may not have the required polish, the correct understanding of what makes truly great design, but don’t think for a second that it’s not good enough, and if you have the insight to know what makes good, and not so good work, then you’re catching on fast, and you just need to improve on the other parts, and that will come.

Don’t be discouraged on your journey, learn, improve, know where you want to head towards in your career and take all the steps necessary to get there. Be that digesting countless articles, inspired by fellow designers work, or being part of a design community.

Be open to criticism though. ‘Everyone’s a critic’ as the saying goes, and it’s a mere keyboard press away to let their thoughts be heard on work that you’re showcasing.

I see young designers unable to take any form of criticism, and if you’re that kind of person you need to loosen up, pronto! There’ll always be troll-tastic folks that have nothing constructive to say. Ignore those, they’re just projecting their insecurities on you. But for constructive criticism take that on board and learn from it, it will help you improve, and grow stronger on your journey.


7. How to make up or break up with a difficult client 💔

“All I asked for was the Buy Now button to be in an elegant, unreadable Script font. Ggggrrrrrr!”

Over many years of dealing with clients, from large brands, to Poodles Pooch Parlour (not a real company name) down the street, I’ve had my fair share of run-ins with what I would describe as difficult clients.

As I gained more experience, I began to treat my initial client meetings with the attention they deserved. This made me reflect on my earliest client run-ins, and I came to realise that it was not always fair to label that client as a ‘difficult one’. It sometimes takes ‘Two to Tango’.

If I had taken the time to listen more, gain more insight into what their company was really about, what they were about as a person, that friction between us wouldn’t have manifested itself later down the line.

That’s not to say that you can listen intently, take an abundance of detailed notes, really dig deep into what they want, for them not to still turn out to be a pain in the ass. But for someone starting out and hoping to avoid friction/misunderstanding/fractured relations, later down the line, most of that can be avoided by just listening, like really listening to your clients wants and needs, and guiding them correctly from the very beginning.


8. Should Designers at least understand how code works? 🙈🙉🙊

“Jeff said he wanted this puzzle completed before the presentation. We’ve been here 3 hours now!”

Should designers code? Oh this debate will be here till the end of time, and I’m not getting into that particular argument, but instead sharing my thoughts on why it can be beneficial to at least understand how code works.

From personal experience I feel having a knowledge of code has been extremely beneficial to building great relationships with engineers on a project when the time has arisen, and even for those times when I’ve been working alone.

Along the way I picked up enough coding knowledge to be dangerous, and this helped me when working solely on a project, and not farming out the development. It would make me pause for thought, and think along the lines of ‘If I go ahead and design this a certain way, is it just going to be a complete nightmare when I try to code it up?’.

I think if you go back a few years in the long history of the Web (a whiff of sarcasm there, yes), and the roles we played back then, if you freelanced for a time you would be more inclined to have popped a coding feather into your cap. If all you’d ever known was working in-house, then you would have probably stuck with the defined role that you were hired for.

Touching on my main point. I’m not saying that you need to lock yourself into a darkened room illuminated only by candle for the next 6 months and learn at least half a dozen coding languages before the door gets unlocked, but I feel it pays to just have some semblance of knowledge of the coding aspect when working on a project, and working with engineers. Be that from reading a couple of articles, checking out documentation, having a little tinker on Codeacademy, or just building a really great relationship with your engineer right from the start, and asking plenty of questions before you commit to certain aesthetic choices. Oh and ask even more questions, just for good measure.

If you have some knowledge of code, however limited that may be, it really does make for a much happier, and streamlined process between yourself and the developer/engineer. Much more beneficial to all parties involved, and better than just saying “I’ll design it, and they can figure out how to make it work. I didn’t sign up for this s**t”.

As a UI Designer working in a team, or not, having an understanding of how code works is not always a must but it’s a damn good thing to have at your disposal.


9. Your reputation as a Freelancer is everything 😇

“It’s just a jump to the left. And then a step to the riggghhhtttt.”

Freelancing is hard, really hard. There we go. That was a short article. Nothing more to see here. Please move along.

No, to give a more detailed overview, it’s one of the hardest roles to be in, but also so rewarding too. I worked as a Freelancer for many years, and I’ve had my fair old share of ups and downs

It’s like anything, it takes time to hone, and time to build a proper understanding on how to play the game as a freelancer.

I’ve been guilty of neglecting clients when I was first starting out on my freelancing journey. Not having a great dialogue open, not understanding completely what the client felt and what they required, just thinking of the pay-check at the end of it, and wondering why the relationship soured over the course of the project. Thankfully with experience, and a new found maturity, I began to ask the right questions, and build better relationships and products for my clients.

Word of mouth, especially as a freelancer, is so important. You don’t always have the resources to have your name up in lights and your career can rise or fall on the word of mouth of a past client.

Of course, as you learn more you will be able to say no to clients you’re not getting a vibe for, so you can refuse to take on that project. Try not to do it just to grab the pay-check or you’re setting yourself up for a fall. A bad website or app, a disgruntled client, and a dent in your reputation is not a good mix, and something that every Freelancer needs to avoid at every opportunity. A great reputation is a key element of a freelancers brand and should never be neglected.

Do your homework. Find the right type of clients. Keep them involved. Go above and beyond what they might expect. Don’t take things too personal. Set your boundaries and let them know that, and you can build a great relationship and product for them.


10. Why Prototyping is so important to your process 📱

"Ok. Let's put this shit together, and bring it to life."
“Crafts, a-ah, saviour of the universe.”

There’s a lot of talk at the moment on why Designers, and teams, should be adding Prototyping to their design & development process, and why it’s more important than ever. And I agree with this, and the article below, in that it’s not just yourself, but the whole team that’s onboard and understands the importance of having Prototyping in the whole process.

I’ve been saying for a long time myself, that Prototyping isn’t just a useful asset to help your team problem solve, but a core one for your team when it comes to pitching your idea to a client or investor. Comps created in Sketch, Photoshop or whatever happens to be your design tool of choice, just don’t cut it now when it’s being presented to the types of people I’ve just mentioned.

You need those folks on board, 100%, and showing them a static mockup/comp just isn’t good enough anymore. They need to be in the shoes of the end-user, to be interactive with the product you’re creating, without that they have an idea of what you’re hoping to create, but without something more tangible, they will make assumptions (mostly of the ‘not so positive’ variety) as they’re only seeing half a product.

When, and where you bring Prototyping into the process is completely at your discretion, but one method I’ve found works great in the past goes a little something like this… Wireframing > Low Fidelity Prototype > Hi-Fidelity Comp/Mockup > Hi-Fidelity Prototype.

If you haven’t already, bring Prototyping into your life. You know it makes sense!


11. Why bringing a Design System into your life can improve your Workflow 100x

“Post-It Notes are still a thing right?”

Design Systems/Starter Kits are shall we say…erm… quite a hot topic, have been for quite some time now and for very good reason.

I’d been very impressed by some of the Sketch Design Systems that I initially came across. Jon and Christian at UXPowerTools and Dmitry Bunin at Frames had done an amazing job at bringing such systems to the attention of Sketch users in particular.

Inspired by these Systems, I was truly amazed at the time-saving something like a system could bring into my daily workflow. They have increased the speed of my workflow massively, and it’s nuts I didn’t bring one into my workflow at an earlier stage, and avoid a process similar to the following…

  • Open Sketch
  • Stare at a blank screen
  • Grab some icons from someplace
  • Go through the rigorous process of creating Symbol after Symbol
  • Set up some Layer Styles, and then a few more, and then some more
  • Then actually make a damn start on the project!
  • Look at the clock and go “Oh where did all that time go?”

Now there are folks out there who shout loud & proud “But you have to change 4 Symbol Overrides just to style a button. I’m just not cool with that”, and I’m inclined to agree with them……….. to a point.

When you first start working with a new System in Sketch you may find yourself (in the first couple of run-throughs) slightly hindered, because it is a different way of approaching a project inside of Sketch, and something a little different than you’ve maybe become accustomed to, but you’ll soon find yourself working on auto-pilot, moving swiftly through a project, and it will seem like second nature to you.


Thanks for reading the article,

Marc

Designer, Author, Father and Lover of Libraries (Zen-like Chill)

When I’m not writing informative articles like this one, I’m working on my own Design System for Sketch called Cabana which you can check out below…

🎁 Want to greatly improve your design workflow in Sketch? Grab a copy of the Cabana Design System here.

Use the offer code MEDIUM25 to receive 25% OFF.

Like what you read? Give Marc Andrew a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.