Published on | Prototyping: From UX to Front End — Medium Balraj Chana

How to get those pixels in motion and pursue your path to vector-y.

https://unsplash.com/photos/9LCMig_EblU

I frequently receive emails from aspiring designers on how to get started in the field of design. There are so many acronyms, abbreviations and buzz words being thrown around that it’s hard to tell where to begin. Throughout this article, I will be focusing on the more visual aspects of design. So let’s just cut to the chase and I’ll give it to you straight…

First and foremost there are no straight paths to becoming a designer.

You do not need a 4 year degree.

You are never too old to start.

You do not need to learn how to code.

Right now at this moment, you are exactly where you are supposed to be. All of the decisions that you have made in the past has led you to this specific point in time. You may be tired of your current gig, need a new fresh start or just want to prove to yourself that you can do it. You have to make sure that this is what you want as there are no shortcuts to learning design.

But what is a designer?

Before we can understand what a designer does, let us first try to understand what a designer does not do.

We do not solely exist to make things pretty.

Wo do not solely exist to move shapes around on a screen.

We do not solely exist to add icing on the cake.

We do not solely exist to ‘make logos bigger’ or ‘add drop shadows’ (although we do that every now and then).

No.

We, as designers fight for the user. Users are a diverse bunch and come from all walks of life. Therefore it makes sense for designers to represent those diverse users. So every man, woman, child and chewbacca has the potential to be one. To understand a user’s perspective in life and to have empathy is what makes us great at what we do.

We solve problems within the range of social boundaries. We craft user-centric interfaces that guides the user and intricately weave typography, iconography, colours and information into a delightful experience.

Good design is about finding a solution that satisfies the user’s needs, business goals and technical restraints.

Why you would want to be a designer

You enjoy solving challenging problems
You want to improve the lives of others
You enjoy working with other people
You have a genuine curiosity for how things work
Your courage is greater than your fear of failure
You hate having an ego and would prefer to leave it at the door

Why you would NOT want be a designer

You want to get rich quick
You want an easy and comfortable life
You prefer to work by yourself (not to be confused with remote working)
You want admiration
You give up too easily
You only enjoy designing for yourself and your ego

Results do not come instantly. What you create in the beginning won’t be your best work. In fact you are going to hate it. Even if you were a seasoned designer with over 10 years experience, getting it right the first time would be pure chance. Design is an incremental process. It takes years acquire good taste. What’s going to make you grind out those pixels in the early hours will be your curiosity and insatiable thirst for solving problems.

I’ve met people who were tired of their current 9 to 5 gig and wanted a way out of their monotonous job. But they understand that becoming a designer doesn’t just happen overnight.

Lesson #1: Just like most pursuits in life, passion, motivation and talent can only get you so far. After that it all boils down to persistence, consistency and forming good habits.

You may be a freshly minted college grad, a part-time chef or a car salesperson with 10 years of experience. If you have a laptop, a copy of Sketch, an internet connection, time and patience, then you have the potential to become a designer. Being great however, is another matter so let’s just focus on the hardest part of all…getting started.

My Journey and Why I Do What I Do

Just so you know where this advice is coming from, it may be useful to explain my background in design and how I got started. You may find it useful to learn from my mistakes.

Growing up as a kid, I was that guy who always doodled in notebooks at school. So much so that I even ended up in detention as it was frowned upon. There were no design related subjects to study at my traditional school so I ended up creating an after school ‘Cartoon Club’. The club revolved around inventing new superheros and creating comic books. To my surprise, it became a major success as lots of students ended up joining and taking part in bringing their imagination to life! It was the only creative outlet I had at that time and it paved the way for an emerging passion.

Fast forward to a few years and it wasn’t until I reached college that the fundamentals of design descended upon me. I grew up building my own computers so I was pressured into taking the safe route to study a hardware engineering course as I was told that using my imagination wasn’t a real career choice. But I still wanted to pursue design so I was relieved to learn that there was a one unit in the course that was focused on web design. This unit provided me with an insight on how design and development were fused together to create interactive sites.

Back in those days, words such as Photoshop and Illustrator were alien to me. I couldn’t afford these tools at home so I had to make use of what I had…the Microsoft Office suite! You’d be surprised to know how practical this software can be for a designer and also how your creativity can blossom given some limitations. I’m not ashamed to admit this but my first ever design was created using Microsoft Word 😱. Eventually I stumbled upon a Photoshop trial version and that’s when things changed for the better.

