We recently hired a new web designer: Jenny, who came to us straight out of design school, eager to enter the real-world of ”work”. To help get her started, our senior designer created a list full of things to learn and get up to speed with.
First Things First
Read through the Custom D Usability Guidelines
- Learn to make a good coffee – I'll guide you through the first one.
- Get acquainted with the core tools: Sketch, Tower, 1Password, Sequel Pro, Toggl, Dash, iTerm, Google Drive and your code editor of choice – everyone is particular about their code editor.
- Run through of communicating with Slack: how we use it for interacting with clients, and internal projects.
- Ensure a copy of the previous designer's files are kept accessible – always handy when a client from way-back when needs a change.
- Get good headphones (I recommend Sennheiser HD 598 for comfortability; alternatively Audio Technica ATH-M50’s has greatest sound quality for price point — buy them off amazon cheap when there are deals)
- Load up Spotify (we give you a free premium account). I personally recommend these playlists: Majestic Casual, Proximity, Chilled Cow (youtube), MrSuicideSheep (all chill / trending songs)
- Try Evernote and Wunderlist for note taking and todo lists.
- Documentation & Resources — we'll go over where you can find our internal resources
- Workstation & Laptop - licenses, software updates, and other responsibilities
Good for Inspiration
- Sketch (Sketch Together)
- CSS Almanac (collection of CSS selectors + properties)
- Semantic UI
- Pinterest (search ‘*anything* ui design’)
- Uplabs.com (design inspiration)
- Material Design Guidelines
- Behance.net (filter : UI/UX)
- Gridcalculator.dk (I will explain creating a perfect grid system in sketch)
- Nicely done (site inspiration)
- Sketch Plugins
- Web Typography CSS
- Web Typography grids
- Feedly.com (start subscribing to really useful design blog RSS feeds)
- UxPlanet (greatest source for trending UX blog articles)
Some of these tools might help you get a better feel for the design space and inspire you.
- Sketch Together (incredible youtube channel for teaching Sketch and app prototyping)
- CSS Almanac
- Semantic UI (terminology of elements with depictions of functionality and markup)
- Material Design Guidelines
If you're not familiar with them yet, no worries—but it would be good to start as soon as you can! They will really help improve your workflow. These are what I can recommend :
- Install sketchrunner.com/ (plugins manager / installer)
- Stark (colour contrast comparison for accessibility)
- Content Generator
- Dynamic Button 3.5
- Icon Font
- Rename It
- Sketch Flex Layout
- Sketch Measure
- User Flows
- Magic Mirror 2
(I don't necessarily take full advantage of all of these plugins, but there's usually a time and place. Recommend getting into them).
- SCSS in general, more advanced the better
- Susy Grid Documentation
- Code Igniter
- Text editor (Sublime or Atom — try Atom!)
- MYSQL (basic understanding)
- Terminal Commands
- Git + Gitlab
- Animate.css / Greensock
- Grunt (task runner)
- Bower (package manager)
- Webflow (maybe give it a trial run for fun? I’m interested in its potential)
- BEM Syntax
- Sitetent (ways for grouping scss components, could be something we take inspiration from)
- Get inspired by codrops
- Have a look for useful plugins in Atom for front-end developers / designers
I recommend refreshing yourself on some of these languages & concepts to at least give you some insight and understanding of anything you're not familiar with — though I think you're already well prepared in this area.