Basic UX/UI Design...

and Kanban Board Creation

Basic web design and creating a Kanban board with stories & tasks

Design

...your Web Application

User Experience (UX)

Keep it INTUITIVE
- Navigation should be obvious
Make it consistent
- Follow the "standard" for interactions a.k.a clicking a hamburger icon () should open the navigation and arrows (,) should open drawers.
- Keep interactions the same across the application
Allow users to make errors by handling errors gracefully a.k.a form validation

Resources

https://usabilla.com/blog/fundamental-concepts-ux/
https://careerfoundry.com/en/blog/ux-design/5-key-principles-for-new-ux-designers/
https://www.mockplus.com/blog/post/interaction-design-principles

Design

...your Web Application

User Interface (UI)

Responsive Design or Mobile First
- Rearrange (stack) elements on narrow screen
- Hide and/or show different elements based on screen size
- Adjust font sizes
- Resources
  - https://darwindigital.com/mobile-first-versus-responsive-web-design/
  - https://www.smashingmagazine.com/2017/02/mobile-first-is-just-not-good-enough-meet-journey-driven-design/

Design

...your Web Application

User Interface (UI)

Fonts & Icons
- Find alternate fonts for logos & headers
- Use icons where appropriate
- Resources
  - https://fonts.google.com/
  - https://material.io/tools/icons
  - https://fontawesome.com/
Images
- Need to be your originals, Creative Commons or Public Domain
- Resources
  - https://www.pexels.com/
  - https://unsplash.com/creative-commons-images

Design

...your Web Application

User Interface (UI)

Color & Contrast
- Pick a color palette
- Keep accessibility in mind
  - Visually impaired & colorblind
- Resources
  - https://coolors.co
  - http://paletton.com
  - https://www.colorspire.com
Navigation
- Again... it should be Intuitive
Animations (Only if times allows at the end)
- Resouces
  - https://css-tricks.com/video-screencasts/97-intro-to-css-animations/

Define

...your Timeline

How much time do you have to complete your project?

Estimate the amount of time on a daily/weekly basis
- Approximately 2 hours/day, 5 days/week for 4 weeks = 40 hours
This number is used to estimate completion of the project on time.
Plan to complete your project including testing the days before demo day so you can fine tune & polish the leeway, plus it gives you some padding on your estimates.

Create

...your Kanban Board

Trello.com

Create an account on trello.com
Create a board
- Name the board something meaningful regarding your project
Share your board with teachers and mentors
Create swim lanes
- Back log
  - Brainstorm and story writing
- Ready for development
  - Story writing completed, full details and acceptance criteria
- In Progress/Development
  - Stories currently being worked (should be limited to 1 or 2)
- Completed

Create

...your Stories

Create stories
- Steps:
  - Title
    - A brief summary of changes
  - Define definition of done
    - “As a [persona], I [want to], [so that].”
  - Prioritize
  - Estimate
  - Minimum Viable Product or Optional

Stories are NOT tasks, they are definition of a feature
- You should task out each story, that become development "chunks"

Resources to create

...your Stories

Atlassian tutorial
- https://www.atlassian.com/agile/project-management/user-stories
How To Write User Stories by Robert Smith
- Part 1: https://www.youtube.com/watch?v=eYZ8vBXL1kk
- Part 2: https://www.youtube.com/watch?v=_iodOh-QTww
Example of thought process for a simple task such as create a PBJ Sandwich
- https://youtu.be/5X58UgQpGyQ

Task out

...your Stories

Create tasks
- Steps
  - Define tasks required to fulfill the definition of done
  - Prioritize
  - Estimate/Time Box
    - Keep in mind your total time line estimate. Plan to finish a week early.
    - For new tasks, multiply estimate by 1.5 or 2
    - Time boxing, determine the max time to spend on an optional feature
      - Once that time is met, stop work on it and reevaluate
      - Resource
        
        https://www.agilealliance.org/glossary/timebox

Example Story

Develop

...your Web Application

The FUN part, and why you are here.

Update your kanban board as you start and complete stories and tasks.
You and others should be able to gauge your completeness by the board status.

Test

...your Web Application

What should be testing?

Make sure it behaves correctly.
Make sure it looks correct.

How should you test?

Test as stories are completed
Test on many devices and resolutions
Test in multiple web browsers
- Chrome, Safari, Microsoft Edge, if suicidal Internet Explorer
Have others test
- You should observe them testing and listen to their feedback
- Have teacher, mentors, peers, friend (smart & dumb), your kids, your parents

Test, test and more testing

Update

...Documentation

Document the entire process of design, development and testing.

Reference your decisions when questions arise.
The documentation will be included in your portfolio, so make it look nice.

Required to complete your homework!

Homework

Document your decisions
- Select fonts, icons, images, color scheme
Define your Time line
Create your Kanban board
- Create Stories
  - Create task list for story
  - Estimate effort (in hours)
Start Development

Due next week, share the link to the Kanban board with all details in stories and tasks