Lesson #2: The first website I designed was created using Microsoft Word. Please don’t use Microsoft Word for design 😐

My insatiable curiosity for design grew throughout college as I began mastering the PS keyboard shortcuts. It was an addiction. I just wanted to open a blank canvas and start creating. A blank canvas to me was a window into my imagination, an entirely new world. It made me forget that time existed. I didn’t even know what I wanted to design at first. Maybe a poster, logo, website or illustration? I don’t know, I just did it all. It wasn’t good, but I did it anyway:

Rainbow gradients ✔️

Clip art ✔️

Bevelled text ✔️

Drop shadows ✔️

Photo filters ✔️

Sometimes I would even use all of the effects in a single project. Eventually I learnt that less is more and I began to realise that the more I practiced, the more I improved.

Entering the world of design using a trial version of Photoshop appeared to be a right of passage for us designers.

Upon finishing college I managed to secure a scholarship to study hardware engineering at university. Still pursuing the safe path I thought I was destined to be designing low level bits instead of pixels.

But something did not feel right.

Due to extra pressure from university work I began to neglect my true passion. My motivation was dwindling and my grades began to suffer. The anxiety that I been living with since I can remember decided to emerge and increase tenfold. Panic attacks were a daily occurrence for me. I began to sink into depression. During that time I had no idea what the cause was. So I brushed it off to just the pains of being a millennial student.

It was a dark time for me as I failed hard that year. I lost my scholarship. It was the worst time in my life. I felt as if I had let everyone down, including myself. I knew I needed to try something else as being stuck in the rut directly affected the way I designed I wasn’t producing work that I was proud of.

Lesson #3: You need to be in the right frame of mind to produce your best work. Eat healthy, exercise and practice mindfulness on a daily basis.

Thankfully a break was close by so I had time to reflect, reenergise, reorganise and revaluate my priorities in life. I managed to slowly regain my confidence and ended up doing a 360 turnaround and decided to quit my current degree to pursue a new one in design. I knew I had to take charge of my own destiny. I then spent the next 3 years learning various aspects of design including web, interaction, motion, 3D and even programming (yes, that included Flash💥 back then!). I loved every minute of it and I ended up graduating with a 1st class Honours. But that wasn’t the end on my journey, it was just the start.

After graduating from university, I had no idea which direction I wanted to pursue…

Should I join a large organisation?

Should I join a startup?

Should I create my own startup?

Lesson #4: Make 100% sure that design is a path that you want to pursue as it will not be a straight road to the destination.

I was a generalist who was in possession of a set of transferrable skills.

So what did I do?

I accidentally became a freelancer.

My journey began after I assumed the next logical step in my career after university was to apply for jobs. So that’s exactly what I did. I spent weeks designing, redesigning, coding, procrastinating and pondering on my portfolio. For months I applied and got no offers. Like I said before, the hardest part is getting started. I thought I had to beef up my skills and gain more exposure so I signed up for Dribbble and began practicing, copying, improving, requesting feedback and then posting my polished designs. Before I knew it, I began receiving requests from clients to work on their projects. A few months passed and voila!, I was a fully fledged freelancer!

So now you know my whole life story, let’s get your journey underway…

1. Start small with just a simple decision

There are so many different fields within the design spectrum and most of them end up overlapping with each other. If you decide to become a designer, you’ll inevitably have to start learning around the subject as the field itself is relatively small. UI and UX go hand in hand so don’t be surprised when things become technical. For example, if a company uses grey as a brand colour, placing that colour on a button could make the users think that the button is disabled when it is not.

Lesson #5: UI and UX are not two entirely separate disciplines. UI is a subset of UX and they can sometimes end up synergising.

These are the kind of challenges that you will begin to face as you venture out. So before you start your journey, first make sure design is something that you really want to pursue.

https://visual.ly/community/infographic/computers/disciplines-user-experience-design

“But I enjoy visual, UX, motion and interaction design all equally!”

That’s totally fine but at this early stage, try not to be a jack of all trades as spreading yourself too thin will result in you sacrificing the quality of your work and learning potential. Of course you can experiment on the side but loosing your focus too early can result in lost momentum and wasted time. Once you’ve mastered the remaining points in this article then you will be in a much better position to branch out into other fields thanks to your newly minted transferrable skillset.

How do you know if design is the right path for you? Simple. Dip your toes into as many fields as possible whether it’s UX, interaction or motion design. When you find yourself forgetting that time ever existed, then you know you’re onto something.

