3 Months to a UI Designer Job

This blog is the final in the Find a Tech Job in 3 months with No Prior Tech Experience series.

The specific jobs in the series are

UI Developer/Front-end Developer
Jr. UX Designer / UX Researcher
UI Designer

Many job titles will have a combination of these titles. For example, many UI Designer roles will be UI/UX Designer or UI Designer/Developer. This is a reality in tech job hunting, but you will still find job postings with title UI Designer. Also, knowing the distinct attributes of each will help you to sift through the job listings in a way that will guide you to finding the role that is right for you. In UX we talked a lot about talking to customers and user testing. If your focus is on UI, you will be more focused on graphical assets, design elements, and potentially functionality but definitely topography, colors, buttons (and other screen elements) and visual appeal. Neither is better or worse. It’s just a different focus area and you will want your portfolio to represent the work that is most highlights your skills and abilities.

Photo by Harpal Singh on Unsplash

When building the UI Designer skills (and UI Designer portfolio), the first step is to find a real life problem. I describe this process in detail in UI Developer/Front-end Developer.

This is hard. I get it. If you want the learning that ACTUALLY gets you a JOB, you need to EXPERIENCE all aspects including pitfalls and successes that naturally happen in a real-life project. Everything from networking and communicating required to obtain the project, to researching something that you didn’t know yesterday and putting it into your solution tomorrow will put you in a position to succeed in the position of UI Designer.

UI Designer

Skills: 
Topography, colors, buttons (and elements), layout, HTML/CSS (current versions HTML5, CSS3) Design software (Adobe Illustrator/Sketch as well as Adobe XD or inVision)

Outcome: 
Screens that compose the visual elements of the product. These screens include all graphical elements (skins) and sometimes include functionality or clickability (prototype).

Areas to cover in your learning and portfolio:

  1. Topography
  2. Colors
  3. Buttons, text fields and menus (screen elements)
  4. Graphical asset development
  5. Layouts & grids
  6. Skins

Where to learn

Our You are techY Facebook group provides free resources daily on this and related techy topics. I also like css-enjoy for building graphical elements and seeing how they transform into CSS. Apple and google (Material io) provide extensive resources. I link to them below aligned with the specific topic that is being addressed for quick access because Apple and Google provide SO much information it can be overwhelming!

Also, a word of caution. I know it can be tempting to think of Apple or Google as the expert (usually one or the other because people have their favorites!), but I challenge you to use them only as a reference for one possible way that UI design can be done. Using your creativity is a really important part of UI design. Consider copying some colors and graphics as you are learning (this is a valid learning strategy), but then branch out and try it your way. After all, if everyone designs the same way, the software world will get VERY boring:)

Topography

Tools & Resources: Apple — Topography, Material io — applying the type scale and — type classification

What to learn

  • How many fonts to use on one screen
  • How do your fonts tie into the feel of the product and fit consistently with the style guide
  • Serif vs. San Serif
  • Accessibility and sizing
  • Where to find and how to access fonts

Colors

Tools & Resources: Google material io — Color system, — Material palette generator, Apple — Visual Design Color & Accessibility, w3 Accessibility

What to learn

  • Color palettes
  • Accessibility
  • Hues
  • Transparency
  • Meaning

Elements: buttons, text fields and menus

Tools & Resources: HTML, CSS, css-enjoy, Apple — menus

What to learn

  • Line weights
  • Rounded edges — radius
  • States (current, hover, selected, etc.)
  • Sizing and proportions
  • What CSS translates to what physical elements
  • Aspects of elements that create a specific look and feel (e.g., round and chunky is more casual than thin and pointed)

Graphical asset development — icons and graphics

Tools & Resources: Illustrator & Sketch

What to learn

  • Creating graphic assets
  • Types of graphic formats (svg, jpg, png, etc.)
  • Where to find icons (free and paid)
  • When should I create icons vs. use available
Adobe XD

Layouts & grids

Tools: Azure, Sketch, Adobe XD or inVision

What to learn

  • Layouts, spacing, white-space, proportions
  • Mobile vs. Desktop vs. iPad
  • CSS Grid

Skins & Style guides

Tools & Resources: Azure, Sketch, Adobe XD or inVision, style guide toolbox, practical exercises for UI design

What to learn

  • Skins: Putting the graphical elements on a screen in a layout that makes sense from a visual appeal standpoint, as well from from a user interaction standpoint.
  • Style guides
  • Mobile

Happy UI’ing!

**********************
If you would like more free resources like 3 Months to a Job as a UI Designer and other tech related job searching tips, join our email list at YouaretechY.com

***********************