We are a bit behind because of the snow day, so lots to catch up on! Lots and lots to do!

In Class Exercise

Download this .zip file.

This is a basic web package. The root folder includes a file called index. Open it in Atom, then drag and drop it to Chrome.

Design Process

Today we will be discussing web design process, focusing on the current state of web design and how things are being made today. Today’s Lecture PDF: Web Design Process

Further Links/Resources on the Web Design Process
This is Responsive: Patterns and Resources A Designer’s Introduction to “Agile” Methodology Design Sprint Model The Design Sprint Design Better With Rapid Prototyping

In Class Design Assignment: UX Research, Proto-Personas and

This exercise is meant to help you practice the principles of UX and responsive web design.

The Setup
You have been approached by District Taco to help them design a new website.

You will be:

  • Conducting a very brief/quick brand audit from the site (current logo, colors, fonts, etc)
  • Flesh out three proto-personas
  • Design at least 3 style tiles based on your understanding/knowledge of the customers and the client’s needs.
  • Design a rough wireframe of how the current site would translate to a one page website. Design with mobile-first in mind.

From the Owner

Established in 2009 I was born and raised in Yucatan Mexico, when I moved to the US. My first job was in a kitchen of a restaurant in Denver, CO. I got tired of only eating the American food the restaurant served. I started to cook my mom's food to eat instead. That's when my Yucatan culinary skills began. After 9 years, my wife and I moved to VA to start a new life. I found a good construction job that paid well, unfortunate I got laid off. I spent a lot of time looking for another construction job and wasn't having any luck. My wife was pregnant and was getting depressed because of the lack of work and income. But I was getting support of friends. Every weekend we would get together and I would cook for them. They always told me that my food was delicious and said I should open a restaurant. I mentioned to my neighbor how my other friends were suggesting I open a restaurant. He offered to open the business with me including investing. That's how District Taco was born.

“What I would like to see in a redesign:”
I want to further showcase the vibrant story of the company. The current design does not reflect our true character. To get a better idea of who we are, check out the inside of our restaurant. Take a look at the original art in the building, the colorful furniture and our colorful customers.

Proto-Personas
Proto personas are a way to get designers and clients on the same page in the first phase of a design project. For this exercise I want you to flesh out the rest of these proto-personas based on user surveys.

Mike
Mike
Age: 42
Lawyer on Capitol Hill
Hobbies: Skydiving, hiking, family

Awesome food in one of the best parts of Washington, D.C! Prices are cheap which make this place a go-to lunch destination for many working professionals. If you do intend on eating here for lunch during the workweek, be sure to order in advance online. Place gets packed quickly and stays that way through the entire afternoon. Despite the crowds, also a great place to see all walks of life in Washington, DC.


Roland

Roland
Age: 22
Bartender at a trendy bar
Hobbies: Live music, traveling

Overall, it's not that great. I'm from LA/SD and have eaten at so many great Mexican restaurants. I was hoping that this place would be at least decent, but I was left disappointed. I wouldn't say that it was horrible...at least it was edible. I guess my search for good Mexican food in DC continues.


Catherine
Catherine
Age: 27
Executive Director at a non-profit
Hobbies: Family, arts and crafts

I don't think anything can top Chipotle's place as my favorite burrito joint, but DT has some cool options, a fresh salsa bar, and is definitely worth a visit (if not just to see what all the fuss is about). I came on a Tuesday evening and got a veggie burrito ($7). I probably should have gotten the fish as others suggested since the veggie seemed a little bland - I ended up making a few trips to the salsa bar to get more flavor. I would stick to non-burrito options next time so I won't as inclined to compare it to Chipotle.

Quick example of how simple you can make these for our purposes
mike

Understanding the problem with restaurant website design
Written by the perspective of customers, gives a good break down of what a regular person expects in a very specific type of website. Use your personal frustration with most restaurant websites and

Why are restaurant websites so horrifically bad?
Why Are So Many Bar and Restaurant Websites So Terrible?

Finish as much as you can in class and ask questions. You will have to have the proto-personas, style tiles and a wireframe complete by next class.

Resources:
Personas: Putting the Focus Back on the User
Using Proto-Personas for Executive Alignment
How to Make Proto-Personas and Get Everyone on the Same Page
Reducing costs with Proto-Personas

Watch: Faster Design Decisions with Style Tiles by Samantha Warren – An Event Apart Video
Style Tiles and How They Work
Style Tiles: “No, It’s Not The Home Page”
Style Tiles
Our New Responsive Design Deliverable: The Style Prototype

To be completed by Monday, February 1

  • Proto-persona profiles (see above)
  • Style Tiles (see above)
  • Site wireframe (see above)
  • Development Exercise (see below)
  • Review Chapters 3-8 of Duckett.
  • Read Intro and Chapters 1-4 of Krug
  • Watch Don’t Fear the Internet Episodes 7-8

Development Exercise Due on Monday, February 1

The goal of this exercise is to have you set up your domain/website for projects in this class, also to get you further familiar with HTML and the Atom coding interface.You will learn to properly construct an HTML document, insert text and image links and format basic text attributes.

Set Up Your Website
I imagine there will be some questions here, so this exercise needs to be started in class.

  1. Buy a domain. This can be done several ways. Let’s talk about it in class. (if you already have one, follow the next steps)
  2. Set up your host. I’m familiar with Bluehost. It is very cheap and should suffice for this class.
  3. Set up a subdomain for this class. Titled “learning”Instructions
    4 Connect via FTP. https://my.bluehost.com/cgi/help/264
  4. Find your subdomain folder titled “learning”
  5. Create a folder called exercises
  6. Create a folder called ex3
  7. Put all of the files for this exercise in that folder.

I’m fairly positive I’m missing some steps here. Let’s figure it out in class.

Exercise
Make a copy of the in class exercise as a base for this project (ie folder structure, file placement)

Go to food.com find recipe with photos and a significant number of steps (at least 4). Copying information from the original page, use your knowledge of tags to create an HTML page that includes (at least) the title, total time to prepare, photo, ingredients list, directions, and nutrition facts. You may include other content from the recipe if you’d like.

Use proper HTML tags to sensibly format all parts of the recipe — headlines<h1>,<h2>,<h3>, etc, lists, etc. This includes:

  • Ingredients should be an unordered (bulleted) list.
  • Directions should be an ordered (numbered) list.
  • The title should link (<a href=”...”>) to the original recipe page on food.com.
  • The nutrition facts must be in a table.

Upload to a folder called “ex3” on your site. The URL should function everywhere at www.learning.yourdomain.com/exercises/ex3/
Once your link works, post it in Slack in #exercises