If you’re a student of full-time employee, then do not, I repeat DO NOT aim to learn as much as you can whenever your have free time. You will eventually burn out. I made that mistake when I began freelancing by taking on any project that came my way. My lack of energy and decision overload led me to exhaustion and in the end you will lose because you’ll need to stop working to refuel. You will begin to hate design and even regret why you began in the first place.

Instead adopt the 1% rule. Practicing 1 hour a day will compound over time. It may take you longer but at least you won’t be sacrificing your health.

2. Practice, momentum and persistence

You can spend a lifetime reading about design and consuming thousands of listicles about best practices such as 10 commandments for good design. But reading alone is not what is going to help you become a designer. You’ll need to learn how to think on your feet, with real people who have needs, in different contexts and with unfamiliar edge cases.

I’m a fan of the Pareto principe. 80% of your time should be creating and the remaining 20% should be consuming.

I knew in advance that I would need a place of inspiration, a support group to get me through the trials and tribulations of learning about design at the start of my freelancing career. Through exploration I found Dribbble & Behance to be the major communities in the world of design. I’m not a user of Behance so I can only give my opinion on Dribbble. I preferred their niche community as it was more focused on UI design which was an area that I was interested in pursuing.

<#NotARant>Without turning this article into a debate about whether Dribbble is useful or not, just know it is 💯 percent worth it. It’s the place where the best designers from the best companies in the world go to post their work. It’s also the place where designers go to learn from others. Of course Dribbble has its haters, but who doesn’t? There are many reasons to post your work there and getting feedback from other designers is just one of them. It’s a show and tell after all so don’t worry about creating fake designs. </#NotARant>

The Start

Ok so first things first, there is no right or wrong way to begin. The first step is to start thinking like a designer. My favourite learning technique has been to first learn the bare essentials, jump into the deep end, start creating and then further learn around the problem as you go along. After all, if you were learning a new programming language, you wouldn’t master the framework first before writing a single line of code would you? No! You’d learn as you go otherwise you would be forever reading and never creating.

The Steps

Find a designer whose work you admire
Pick your favourite UI
Copy it
Change something about it
Rinse and repeat

There are no shortcuts here. It’s perfectly fine to copy as long as you do not claim their work to be your own. It’s how most designers started out, including me.

Right now, you’re learning about design techniques. That is the aim. Whilst practicing, think about the following factors below and try to decipher why the designer made certain choices.

Typography
Why are some headings larger than others?
Why are these fonts used?
Why are there multiple fonts?
What makes a font useful?
What fonts would work better?
Accessibility
Is the smallest font size large enough?
Is there enough contrast between the foreground and background colours?
How can this design be improved for people with certain eye conditions?
Will this design work in different environments?
Are the form elements web compliant?
Whitespace
Is there enough breathing room for the content?
How are the images distributed?
Is the distribution consistent?
Are there elements used to fill empty space?
Is the whitespace affecting your focus?
Composition
Is there a grid system being used?
What layout is being used? e.g. conventional, abstract
Are the elements distributed evenly and consistently?
Is the text to image ratio balanced?
Does the composition allow you to focus on the content?
Colours
Are the colours accessible?
Are the colours modern, delightful, on-brand?
How many colours are being used?
Are the colours distracting?
Does the imagery compliment the colours or clash with them?
Information Architecture
How is the information organised?
Why is information placed in a certain order?
How is the information categorised?
What is the information conveying?
What is the navigation process and context?
Textures
What kind of styles are being applied?
What are the textures trying to convey?
How many textures are being used?
What are the different states of each texture?
Are the textures realistic?
Form
What are the different interaction states?
How is the active, disabled state being conveyed?
Is the form realistic?
How many elements have a form?
Does the form improve the experience?
Shapes
How many different shapes are there?
How are the shapes contained?
How are the shapes organised?
How does the content react relative to each shape?
Are the shapes static or is there motion?

Depending on the type of project, there can be so many different processes and stages required for tackling a design problem that it can be overwhelming to decide what is the best approach. Typically for me whilst working on an app, I tend to approach different stages including:

Brainstorming sessions
Usability testing and research
Personas
User flows
Wireframes
Prototyping
Mockups
Coding
Testing

At this specific stage we are focusing solely on visual thinking for learning purposes and no user data is present. So beginning at stage 5 or above would be preferable.

If you’re not a fan of this technique, then alternatively you can try the Daily UI challenge. I haven’t tried it myself but other designers seem to have had some success with improving their design skills. You may also like to try your hand at redesigning a popular app which is fairly a common design challenge from companies such as Google and Facebook.

