Introduction
The objective of this exercise is to practice the Web Design Process and apply Web Design Principles.
Activity
You will work with a small group of peers to design two pages of a client’s website. You will use the Web Design Process to create this design – make sure to reference it as you go along.
You’ll want to submit a brief explanation for each of the first two steps – then you’ll turn in five art boards in your Adobe XD project. The art boards should be sized like an iPhone X. Those art boards should include:
- A style tile
- A home page wireframe
- An inside page wireframe
- A home page prototype
- An inside page prototype
Directions
- Discuss the Web Design Process with your peers on Zoom (use Slack if working outside class)
- Document your thoughts on the first three steps
- Create an art board for a home wireframe and an inside page wireframe
- Populate those wireframes with the essential user interface elements and discuss with your peers on Slack
- Create an art board for a style tile
- Populate that style tile with colors, fonts, and other styles you wish to apply in the prototype and discuss with your peers Slack
- Create an art board for a home prototype and an inside page prototype
- Populate those prototypes with content and wire them up for basic user interaction
- Get a share URL for your XD file and submit it on Sakai
Clients
You will be assigned one of these clients. Make sure to read the brief description carefully; they include some hints. Use your imagination and critical thinking skills to navigate the Web Design Process in the context of your assigned client.
Anushri | Climate Activism
A leader of a youth climate revolution organization. Her goals are to have visitors signup for updates from their organization and donate to fund their political action.
Muhammad | Rx Discount Cards
A pharmacy technician that sees patients struggle with the cost of prescription medications on a daily basis. He would like to create a website that helps patients find free discount cards that can substantially lower the cost of therapy. His goal is to make it easy to search for cards by medication name and would like the site to feature a clear explanation of how patients can use the discount card.
Maria | Food Truck
A proud owner of a food truck. She wants to create a website that shows the current menu, the location, and the wait time of the food truck. She also wants a prominent call-to-action that promote their new “order ahead” feature.
Naomi | Handbag Ecommerce
A young entrepreneur who creates stylish leather and canvas handbags. Her goals are to promote the newest additions to her online store and offer a quick checkout experience (i.e. Apple Pay and/or Google Pay).
Conclusion
After you complete this assignment, you should feel a little more familiar with the Web Design Process. You will have many chances to practice – this is your first go round so have fun! Please make sure to turn it in on Sakai.