/FEWDD-milestones

Mastery learning resources for UX Developer bootcamp

Building a foundation in the methods used in front-end web design and development with UI/UX.

Welcome. During the next two months you will be introduced to UI/UX techniques and ideas used in Front-End development. You will use these skills and knowledge to build front-end projects with an emphasis on the user.

At the end of this journey, you will be expected to demonstrate front-end development skills based on user feedback. An online portfolio is required and will include case studies demonstrating user inclusion as well as a comprehensive capstone that incorporates user feedback goals.

  • Your Portfolio itself
  • Front-End Capstone and Case Study - challenge statement, persona, user testing, and conclusion/summary of findings.
  • Journal - React, Firebase, CSS Library, challenge statement, persona, user testing, wireframes, mockups, and conclusion/summary.
  • Cohort Website and Case Study - challenge statement, persona, wireframes, mockups, user testing/feedback, conclusion.
  • Project - applied technology and user goals.
  • Backend Capstone and Case Study - challenge statement, research/competitive analyst, persona, wireframes, mockups, user testing/feedback, conclusion.

New Technologies

  1. CSS Tools (SASS, Bootstrap, CSS Grid)
  2. Firebase
  3. Prototype Tool (Figma or your choice)

Getting Started

  1. Read Don't Make Me Think, Steve Krug
  2. Start a resources document Example
  3. Resources Collection
  4. Google Drive Folder - Create a folder for SHARING files with your fellow students. You will work on team projects and will need to share files. Send the location to the instructor.
  5. Dribbble - start with a regular account, get an invite. Share with class and follow each other.
  6. Behance - Create an account. Showcase your work and find inspiration. Share with class and follow each other.
  7. Medium - signup with UI/UX options
  8. Twitter - Follow some folks. https://www.interaction-design.org/literature/article/20-people-in-ux-that-you-have-to-follow-on-twitter
  9. DailyUI - sign-up

Tools

  1. 📓 Notebook
  2. 🖊️ Sharpies
  3. 📝 Post-its
  4. 📇 Index cards
  5. 🔨 Mockup/Prototype Tool (choose one)
  6. 🖼️ Image Editing Software (choose one)

All of the digital tools have great tutorials provided by the maker. Take time to learn your tool.

Week 1 - The Mindset

What is Design Intro

Watch/Read

Team Work Conventions

Frame the Challenge

DO

Personas

Watch/Read

DO

  • Persona Worksheet
  • Persona: Create a primary and secondary persona for the Cohort Website
  • Persona: Create a primary and secondary persona for your front-end capstone.

Interviews/Research

  • Develop questionaire for Cohort Website Users

Frontend Details

Practice

  • Prototype Tool - Create a mockup/prototype of your front-end capstone.
  • Prototype Tool - Create a Persona for the front-end Nutshell project
  • Prototype Tool - Choose a DailyUI and mockup the design. OR Study other solutions
  • Look Alike
  • Fonts - Get to Know Fonts Using Google Fonts. Decide on three sets of pairings you can declare as your 'Go To' font options. For each pairing, choose a headline and body font. Display each on an HTML page. Be prepared to share and defend your choices.

Week 2 - Hands On

Visual Design Basics

Practice

  • Competitive Analysist: Review and compare other cohort websites or group displays

  • Prototype tool: mockup cohort website (4 hours then user test)

  • User Testing

  • Create tickets for features, functionality, components of cohort website.

Week 3 - Cohort Website / 🦃 Thanksgiving

Lab

Week 4

  • Monday: Cohort website lab, review Bootstrap grid
  • Tuesday: Cohort website lab
  • Mobile Friendly: Responsive vs Adaptive
  • Designing above the fold
  • Website Revision Mockup
  • User Testing
  • Cohort website lab

Journal Revisit

  • Firebase accounts
  • Package.json
  • Fetch calls, CRUD

Week 5

Information Architecture

Watch

Folks to Follow

Additional References

Practice

Teams: Using the project Bangazon, create a content inventory and site map. BZ Prototype API

Critique and Heuristics

Prototyping

  • Teams: Using the site map and inventory, create wireframes for one section.
  • Review and Critique
  • Re-iterate

Interviews/Research

  • Develop a series of questions for the Bangazon Employee

Design Systems

Journal Re-Visit

  • Firebase sort and filter calls
  • Promise.all
  • Firebase authentication

Week 6

HOLIDAY Season

Week 7

🚧 Group Project - Nashville Open Data

  • Create Proposal
  • Present Proposal

Week 8

🚧 Final touches on Cohort Website and Personal Sites

Week 9

Week 10, 11, 12 - Capstones!!

🎓 Graduation

Additional Resources