1. Web Design with HTML & CSS Lesson 1

2. Planning Your Website   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.

3. There are 8 Stages of Planning a website The categories – 1. 1. Defining goals & strategy, 2. 2. Research, 3. 3. Information Architecture, 4. 4. Sketching, 5. 5. Wireframe 6. 6. Mockups 7. 7. Prototype 8. 8. UX

4. Stages explained Imagine the following scenario – There is a gentleman, called, Tad. He loves designing T-shirts and has been doing so since he was a teenager. He is not a digital native but he is business minded and knows well that selling from his shop only, puts him at a disadvantage. He therefore starts looking for a good company that designs websites. He finally finds one, called ‘Zeb designs’

5. Tad, the T-shirt designer  He makes an appointment to see one of the designers at Zeb designs.  He is greeted by the receptionist and is asked to have a seat.  A few minutes later, one of the designers greets him and takes him into another room in the office.  He is greeted by six other designers

6. The designers introduce themselves *Goal and strategy *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. *Information Architect * 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.

7. Introductions Cont’d *Wireframes, *Mockups Good morning, I am Laticia and I shall be responsible for your website wireframe and mockup *Prototype *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.

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

9. Customer Answers  I design T-shirts for tennis players 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.

10. Designers explain - Goal, Strategy, 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 players in mind rather than any other sport. This information will help focus my Research. I will be analyzing competition, how their site is designed and which ones have more success than others.

11. Designers explain cont’d 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.

12. Armen continues - information architecture I’ll be making many sketches like the following -

15. Designers explain - Wireframes, 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 -

16. Laticia continues

17. Laticia Continues -

18. Designers explain - Prototype and Usability 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.

19. Mike continues

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

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