Web Design_ Planning stages 1

Good design comes from decisions that designers make in order to have a certain effect on their potential customers viewing the websites. Therefore, It is important to understand the fundamentals of design in order to be able to create well designed websites. Planning Your Website

There are 8 Stages of Planning a website - – Defining goals & strategy, Research, Information Architecture, Sketching, Wireframe Mockups Prototype UX (user experience)

Imagine the following scenario – There is a gentleman, called, Tad Imagine the following scenario – There is a gentleman, called, Tad. He has been a T-shirt designer since he was a teenager. He is not a digital native but he is a business mind and knows well that selling from his shop only, puts him at a disadvantage. He begins researching for a good web design company and finds Zeb designs. Stages explained

Tad, the T-shirt designer He makes an appointment . He is greeted by the receptionist. A few minutes later, one of the designers greets him. He is taken to another room in the office. He is greeted by six other designers. Tad, the T-shirt designer

The designers introduce themselves Goal and strategy 2. Research Good morning, I’m Susie and I will be responsible for finding out about your goals and will inform you of the strategies I will adopt to achieve your goal. I will also be researching about your type of business to seek out competition. 3. Information Architect 4. Sketching Good morning, I am Armen and I shall be organizing the structure and the layout of your web pages to ensure success. I will also show you a few layout sketches. The designers introduce themselves

5. Wireframes, 6. Mockups Good morning, I am Laticia and I shall be responsible for your website wireframe and mockup 7. Prototype 8. User Experience (UX) Good morning, I am Mike and I will be producing a prototype of your website and employ people to put the site to test at various stages of design. Introductions Cont’d

Three important questions Before we set to work, we need to know three facts– What is your website going to be about (Goal) How much are able to invest in your website (money will determine how much work goes into building the website) When do you need this website? (a deadline will determine quality of work) Three important questions

I design tennis players T-shirts and I sell from my shop in Brentwood but fewer people are walking into the shop and more people are shopping online. He then takes out one of his flyers that he had a print shop, print 50,000 copies and distribute to locals, for $200 I guess my goal is to reach to companies all over the world as the most unique designers of T-shirts for Tennis players. My budget is about $1000 - $1200 I don’t really have a perishable product to have a deadline but I would like the site to be up and running within three months, max. Customer Answers

Designers explain - Susie speaks – 1.Goal, Strategy, 2. Research Susie speaks – The reason I need to know the goal of your website is to built a site that serves its purpose. You clearly set out your goal to be the most unique T-shirt designer for Tennis players. Knowing your goal will help me design web pages with tennis . This information will also help focus my Research. I will be analyzing competition, how their site is designed and which ones have more success than others. Designers explain -

Designers explain cont’d 3. Information Architecture Sketching Armen speaks – Based on the website goal, I’ll be making decisions about the best structure or layout to help users navigate from A to B with ease. We will be discussing the benefits of Horizontal vs Vertical navigation menus. Designers explain cont’d

Armen continues about information architecture Horizontal menu Vertical menu I’ll be making many sketches like the following -

5. Wireframes, 6. Mockups Laticia speaks – Hi, I will be creating the wireframe and the mockup. The wireframe of your website will be in black & white or gray and I’ll be organizing the content rather than the visual aspects. Then I shall be creating Mockups to include the visual elements such as the look of the buttons, navigation bars, typography, layout, all the T-shirt images. I will create a few different styles for you to review like the following - Designers continue -

Laticia continues

Laticia Continues -

Designers continue - Mike Speaks, 7. Prototype and 8. UX testing Mike Speaks, Hi, I shall be building an example or a model of the real thing, the site will be fully functional with all the buttons, animation and the shopping cart. I also put the site to test at various stages of design. I appoint users to use particular section of a page to find out if it was user friendly. I use their feedback to come up with solutions and integrate the solution into the site. Let me show you an example of a prototype that you can actually interact with. Designers continue -

Mike continues

In addition, users will be asked to put the pages into test by answering questions like this – What is your first impressions of the layout of this page immediately upon viewing it? What section of the page does your eye go to first? Is that section the most important element on the page? What associations do the color and images evoke? Without clicking on anything on the site, describe the navigation choices you see on the home page and indicate what you think they do. Without clicking on anything yet, if you were exploring, what would you click on first and why? Go head and pretend to be shopping online and go through the motions of putting an item in the cart and describe your experience. Mike continues -

The customer is impressed and writes a check for $750 for the initial payment. He also leaves his contact details for constant communication. He leaves the office excited for a better future for himself and his family. Tad

Group Presentation Instruction 1. Listen to video tutorial L_1 2. Read chapter 1_Planning for a Website 3. In a group of 5-7 decide on a website theme 4. Then, take-on a designer responsibility (refresh your memory by either asking for clarification, read the preceding Teacher Tutorial, read Chapter1 again or Research a responsibility) 4. Create the product pertaining that designer (this product could be in writing, drawing, coloring, by hand or on computer 7. Display product on a Presentation board 8. Present to class as a group.

Group Presentation Rubric_70 points 1. Each thorough student product will earn 10 points for the group. 2. Each less detailed student product will earn 7 points for the group. 3. No product by a student, will earn ‘0’ point for the group. For example – Goal and strategy designer - 10 points Research – 10 points Information architecture – 10 points Sketching - 10 points Wireframe – 10 points Mockup/Prototype – 10 Points User experience – 10 points