Lesson #6: Your work will suck at first. Don’t be discouraged as it happens to every designer, including the ones you admire. What will help you improve is persistence. There are no secrets and no shortcuts. One day you will return to your work and wonder what the hell you created 😱. That’s fine, it’s normal and it means that you are improving. Suffering is learning. Your goal should be to close the gap between your skills and expectations.

When practicing your design skills, seek inspiration from places outside of your retina screen. You can only grow so much in that chair of yours. Think outside of the box. Observe your surroundings. Change your perception of what problem solving really is. Start viewing problems as challenges instead of roadblocks. Utilise a growth mindset, not a fixed mindset. Don’t be a complainer, it doesn’t solve anything. Gain empathy by travelling to different cultures and understand their perspective and why they do what they do. Avoid perfectionism and learn to kill your ego, it will stop you from growing. Finally grab a copy of this book.

If you come from a monotonous job, you will need to train your brain to think differently. Ask yourself the following questions whenever you come across a challenge to improve your problem solving skills. Bare in mind it roughly takes a month to form a new habit so keep practicing.

What challenge did I come across today?
What were the limitations?
Who were the people involved?
What were their goals(s)?
What has already been tried?
Why did the previous solutions fail?
How could I do better?
How many different ways could I have solved this?
What resources would you need to solve this challenge?
Who would you call upon to help you?

You’re also going to have to gain knowledge in the design field so here are some design inspiration sites to get you started.

3. Acquire good taste and develop intuition

The 10,000 hour rule is just a myth. If you’ve consistently practiced for long enough, you’ll eventually reach a point where you won’t hate your work so much. In fact you will begin to like it. Your hard work will start to pay off. Who would have thought eh? Now it’s time to take off those training wheels and begin developing your taste.

What exactly is taste?

Every designer goes through the same process of sucking at the beginning and then eventually improving through raw practice. Your taste is what gives you the room for improvement. Taste is somewhat subjective. It essentially defines what is good design and what is not based on social trends. It is the bridge between what you can physically create and the mental model that you hold in your head before you put pen to paper.

Why is taste so important?

Creative expression is essential for every designer. Its what makes you stand out above all others. The market is so competitive that you have products that offer services for $5 a pop. Of course this may appear quite demeaning to our industry. But what you must realise is that they are filling a need for clients who can not afford high quality services. You ultimately have to differentiate yourself somehow.

As a freelancer, I’m lucky enough to be given the responsibility to sculpt the design of a product based on my taste. Clients approach me with trust and ask me to design their product using my skills. The client has a vision for how they want their product to look and feel. How they want to come across to their audience. It’s one of the highlights of being a freelancer. However if I was working in an organisation, then my taste will follow the company’s guidelines.

Is design just as important as UX? Yes.

Does form follow function? No, not all the time.

You may have heard this popular phrase meaning that the functionality of the product outweighs its appearance. If that was true, then why do analogue clocks still exist? Sure it’s harder to read the time but still it is much more aesthetically pleasing. Expectations from users are constantly increasing thanks to higher quality interfaces and better designed products. So many apps are becoming very similar to each other that in the near future, design may be the only differentiator between the best from the rest. After all, don’t all users deserve to be delighted? Realise that form is function and doing something different can help you reach emotional functionality with your users.

But how do I acquire good taste?

It’s not just limited to designers, anyone can learn how to acquire good taste. Your experiences in life along with your culture, expertise, confidence, outlook, empathy and social circles will help shape your taste. Practice everyday and never neglect the small details. You’ll know when you have good taste when you consistently create work that you’re either proud of and/or praised for. It’s a social construct and it will not happen overnight. Be prepared as it will most likely take years because good design takes time.

<a href="https://medium.com/media/7155d6d91479a85d7557473b8a1699d1/href">https://medium.com/media/7155d6d91479a85d7557473b8a1699d1/href</a>

Your intuition

You develop your intuition through experience. If you’ve been designing for long enough you’ll begin to gain a certain knack for filtering out the most common edge cases and predicting design patterns.

But of course do not rely solely on your intuition as it not 100% foolproof. This is why designing with data is the preferred method for companies working with real users. If you can predict design patterns just by observing an interface, then you can observe user patterns in a data set.

4. Build a network, find a mentor & get constructive feedback

