UI/UX to Front End

What to expect?

Prae Songprasit | @praesongprasit

It's a well-trodden path

Especially for non-STEM backgrounds

Tools of trade

Browsing/references

Design porn of choice

Dribble

dribble.com screenshot

FED porn of choice

CodePen

codepen.io screenshot

Latest Design trends

UX Collective (medium)

UX collective on Medium

Latest FED trends

CSS Tricks

css-tricks.com screenshot

Shared knowledge

Smashing Magazine

smashingmagazine.com screenshot

Upon seeing a design

Things that keep me
awake at night

1. Poor HTML markup

When the front-end dev is on vacation, by CommitStrip http://www.commitstrip.com/en/2014/12/12/when-the-front-end-dev-is-on-vacation/

2. Specificity

Nothing is more important than the cascade, by CommitStrip http://www.commitstrip.com/en/2015/02/26/nothing-is-more-important-than-the-cascade/

2. Specificity

  • Bottom trumps top
  • Specificity points 
    
// Type selector = 1 point
h1 :before

// Class selector = 10 points
.class :hover

// ID selector = 100 points
#h1

// Inline style = 1000 points
<h1 style="color: red;">
  • !important trumps [style]

See W3C for more info

3. Responsiveness

To float...

CSS-Tricks exampe of float layout

Media object by CSS-Tricks

3. Responsiveness

Or not to float... and suffer the consequence

CSS-Tricks exampe of flex layout

Media object by CSS-Tricks

4. Browser support

CanIUse is your new best friend

Div that looks different in every browser, by Martijn Cuppens https://codepen.io/MartijnCuppens/pen/MXojmw

5. Accessibility

Watch out for that colour contrast... And your markup

color.review screenshot

The job market

Reality is grimmer than it seems

Rosy prospects...?

Seek for UI/UX design jobs

Rosy prospects...?

Seek for Front End Devloper jobs

The Great Divide article

by Chris Colyier

Screenshot of the Great Divide article on CSS Tricks

The Great Divide article

by Chris Colyier

Part of the Great Divide article on CSS Tricks

Watch out for those full-stack roles

Who should you be door knocking?

What kind of workplaces would suit your career?

Start up

  • Resource poor, can become full-stack front end!
  • Rapid growth accross all parts of web development

Well established design/digital agencies

  • Small multidisciplinary team
  • Work closely with designers
  • Variety of projects
  • Tight deadlines = less sustainable front end practices
  • Learn to work & problem solve fast

Product companies

  • Single/narrow disciplinary team
  • Little contact with designers
  • Design systems will horn UI front end craft
  • Large focus on long term code sustainability
  • Standardised DevOps practices

Weapons from design days

  • Ability to communicate in visual and technical language
  • Amazing eye for design detail, and how it flows on the web
  • Your design empathy for the users

Get more ammunition

Arm yourself better as a UI Front End Dev

  • Deep dive into pure HTML and CSS
  • Know your vanilla JavaScript
  • Play around with a JavaScript framework (React, Angular, or Vue)
  • Learn Git(Hub)
  • Read up and make Accessibility a part of your mantra/code
  • Never forget that great UX is largely in your capable hands

What if it's not for you after all?

You'll become a better, more aware designer

PSD vs CSS, by CommitStrip http://www.commitstrip.com/en/2016/05/04/not-everyone-is-made-for-front-end-design/

What's there to lose?

Go venture on that well-trodden path to Front End Development

Thanks!

Questions? Panicking still?

Tweet me @praesongprasit