Learning UI/UX Design

My Story & 10 Tips On How to Get Your Foot in the Door

8 min readApr 4, 2016

I’ve been a UI & UX Designer and the lead in-house designer at a start-up for over 3 years and a question I get asked a lot is:

“How did you become a UI & UX Designer?”

Usually, it’s either those who are trying to break into the industry or from those who are simply curious about how someone with a completely unrelated degree (Economics) can land a job in design.

Though I by no means consider myself an expert, I feel as if the past 3 years have been a hands-on, crash-course, near-Masters program in UI & UX design. In sharing my story of how I got into UI and UX design, I’ll also share some tips and tricks I’ve learned, as well as some resources I’ve collected along the way.

My Story

In the summer of 2012, I was hired as a volunteer part-time intern for Seelio, a start-up based in Ann Arbor, Michigan that was working towards releasing its beta-product in August. Though I had graduated a few months back, I was unsure of my career direction and knew I wanted to do something in design. I had practiced fine art as a child and had dabbled in graphic design on the side during undergrad.

Since I was unpaid at the time, I spent that summer waitressing on the side and taking on freelance graphic design gigs. After a few weeks, I quickly realized UI & UX design was a perfect fit for me — while it still allowed me to be creative, it also challenged me to problem-solve in a structured and technically-disciplined environment. Over time, I found myself browsing through Dribbble and Smashing Magazine at night and slowly building up my skills.

Tip #1: Get really excited about what you’re doing

After the beta release of Seelio in August of 2012, I was hired as a full-time employee. A month or two later, I transitioned into the role of lead designer. Though I was lucky enough to have been given such an opportunity, it certainly wasn’t smooth sailing from there. I cringe when I think about my poor user interview tactics, my general lack of understanding of UX, and my terribly inconsistent design

Tip #2: “Make mistakes faster” — Andrew Grove, Co-Founder of Intel

Over the course of the next 3 years, I learned everything I know now from the people around me, from furiously collecting examples, from reading articles, and from constantly practicing.

Learning UX Design

For the first year and a half, Seelio was lucky enough to be incubated by Menlo Innovations, a renowned software design and development firm in Ann Arbor, Michigan. By observing and shadowing Menlo’s high-tech anthropologists®, I was quickly able to learn basic UX approaches and methodologies such as persona development, user testing, and prototyping.

Tip #3: Define a process, repeat it, and continually refine it

Though Menlo’s approach was unique and thorough, we needed a process that worked for us — a small start-up with far fewer resources. Through trial and error, we were able to define a flexible approach that could be applied to projects of different scopes.

Tip #4: Read a lot and continue to learn

As I did not have a degree in UX design, I felt insecure about my lack of professional training and built my confidence by reading endless amounts of articles on best practices and methodologies. It was certainly difficult for me to get into the mindset of a UX designer at first — I even remember repeatedly writing in my notebook “your opinion does not matter” as a reminder to myself that I was designing for the user and not for myself.

Tip #5: Practice, practice, practice

Over time, everything became easier and less awkward. User interviews and prototype testing no longer felt like hour-long sessions of teeth-pulling. I got better at asking thoughtful questions and carefully observing long silences. I learned how to collect data, draw out high-level findings, and iteratively improve my designs for further testing.

Favorite Resources

Templates: A4 Sketching Template, Paper Browser, User Persona Creator, Scenario/Taskflow/Grid Sketchsheets
Prototyping Tools: Axure, Balsamiq, Adobe CC, Sketch, JustinMind
Testing: Appear.in, Google Hangouts, Usabilia, InVision, Optimizely, Qualaroo

Learning UI Design

I came into UI design with a slight advantage as I already had some experience using Adobe’s Creative Suite. However, I possessed at best a “working-level” proficiency and lacked an understanding of basic design principles. Intent on quickly improving my design skills, I browsed through Dribbble and Behance daily and practiced designing web elements and pages in my spare time. I became more efficient by learning useful hotkeys, customizing my workspace, and saving templates I could work off of.

Tip #6: Borrow visual elements from examples you find — to an extent

In understanding UX approaches and methodologies, I began to understand that UI design was more than just “making things pretty.” I reveled in the challenge of using visual elements such as color and font to create a visual hierarchy that would enhance the usability of the interface. While at first, I would mindlessly mimic social platforms and aesthetically-pleasing elements I found online, I slowly became familiar with UI design patterns and learned to thoughtfully select elements for the user I was designing for.

