Download - Web Design Patterns
![Page 1: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/1.jpg)
Web Design Patterns I
Francis Addai~ Chief Technology Officer, Voto Mobile~ Training Coordinator, mFriday~ Service Personnel, UITS-KNUST ~ Web Developer, Freelancer
http://faddai.com0244966408
@faddai
![Page 2: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/2.jpg)
Disclaimer
Most of the stuffs I would be talking about are based on my experiences. I about are based on my experiences. I may be wrong somewhere along the line, just lemme know when it is that time.
![Page 3: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/3.jpg)
Business of the Day
- What is web design?- How do you do it?- How do you do it?- Common Patterns
![Page 4: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/4.jpg)
What is web design?It is a very broad term covering many different skills and disciplines that are used in the production and maintenance of websites.
web graphic design, interface design, user experience design and search engine optimization.
http://en.wikipedia.org/wiki/Web_design
![Page 5: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/5.jpg)
How do you do it?
![Page 6: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/6.jpg)
Static Comp
vrsDesign in the browser
http://www.netmagazine.com/opinions/designing-browser
I prefer to design and develop web applications in the browser.
![Page 7: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/7.jpg)
Common Patterns
-Tabbed Content- Single page web apps (AJAX)- CSS frameworks and Grid Systems
in web design and development
- CSS frameworks and Grid Systems- Responsive web design- SEO- Analytics- API integration (FB comments, twitter intents, Disqus, sharing)
![Page 8: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/8.jpg)
Tabbed Content
![Page 9: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/9.jpg)
Tabbed Content
![Page 10: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/10.jpg)
Single page web apps (AJAX)
Examples include:
- Gmail- Gmail- Google Drive- Google Search- Asana (http://asana.com)
In all the above web app examples, there are minimal/no page refresh. New datais loaded via Asynchronous Javascript And XML (AJAX).
![Page 11: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/11.jpg)
![Page 12: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/12.jpg)
![Page 13: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/13.jpg)
![Page 14: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/14.jpg)
CSS frameworks and Grid Systems
![Page 15: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/15.jpg)
CSS frameworks and Grid Systems
Examples
- 960.gs (http://960.gs/)- Twitter bootstrap - Twitter bootstrap (http://twitter.github.com/bootstrap/)- Blueprint (http://www.blueprintcss.org/)- Foundation by ZURB (http://foundation.zurb.com/)
![Page 16: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/16.jpg)
Responsive web design
![Page 17: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/17.jpg)
SEO
![Page 18: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/18.jpg)
Analytics
When performance is measured, performance improves. When performance is measured and reported back, the rate of improvement reported back, the rate of improvement accelerates.
~ Pearson’s law
![Page 19: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/19.jpg)
![Page 20: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/20.jpg)
![Page 21: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/21.jpg)
APIs
![Page 22: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/22.jpg)
APIs
![Page 23: Web Design Patterns](https://reader033.vdocuments.us/reader033/viewer/2022060118/558c8c3ed8b42a5c678b46e8/html5/thumbnails/23.jpg)
Web design patterns II
More hands-on with these patterns. We will experiment and implement these patterns. We shall explore these patterns. We shall explore
some development tools too.
Don’t miss out.