If there‘s one thing that I’ve learnt from my 5+ years working as a designer, it’s that the craft is just a part of what makes you a designer. Your communication skills will be extremely valuable as design is about collaborating with others and sharing ideas, standing up for your own ideas, giving and taking feedback and teaching those less informed about the best practices. Aim to surround yourself with people who you’d like to emulate. I know it’s much easier said then done but your confidence will be critical for this step. Grow your design network by attending local meetups. Participate in design communities (e.g. Dribbble or Slack) and have conversations around the decisions that went into a piece of work that you recently came across.

If it’s too difficult to build a network in the offline world, then aim to befriend designers online whose work you admire. For example, find an app you enjoy using and reach out to the designer(s) and inquire about their past work. Tell them your story, ask them about their decisions and why they do what they do. Be genuinely curious and ask for help when you need it. You’d be surprised how many will respond. If you need help and it’s hard to come by, ask to trade your skills for their feedback. Their expertise will contribute to your growth. Everyone is so engrained in their own work so nobody is going to come to you at this stage. It’s all on you.

Once you’ve built a network, then finding a mentor will be simple, but not easy. The right mentor can accelerate your growth by 10x so choose carefully. This is where you begin to develop a thick skin by consistently being torn down and bombarded with the ‘why’ questions including…

“Why did you choose these colours?”

“Why did you choose this font?”

“Why did you decide to rely on your own instincts rather than the data?”

“Why do all hipsters have beards?”

Do make a note that these conversations are paramount for your growth. You’ll need these conversations to develop your critical thinking skills. Standing up for your decisions and having design critiques will also help to bring you point across more clearly, make you appear more professional, help sell your ideas and prepare you for for future opportunities such as job interviews or pitches. Just remember to leave your ego at the door and take the feedback constructively.

5. Levelling up your skills

If you’ve reached this stage and have practiced for long enough, then you should now have everything you need to cover the foundations of design. Now, you may be facing a conundrum about whether to progress through the traditional or alternative path and begin earning those stripes in the real world.

Do you want to spend more time preparing your portfolio and start applying for junior design positions?

Do you just want to splurge your cash and jump into a design bootcamp?

Do you want to take a bigger risk and jump into the gig economy?

Which path do you think will give you the best learning opportunities? Each have their own benefits and drawbacks and it’s a tricky one to answer. But like most well thought out answers, it depends on your circumstances. I’ve met designers who’ve succeeded in both but the traditional approach tends to be the most popular. But does the most popular path mean that it is the best path for you?

Generally speaking, the traditional path will allow you to be taken under the wing of a more experienced designer within a team. You’ll learn first hand from industry folks about real world challenges. You get to make a direct impact. Plus you’ll earn as you learn. The downside is that it may take longer and you’ll most likely be given less responsibilities as your experience is limited. Plus there’s also a possibility that the work will get stale.

Following the bootcamp path however, consists of a very intense course where you’ll learn the industry fundamentals. Previously you’ve been learning by getting your hands dirty in the messy creative process. Now you have more structure, are able to catch up with the latest trends, learn from experts and prepare for the real world. You have to be careful here as some boot camps only prepare you for junior positions so you could end up taking a step back. Also teamwork, being a fundamental component to growing as a designer, may be limited.

Freelancing is also another option. You can set your own pace by working on whatever you want, when you want and with who you want…sort of. Newcomers to the gig economy assume that you can become your own boss. But that is just a myth, your clients are your bosses. You’ll have a lot of responsibility as project requests as well as money can be sporadic. On the bright side however, this can be managed with discipline. Your income potential will be determined by your time as you are essentially proving a service.

TLDR;

A design bootcamp would be ideal if you feel that your skills are not up to scratch and you have a hard time receiving offers for junior positions or freelance gigs. Always check what previous students ending up doing after they’ve finished.

Joining an agency as a junior would be better if you need a quick ROI and want to learn and receive direct mentorship from a more experienced team.

Being a freelancer would be ideal if you are confident in your skills and you prefer to determine what projects you work on and with who. Bare in mind the ROI can take a while as you will have to gain credibility and build a strong portfolio.

I hope this article has helped clarify the different paths available to you in the fascinating and ever evolving world of design. If you’ve enjoyed this article and feel that you’ve learnt something of value, then please give it a 👏🏼 so that others can learn from it too. If you would like to connect, you can find me posting my thoughts on Twitter and my work on Dribbble. Thank you for reading!

Useful Links and Reading Material

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Your Journey to Becoming a Designer was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Your Journey to Becoming a Designer

Cool stuff, every week

More Articles