Interaction Design I
Fall 2024
SUL 205, MR 3:25 - 6:15
Professor Kyla Paolucci
paolucck@stjohns.edu
SJH B20-8
Office Hours MR 10am-12pm
Parts Unknown
“If I’m an advocate for anything, it’s to move. As far as you can, as much as you can. Across the ocean, or simply across the river. The extent to which you can walk in someone else’s shoes or at least eat their food, it’s a plus for everybody. Open your mind, get up off the couch, move.”
— Anthony Bourdain
Even though we all come from different places, one thing that connects us is food. It’s how we learn about other cultures and experience something new. In this project, you’ll explore how food brings people together and how design can help support that. You’ll be designing a website for a restaurant to help them reach more people and build community.
The website will be the first place customers go to check out the restaurant, so it needs to look great, work well, and tell their story.
Topics Covered
- HTML & CSS basics
- How to design for a specific audience
- Building relationships with clients
- Wireframing and planning user journeys
Your Client: Pick a color.
Instructions
- Research
Start by doing research on your restaurant’s background and its target audience. What’s the restaurant’s story? Who are they trying to reach? Use this research to develop a design plan that reflects the restaurant’s identity while making it interesting enough for their audience.
- Ideate
Develop profiles for three different types of people who would visit this restaurant. What are their interests? Why would they come to this restaurant? How do they interact with websites? These personas will help you design the site with different users in mind.
- Plan
Use your personas to create a site map (how the pages are organized) that works for all of them. Will each type of person navigate the site differently? How can you show that in the design? Collect the text that will be on the site (like the restaurant’s story, menu, location, hours, etc.) and then build wireframes (blueprints) of the site in Figma. Focus on structure first, not the style.
- Collect
Now, it’s time to design the restaurant’s look and feel. Make a moodboard that shows the vibe you want to create using images, fonts, and colors. Research other restaurant branding projects to get inspired, then choose your typeface, color palette, and create a brand kit that you’ll use in your designs.
- Synthesize
Start applying your brand kit to your wireframes. Use Figma to design the final pages with all the branding and content. Keep in mind what you’ve learned about basic HTML layouts to organize everything properly. Show off a high-fidelity prototype of the site.
- Produce
Based on in-class CSS workshops that will be given throughout this project timeline, code this project from scratch Sublime Text and publish on your Github repository.
Timeline and Milestones
October 10
Project handout. Brainstorm & Discussion
October 16
Source examples of restaurant websites that your target audience might frequent. List three and explain why they appeal to the target audience. Present this as designed slides.
October 17
Update your slides with three audience personas. Present them by answering the questions provided in the assignment.
October 21
Present site map, website text, and low-fidelity wireframes
October 24
Revision of your low-fidelty wireframes presented as a prototype
October 28
Moodboard and three logo options
October 31
Present brand kit, Figma Library, and begin high-fidelity wireframes
November 4
Present prototype of high-fidelity wireframes
November 7
Write HTML pages. Draft CSS stylesheet
November 14
Present site in progress on Github. Troubleshoot and list needed improvement
November 18
Final due
Grading Criteria
- Fulfilled each milestone with new progress each time
(milestones total 20% of project grade) - Experience/interaction design is engaging
- Storytelling is clear and client is supported
- Visual design is well-considered
- Site map is clear, accurately planned and labeled, legible
- Wireframes define design decisions