Responsive Webdesign for Digital Agencies

418 views
362 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
418
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Webdesign for Digital Agencies

  1. 1.  Responsive Prototyping, Web Design, Programming
  2. 2. Design Trends Mobile 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.
  3. 3. Responsive Processes Main stages 0. Budgeting. 1. Prototyping. 2. Web-design. 3. Layouts.
  4. 4. Budgeting How 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.
  5. 5. Prototyping Clear 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
  6. 6. Layout Main “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
  7. 7. Testing and Presentation How to check responsive site? Web services 1. Am I Responsive(http://ami.responsivedesign.is/) 2. http://responsive.is/ 3. http://quirktools.com/screenfly/
  8. 8. Thank you! Kirill Mazur www.linkedin.com/in/kimazur www.facebook.com/kirill.mazur mazur@tennisterin.com

×