responsive webdesign for digital agencies

9
Responsive Prototyping, Web Design, Programming

Upload: kirill-mazur

Post on 27-Jan-2015

133 views

Category:

Technology


2 download

DESCRIPTION

Презентация про тренды дизайна, которые плавно перетекают из мобильного веба в десктопный, а также про процессы создания адаптивных веб-сайтов на этапах подготовки бюджета, прототипирования, дизайна и верстки.

TRANSCRIPT

Page 1: Responsive Webdesign for Digital Agencies

ResponsivePrototyping, Web Design, Programming

Page 2: Responsive Webdesign for Digital Agencies
Page 3: Responsive Webdesign for Digital Agencies

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.

Page 4: Responsive Webdesign for Digital Agencies

Responsive ProcessesMain stages

0. Budgeting.1. Prototyping.2. Web-design.3. Layouts.

Page 5: Responsive Webdesign for Digital Agencies

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.

Page 6: Responsive Webdesign for Digital Agencies

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

Page 7: Responsive Webdesign for Digital Agencies

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

Page 8: Responsive Webdesign for Digital Agencies

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/