Caleb Amesbury

Senior UI Designer @Levatas

67

--

Edge of Tomorrow RWD landing page

Responsive Webd Design: Learn to Design a Responsive Landing Page

This is my first Skillshare project, however this is not my first encounter with RWD.  In this project I enjoyed learning about designing & developing mobile first, interesting aspects about media queries, as well the benefits of designing and developing with grids.  I liked the explanations about why John has chose the responsive sizes he chose for his wireframes.  I also learned about setting the viewport to initial-scale=1.0.  This is an ESSENTIAL detail that I'm betting I've missed in the past. 

I have to say, I'm not convinced "LESS" is more.  Especially used here for just a landing page.  I think it's only beneficial when working on super large projects, and even then it's tough working in LESS with others.  I also thought that using a bootstrap for a landing page was a bit overkill.  He talked quite a bit more about bootstraps than developing RWD, but it was interesting to learn how John utilizes his own custom bootstrap rules.  

I would have liked to see him actually develop his landing page and go through some of the struggles I went through.  Like making tweeks to sizes inbetween the ones we designed for or making sure to type your styles smallest to the largest screens.

All in all, this was a lot of work.  Even for just a single page.  I got tired of stretching objects, increasing fonts, and saving out screenshots.  There was a lot of unnecessary duplication.  I really hope tools like Macaw, Webflow, and Adobe Muse can adapt to fill in this gap between design and development.  One thing is for sure, Photoshop's throwaway mockups are wasting valuable project time that I would rather spend in adding and perfecting interactions to better the site's user experience.

LIVE VERSION, http://calebamesbury.com/skillshare

PROJECT OUTLINE

  • Navigation
      • Home
      • Story
      • Gallery
      • Soundtrack
  • Hero Banner
      • Hero Title  “Live Die Repeat”
      • Logo
  • Buy Tickets
      • Search by Zip
  • Cast
      • Tom Cruise
      • Emily Blunt
      • Brendan Gleeson
      • Bill Paxton
      • Jonas Armstrong
  • Sound Track
      • Spotify plugin
  • Social Links
      • Facebook
      • Youtube
      • Twitter
      • Instagram
  • Copyright

WIREFRAMES

View individual screenshots,

  1. mobile-portrait.png
  2. mobile-landscape.png
  3. tablet.png
  4. standard.png
  5. wide.png

 UI DESIGNS

View individual screenshots,

  1. mobile-portrait.png
  2. mobile-landscape.png
  3. tablet.png
  4. standard.png
  5. wide.png

Comments

Please sign in or sign up to comment.