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
  • Accessibility

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

  • Animations
    • ​Resouces
      • https://css-tricks.com/video-screencasts/97-intro-to-css-animations/
  • ​Navigation
    • ​Again... it should be Intuitive

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 week 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:
      • Define definition of done
        • “As a [persona], I [want to], [so that].”
      • Prioritize
      • Estimate
      • Minimum Viable Product or Optional
      • Resources
        • https://www.atlassian.com/agile/project-management/user-stories
    • Stories are NOT tasks, they are definition of a feature
      • You should task out each story, that become development "chunks"

Create

...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

Other options besides Trello

  • Gitlab.com

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
  • Audit with Lighthouse
    • ​https://developers.google.com/web/tools/lighthouse/#devtools

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

  • Design your Web Application
    • ​Select fonts, images, color scheme, navigation, animation
  • Define your Time line
  • Create your Kanban board
    • ​Create Stories
    • Create Tasks
    • Make Estimates
  • Start Development

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