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/
-
Resouces
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
- Back log
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
- Title
- Steps:
- 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
- Steps
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)
-
Create Stories
- Start Development
Due next week, share the link to the Kanban board with all details in stories and tasks