If you visit any web 2.0 today, you are likely to see some kind of UI elements that are common, from one website to another. These commonalities enhances UX in websites and web applications. The user accessing your website is likely to be already familiar with some UI cues (patterns) used on your website. This easily allow your web application users identify and know the purpose of UI elements easily without branching off into a new thread for thinking and analyzing. In this presentation, I take members of the KNUST GDG through some of these Web design patterns.

1. Web Design Patterns I
Francis Addai
~ Chief Technology Officer, Voto Mobile http://faddai.com
~ Training Coordinator, mFriday 0244966408
~ Service Personnel, UITS-KNUST @faddai
~ Web Developer, Freelancer

2. Disclaimer
Most of the stuffs I would be talking
about are based on my experiences. I
may be wrong somewhere along the
line, just lemme know when it is that
time.

3. Business of the Day
- What is web design?
- How do you do it?
- Common Patterns

4. 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

5. How do you do it?

6. Static Comp
vrs
Design in the browser
I prefer to design and develop web applications in the
browser.
http://www.netmagazine.com/opinions/designing-browser

7. Common Patterns
in web design and development
-Tabbed Content
- Single page web apps (AJAX)
- CSS frameworks and Grid Systems
- Responsive web design
- SEO
- Analytics
- API integration (FB comments, twitter intents, Disqus,
sharing)

8. Tabbed Content

9. Tabbed Content

10. Single page web apps
(AJAX)
Examples include:
- Gmail
- Google Drive
- Google Search
- Asana (http://asana.com)
In all the above web app examples, there are minimal/no page refresh. New data
is loaded via Asynchronous Javascript And XML (AJAX).

14. CSS frameworks and
Grid Systems

15. CSS frameworks and
Grid Systems
Examples
- 960.gs (http://960.gs/)
- Twitter bootstrap
(http://twitter.github.com/bootstrap/)
- Blueprint (http://www.blueprintcss.org/)
- Foundation by ZURB (http://foundation.zurb.com/)

16. Responsive web design

17. SEO

18. Analytics
When performance is measured, performance
improves. When performance is measured and
reported back, the rate of improvement
accelerates.
~ Pearson’s law

21. APIs

22. APIs

23. Web design patterns II
More hands-on with these patterns.
We will experiment and implement
these patterns. We shall explore
some development tools too.
Don’t miss out.