Tip #7: Keep your designs consistent, scalable, and reusable

As I was constantly growing and improving with each new project and feature I designed, I found that the biggest challenge was creating designs that were consistent and scalable. Over time, I learned to create and embrace UI style guides and became more systematic with my design approach. Eventually, I developed a streamlined process by which I would create and communicate UI interfaces, specifications, and interactions to our developers.

Favorite Resources

Color Generators: Color Hexa, Flat UI Color Picker
Dummy Text Generators: Fillerati, Hiper Ipsum
Images, Patterns, Icons: Random User Generator, Subtle Patterns, Brankic 1979
Style Guide Examples: Buzzfeed’s Solid, Lonely Planet’s Style Guide, MailChimp Patterns
Inspiration: Dribbble, Behance, Pattern Tap, Sidebar.io, UI Patterns,
General: Pinterest, Photoshop Etiquette,

Learning Front-End Development

About a year and a half ago, I decided I wanted to begin learning how to code. This desire came partially from my need to have more control over the way my designs were being translated into live pages and partially from the need to fill the void of a front-end developer at my company.

Tip #8: Have something you want to create first and then bring it to life.

I started out by redesigning and building simple pages like our login, 404, and 500 pages. These were somewhat low-profile pages that I knew I couldn’t easily mess-up but provided me with small feelings of success. Slowly, I was able to build my skills and simultaneously streamlining the visual identity of our product.

Tip #9: Don’t be afraid to ask questions — be scrappy and resourceful

Though I challenged myself to learn as much on my own as possible, I also took advantage of the human resources surrounding me by shamelessly asking our developers questions. I avoided having my hand held by striking a balance between asking for help and pushing myself to research solutions on my own.

Tip #10: If you’re going to do it, try to do it well

Over time, I realized that even though a site might look beautifully built on the surface, the code could potentially be a nightmare to work with. Through painful nights of digging through my jumbled up CSS classes and changing one thing only to find that I had broken five other things, I finally understood the importance of writing CSS and HTML well. Slowly, I learned about writing modular CSS and HTML and read about front-end naming methodologies and frameworks such as BEM and SMACSS. Not only did this help me clean up my spaghetti-code, but it also helped me approach designing user interfaces in a modular and scalable way.

Sidenote: My knowledge of front-end development is still a work-in-progress as I haven’t yet mastered Javascript — I’d love to hear any suggestions on how I can continue learning and improving that skill.

Favorite Resources

Classes: CodeAcademy, Treehouse, Lynda
Frameworks: Bootstrap, UI Kit
Playgrounds: CodePen, JSFiddle

To Summarize…

My journey thus far hasn’t been easy, and had I not been given so many opportunities, I’m not sure if I would be where I am now. Though I’ve run head first into many walls and have experienced extended periods of stagnation and disinterest, I’ve managed to maintain an underlying passion by doing the following:

Use your strengths and interests as a starting point—Having had experience with graphic design, I started with UI design and branched out into UX and front-end. Focusing on one discipline at a time helped me slowly build my confidence and learn new skills in a more structured way.
Learn from peers and professionals— Follow as many design professionals as you can on Twitter and set up your Tweetdeck so you receive notifications of new articles, case studies, and design trends. Get inspired by Ted Talks, go to free design events, and attend as many webinars as possible.
Look at examples — Set aside 15–20 minutes a day to browse through Dribbble, Behance, The Best Designs, and Awwwards and save things you like on your computer or on Pinterest.
Be a tech-savvy person — Download the latest apps, keep up with new technologies, and learn how to use hotkeys on your computer. As you explore new technologies, be observant of their designs and usability and try to mimic and save interactions and elements you like.
Keep practicing — Assign yourself projects and practice in your free time. Having a specific project you want to complete will give you a goal to work towards. The more you practice and the more mistakes you make, the better you’ll get.
Don’t be afraid to ask for feedback — Get comfortable showing your work to others. Don’t be afraid to reach out to professionals in the field and ask for feedback.
Know that it’ll take time —While learning UI and UX design will not happen overnight, it is certainly achievable with time. Keep working at it and eventually you’ll be where you want to be!

Finally, if you have any questions, comments, or feedback, please feel free to leave them here!