Web Design Patterns

  • 750 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
750
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
3
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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 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. 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 datais loaded via Asynchronous Javascript And XML (AJAX).
  • 11. CSS frameworks and Grid Systems
  • 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. Responsive web design
  • 14. SEO
  • 15. AnalyticsWhen performance is measured, performanceimproves. When performance is measured andreported back, the rate of improvementaccelerates.~ Pearson’s law
  • 16. APIs
  • 17. APIs
  • 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.