web design patterns
DESCRIPTION
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.TRANSCRIPT
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
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.
Business of the Day
- What is web design?- How do you do it?- How do you do it?- Common Patterns
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
How do you do it?
Static Comp
vrsDesign in the browser
http://www.netmagazine.com/opinions/designing-browser
I prefer to design and develop web applications in the browser.
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)
Tabbed Content
Tabbed Content
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).
CSS frameworks and Grid Systems
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/)
Responsive web design
SEO
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
APIs
APIs
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.