“Don't make me think.”
Computers run code, developers maintain it, and humans use it. This module focuses on the humans who use it and the developers who maintain it.
You will learn about Design Thinking and User Empathy by designing a home page for one of your classmates that they will develop. The main objective is to understand your classmate and help them to build the home page they need.
Along the way you will explore the world of Open Source Software by selecting a CSS Framework from GitHub, contributing to your classmates home pages, and making a contribution to your CSS Framework's repository.
- Learning Objectives
- Suggested Study
- Breakdown
- Class Recordings
- study.hackyourfuture.be
- home.hackyourfuture.be
What you should be learning in this module.
expand/collapse
- You can interview another student to learn their motivations, needs, and blocks
- You can use paper to sketch a design and test it with a user
- You can describe the design cycle and apply it to building a home page for others
- You can write user journeys for websites that you visit
- You can use figma to collaboratively plan a website design
- You will be able to describe the design cycle and what steps you will take in each state (Empathize, define, ideate, prototype, testing and implement).
- You will be able to decide when quantitative data is necessary or when qualitative data is necessary, and how to collect both types of data.
- You will be able to conduct some user research to understand user needs, motivations and pain points. Such as user Interview and a user survey.
- You will understand how to interpret quantitative and qualitative data.
- You will be able to use the user research data gathered to define the problem that you need to solve and write a hypothesis on a potential solution.
- You will use rapid prototyping techniques (such as paper prototyping) to test initial design hypotheses and receive user feedback.
- You will use your research findings and initial rapid prototyping to map the user journeys for your websites
- You will learn some of the key design principles, such as alignment, proximity, contrast, balance and space
- You can use Figma to collaboratively plan a website design
- You will learn the basics of using a component library (Atomic design system ?)
- You will be able to understand how to make a website design more accessible.
- You will learn what Open Source Software is and why it is important
- You will be able to make a contribution to an Open Source project following their Guidelines and Code of Conduct
- You will be able to evaluate similar Open Source libraries to decide which is best for your project
- You will know how to select an Open Source license for your project
Links to help you through the assignments
expand/collapse
You don't need to learn all of this, it's a lot of links.
These links will always be here for you when you need them in the future.
Empathy for Developers
Design Thinking
- Design Thinking Process: Sprouts,Stanford
- Empathize
- Define
- Ideate
- Prototype
- Test
- invisionapp
- Creative Confidence (TED)
- First Step: Noticing (TED)
- Design Thinking (TED)
- Collaboration & Innovation (TED)
- Visualize It (TED)
- interaction-design.org
- dschool.stanford.edu
- The Wallet Challenge
- The Coffee Filter Challenge
- Process Guides:
Design Thinking for Developers
General
- designnotes (huge repository of sites with design resources, inspiration…)
- designinspiration
- Learn Design with Me
User experience (UX)
- uxchecklist.github.io - Complete list of methods and techniques used in UX design
- Jacob Nielsen’s Heuristics
- Short videos on YouTube about UX, UI, explaining all concepts of the design field.
- The (condensed) basics of UX and UI design
- Usability.gov
- UXBooth
- UXMovement
- UXCollective
- InsideDesign by InVision
- A List Apart
- UX Planet
- https://spotify.design/stories/process
- https://uxmag.com/
- https://www.nngroup.com/
Gestalt
- https://www.canva.com/learn/gestalt-theory/
- www.87seconds.com - lesson-from-our-designers-gestalt-principles
- interaction-design.org
- nngroup.com UI Principles
- Conceptual Integrity: safnet, CSEWeb, DZone, deep read
Colour
Iconography
Typography and Fonts
- https://fontjoy.com/
- https://fonts.google.com/
- https://www.grillitype.com/free_trials
- https://www.fontsquirrel.com/
- https://www.supremo.co.uk/typeterms/
- https://velvetyne.fr/
- https://www.fonts.ninja/ - Try and discover fonts
- https://betterwebtype.com/web-typography-resources/ - Everything you need to know about web typography
- https://typographyhandbook.com/
- https://www.fontshop.com/glossary - All the terms of typography
- https://typespiration.com/ - Collection and inspiration of typography combinations
Accessibility
- https://hackyourfuture.github.io/study/#/html-css/accessibility
- https://www.w3.org/WAI/WCAG21/quickref/
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://webaim.org/
- https://www.microsoft.com/design/inclusive/
- https://accessibility-for-teams.com/
- https://www.a11yproject.com/
- https://www.nngroup.com/articles/keyboard-accessibility/
- https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
- https://wave.webaim.org/ - Browser plugin
- https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce?hl=en - Chrome extension
- https://developers.google.com/web/tools/lighthouse - Chrome dev tool
- https://www.deque.com/axe/ - Chrome extension
Imagery and Photography
Illustration
Design inspiration
- https://www.awwwards.com/
- https://httpster.net/2020/aug/
- http://mindsparklemag.com/
- https://medium.muz.li/
- https://dribbble.com/
- https://www.behance.net/
- https://www.invisionapp.com/talks - Talks and interviews about UX and Design.
Free Courses
- Hack Design Free design lessons by designers.
- Design Lab Design course with mentorship and projects.
Figma
Web based tool for interface design, collaborative, add plugins from community (free, up to 2 editors and 3 projects)
Video explanation of Figma features on their official YouTube channel.
UI Kits
More Softwares
- Adobe XD: Interface design and prototyping tool, shared docs, 2GB cloud storage (free, up to 2 editors and 1 shared document)
- Sketch: Interface design / UX and prototyping tool, collaborative (paid, 30 days trial)
- MindMeister: Flowcharts and mind maps (free, up to 3 maps)
- Draw.io: Flowcharts (paid, 30 days trial)
Books
- Don't Make Me Think, by Steve Krug [Suggested study]
- The User Experience Team of One: A Research and Design Survival Guide, by Leah Buley
- Information Architecture for the World Wide Web, by Louis Rosenfeld and Peter Morville
- Universal Principles of Design, by William Lidwell, Kritina Holden, and Jill Butler
- Information Architecture for the World Wide Web, by Louis Rosenfeld and Peter Morville
- Atomic Design, by Brad Frost
- Design Systems by Alla Kholmatova
- HTML&CSS design and build websites - Jon Duckett (Free PDF) (Official website)
- Free Online book on Design Engineering
What is Open Source Software?
- Mozilla
- Brian Daigle codes of conduct and github walk-through: https://www.youtube.com/watch?v=c6b6B9oN4Vg
- Explained with Legos
- And with recipes
- Open Source vs. Closed Source
- Free/Libre vs. Open Source (think "free speech", not "free food")
To learn more about all things Open, check out the Open Knowledge Foundation and Open Knowledge Belgium.
Open Source Licenses
The license attached to an Open Source project is not just a detail! Check out these links to learn more about the many licenses available:
Codes of Conduct
The Code of Conduct in an Open Source project describes how contributors should treat each other. Open Source projects are about sharing and welcoming:
Contributor Guidelines
Contributor Guidelines are important to standardize coding practices and workflows for an Open Source project. You could think of it as describing how the code should be treated:
How to Contribute
- opensource.guide
- freecodecamp
- contribution-guide.org
- redhat
- better-programming
- Small contributions matter!
and finally ...
Open Source Libraries
Open Source Libraries are code other people wrote that you can use in your project.
The libraries you will be exploring in this module are CSS Frameworks. These are libraries of CSS classes that you can use in your websites to design and develop more efficiently. You don't need to write the CSS, just use it!
- How to choose a library for your project:
Now it's your turn. Look through these CSS Framework and pick the best one to use for your home page:
- Practice User Interviews and the Design Thinking Process.
- Take your first steps into the world of Open Source Software.
expand/collapse
- Design is future - a film that includes main insights about the key role of design while explaining how it helps professionals, businesses and society to be more innovative and sustainable
- User Experience from one of the world leaders of UX Jared Spool. Covers many topics in this hour video interview
- empathyprompts.net
- Design Thinking Process
- ~10 minutes, all together: Ice breaker! Write a story as a class one sentence a time
- Assign numbers to each person, starting with n°1.
- Share an issue with the story prompt
- One at a time, add your sentences
- ~15 minutes, all together: What is design? Why is it important?
- ~60 minutes, small groups: Draw Toast
- ~20 minutes, all together: each group shares how to make toast
- ~20 minutes, all together: User Interviews! Discuss the why's and how's of discovering your user's needs
- ~50 minutes, small groups: Prepare for this module's project
- Watch this video and discuss the Design Thinking Process
- Read through the ./homework-briefs/interview.md you will use to design each others' Home Pages.
- ~20 minutes, all together:
- each group shares what they discussed
- answer questions about the projects
- generate pairs for the project using your class randomizer
individual project, 2 weeks
You've come full circle, time to rebuild that home page you started in the Precourse. There will be 3 components to the 2-week project in UX/UI Design:
- Designing: Practice User Interviews and Design Thinking by working in pairs to come up with your Home Page backlogs, wireframes and READMEs.
- You will each create a repository and fork each other's repositories. (do not add each other as collaborators!)
- Push your interview notes to the
/planning
folder in your fork of their Home Page and send them a PR - Help each other turn the interview notes into a Backlog and a complete Wireframe. then you're on your own!
- Developing: Practice solo development by turning your backlog into your new Home Page. Learn about open source libraries by choosing and using a CSS Framework in your project.
- Complete your Development Strategy
- Set up your Project Board & Issues
- Develop!
- Retrospect
- Contributing: Practice contributing to Open Source projects. A contribution can be as simple as fixing a spelling mistake, adding a translation, or participating in an issue's discussion. It's best to make small contributions you are sure will be helpful:
- Contribute to your classmates' Home Pages. They will not give you access to their repo, so you will need to use a Fork and comment in issues/PRs as an outside collaborator.
- Make a contribution to your CSS Framework's repository. This doesn't need to be anything fancy, whatever you are comfortable with!
## My Home Page
- [repo]()
- with your partner:
- [ ] README
- on your own:
- [ ] License
- [ ] Contributor Guidelines
- [ ] Code of Conduct
- [ ] [live demo](https://username.github.io)
- [/planning]()
- with your project partner:
- [ ] interview (your completed interview template)
- [ ] backlog (developed with your partner based on the interview)
- [ ] wireframe (design your site's outline together)
- on your own:
- [ ] schedule (like communication plan, but for yourself)
- [ ] constraints (include the CSS framework you chose and why)
- [ ] development strategy
- [ ] retrospective
- [ ] [project board]()
## My Contributions
- Home Pages:
- [ ] [classmate's name](link_to_your_contribution)
- [ ] [classmate's name](link_to_your_contribution)
- [ ] [classmate's name](link_to_your_contribution)
- ... why stop at 3?
- CSS Framework Name:
- [ ] [describe contribution](link_to_your_contribution)
- ... why stop at 1?
Learn to use Figma for planning your websites.
expand/collapse
- Create a Figma account: www.figma.com You need a verified Education Figma account before joining the course! Create a Figma account with your email address Add your email address on your Slack class channel, we will collect it and invite you to the HYF Education account. Open the email sent from Figma to verify your Figma Education account. Login into Figma before the course starts.
- Watch the following tutorials:
individual, figma practice
- Use this Figma Starter File
- Include a link to your Figma file in your
check-in
issue (no need to put it on the project board)
-
Students: Here you can find recordings of this module from past classes. Enjoy!
-
Coaches: When sending your PR's with links please ...
- Indicate which class you were teaching
- Which week it was (if the module is more than 1 week)
- Give your name
- and a helpful description