View
138
Download
2
Category
Tags:
Preview:
DESCRIPTION
Презентация про тренды дизайна, которые плавно перетекают из мобильного веба в десктопный, а также про процессы создания адаптивных веб-сайтов на этапах подготовки бюджета, прототипирования, дизайна и верстки.
Citation preview
ResponsivePrototyping, Web Design, Programming
Design TrendsMobile Era at Web-design
1. Responsive web-design.2. Mobile navigation (big buttons!).3. Flat design (windows 8 / windows phone).4. Sites with phone-like sidebars.5. Fixed navigation (less time – quick access!).6. Site-slides.7. One page sites.+ Parallax Storytelling.+ “Endless” scrolling.
Responsive ProcessesMain stages
0. Budgeting.1. Prototyping.2. Web-design.3. Layouts.
BudgetingHow much time and what is the cost?
Ex. 3 pages Website: main, articles catalog, article page.1. Prototyping: + 3-6 hours.2. Design: + 6-8 hours.3. Layout: + 10-12 hours.4. Approving all stages: + 6-8 hours.____________________+ 20-30% additional time and costs.
PrototypingClear Responsive Mind
0. “Mobile first” vision.1. Creating “tablet” prototype.2. Creating “desktop” prototype.3. Creating “phone” prototype.
Book: “Mobile first”, Luke Wroblewski Presentation: http://www.slideshare.net/Darwinium/mobile-first-responsive-design
LayoutMain “responsive” technologies
1. Work with media-queries (CSS).2. “Rubber” images.3. Elements adaptation (ex. header to dropdown).4. Content hiding.5. Identifying devices opportunities
(Modernizr, etc)
– time for browsers adaptation.
Presentation: http://www.slideshare.net/profyclub_ru/ss-12266758
Testing and PresentationHow to check responsive site? Web services
1. Am I Responsive(http://ami.responsivedesign.is/)2. http://responsive.is/3. http://quirktools.com/screenfly/
Thank you!
Kirill Mazur
www.linkedin.com/in/kimazurwww.facebook.com/kirill.mazurmazur@tennisterin.com
Recommended