Responsive Website Design

responsive website layout

 

Scenario:

You are a graphic designer working for a graphic design studio. One of your clients has requested a responsive version of their website.

The client is Spokane Falls Community College Planetarium. This website will incorporate the SFCC fonts, colors, and logo, but will function as a stand-alone site, independent of the SFCC website.

The primary mission of the Spokane Falls Community College is education.

"Our state-of-the-art digital planetarium was designed as a virtual classroom into the universe for students of all ages. Since the spring of 2011, we have provided free K-12 field trips to local schools and educational groups, offered low-cost planetarium presentations to the general public, and are available for special event rentals".

"Our vision for the planetarium includes promoting and serving science education in our community, expanding our local programming to preschoolers and senior groups, and offering in-depth night sky and telescope viewing".

Site mockup: either Adobe Illustrator or Photoshop, representing all screens.

Site build: Bootstrap 3.0 program.

You will work with your art director on research, idea exploration, and concept development. Once the roughs have been approved by the art director, one layout will be chosen for the final comprehensive designs.

The final comprehensive design will need to simulate the final project as closely as possible.

The client has asked that...

  • A six page PDF containing final designs for each site page, showing the site using responsive design on mobile, tablet, laptop, and desktop, be submitted.
  • A final color proof for presentation purposes be submitted.
  • The screen designs are presented on an image of mobile, tablet, laptop, and desktop versions. Am I Responsive?
  • The final html site build is delivered in a compressed root folder, including only required assets. (Only html pages, css, js, and dependent files; as would be uploaded to the host server).

The client should see the following pages:

  • Home
  • Public Shows
  • K-12 Shows
  • Show Descriptions
  • Rent Facility
  • Resources for Educators

Utilize the images/content from Spokane Falls Community College Planetarium

Design Process:

  1. Use a twelve column grid for your design; keep the navigation, header, and footer consistent across all pages.
  2. Design for mobile content first.
  3. Research tips for good responsive site design on the web:
    • Collect four or five articles for responsive design. (See resources list below).
    • Pull out 5 specific tips that you plan to apply in your design.
    • List how you will plan to implement your tips.

  4. Research and collect examples of well designed mobile sites:
    • Collect examples of home screens
    • Collect examples of nav links & buttons
    • Collect examples of images (sizes and positioning).
    • Collect examples of headers, subheads, and text (you'll be using pre-existing typefaces so focus on types sizes and styles.
    • Collect examples of text color/background color that enhance readability.
  5. Think critically and problem solve.

  6. Submit a mood board for each of your rough designs that...
    • shows thinking as it relates to the design principles
    • states the objective and your creative strategy
    • clearly shows quality and award winning industry examples
    • clearly shows creative usage of typography
    • clearly shows usage of a minimum of 3 design elements (ie: color, line, shape, texture, value, spatial depth)
    • has a visual hierarchy and is organized on a grid structure
  7. Communicate refined concept, detailed composition and typographic formatting of designs using tight roughs that...
    • present three approaches, utilizing the Am I Responsive layout to show mobile, tablet, laptop, and desktop screen versions.
    • convey type choice
    • convey type size, spacing and leading
    • indicate usage of color
    • convey photographic or illustrative imagery
    • are each an entirely different composition
  8. Use images from the original site design.

  9. Deliver a digital comprehensive design...
    • Contains mobile, tablet, laptop, and desktop screens (Am I Responsive)
    • includes a 6 page PDF (smallest file size) of the multi-screen layouts for each site page.
    • is well crafted and presentable
    • shows visual hierarchy within the body text (usage of book, italics, bold, line / implied line, or shape for type reversal)
    • is as close to the finished responsive site as possible
  10. Be productive and use studio (class) time effectively by...
    • attending all class sessions
    • showing up with research materials
    • participating in concept development
    • using class time as an opportunity to get the job done
  11. Assess your work and make appropriate revisions by...
    • gaining peer feedback at the rough stage
    • gaining peer feedback at the digital comp stage
  12. Submit final design on or before the deadline date that indicates entry level graphic design by completing the list of items above.

Design Technology

  1. Create job folder(s) as instructed by your production manager.
  2. Prepare raster and vector images correctly for final usage.
  3. Optimize raster images correctly for non-print media.
  4. Save all image files in an image folder within the job folder before placing them to ensure proper links.
  5. Create computer generated roughs.
  6. present roughs using PDF:
    1. smallest file size
    2. "single page" layout
    3. "Fit page" magnification
    1. Use a grid framework / Bootstrap 3.0 and upload HTML & CSS files to SFCCDESIGN.COM for review.
    2. Validate your design: http://mattkersley.com/responsive/
    3. Validate your HTML and CSS: http://validator.w3.org/

Resources

  1. 10 mobile web best practices
  2. Good site design examples
  3. Design Showcase

 

top of page