Web Design Patterns IFrancis Addai~ Chief Technology Officer, Voto Mobile   http://faddai.com~ Training Coordinator, mFrid...
DisclaimerMost of the stuffs I would be talkingabout are based on my experiences. Imay be wrong somewhere along theline, j...
Business of the Day- What is web design?- How do you do it?- Common Patterns
What is web design?It is a very broad term covering many different skills anddisciplines that are used in the production a...
How do you do it?
Static Comp                               vrs                  Design in the browser        I prefer to design and develop...
Common Patterns                    in web design and development-Tabbed Content- Single page web apps (AJAX)- CSS framewor...
Tabbed Content
Tabbed Content
Single page web apps                   (AJAX)    Examples include:   - Gmail   - Google Drive   - Google Search   - Asana ...
CSS frameworks and  Grid Systems
CSS frameworks and           Grid SystemsExamples- 960.gs (http://960.gs/)- Twitter bootstrap(http://twitter.github.com/bo...
Responsive web design
SEO
AnalyticsWhen performance is measured, performanceimproves. When performance is measured andreported back, the rate of imp...
APIs
APIs
Web design patterns IIMore hands-on with these patterns.We will experiment and implement these patterns. We shall explore ...
Web Design Patterns
Web Design Patterns
Web Design Patterns
Web Design Patterns
Web Design Patterns
Upcoming SlideShare
Loading in …5
×

Web Design Patterns

1,031 views

Published on

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.

Published in: Technology
3 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
12
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Patterns

  1. 1. Web Design Patterns IFrancis Addai~ Chief Technology Officer, Voto Mobile http://faddai.com~ Training Coordinator, mFriday 0244966408~ Service Personnel, UITS-KNUST @faddai~ Web Developer, Freelancer
  2. 2. DisclaimerMost of the stuffs I would be talkingabout are based on my experiences. Imay be wrong somewhere along theline, just lemme know when it is thattime.
  3. 3. Business of the Day- What is web design?- How do you do it?- Common Patterns
  4. 4. What is web design?It is a very broad term covering many different skills anddisciplines that are used in the production and maintenanceof websites.web graphic design, interface design, user experiencedesign and search engine optimization. http://en.wikipedia.org/wiki/Web_design
  5. 5. How do you do it?
  6. 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. 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. 8. Tabbed Content
  9. 9. Tabbed Content
  10. 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 datais loaded via Asynchronous Javascript And XML (AJAX).
  11. 11. CSS frameworks and Grid Systems
  12. 12. CSS frameworks and Grid SystemsExamples- 960.gs (http://960.gs/)- Twitter bootstrap(http://twitter.github.com/bootstrap/)- Blueprint (http://www.blueprintcss.org/)- Foundation by ZURB (http://foundation.zurb.com/)
  13. 13. Responsive web design
  14. 14. SEO
  15. 15. AnalyticsWhen performance is measured, performanceimproves. When performance is measured andreported back, the rate of improvementaccelerates.~ Pearson’s law
  16. 16. APIs
  17. 17. APIs
  18. 18. Web design patterns IIMore hands-on with these patterns.We will experiment and implement these patterns. We shall explore some development tools too. Don’t miss out.

×