Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Webdesign for Digital Agencies

506 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

×