Goal of the Project

For the WGD 251 Responsive Web Design course at DeVry University in 2018, for my course project, I created a responsive web design for a fictional company called Clear Sky, Inc., makers of Clear Sky Plexiglas Cleaner and associated Plexiglas cleaning products. The primary audience is owners of any Plexiglas-based windows (often used in aircraft), automobile headlight covers, and any other miscellaneous uses such as Plexiglas encased art installations and aquarium Plexiglas.

Project Specs

Category

  • Branding
  • Logo Design
  • Web Design
  • HTML5/CSS3/Javascript Development

Software Used

  • Adobe Illustrator CC icon
  • Adobe Photoshop CC icon
  • Adobe XD CC icon
  • Brackets

(click icon to view name)

Audience

  • Owners of Plexiglas windows, headlight covers, art installations or aquarium Plexiglas

Solution to the Problem

For this course project, we created a style guide where we detailed design decisions such as the fonts, colors, logo design, storyboard for the web site and all wireframes for a mobile, tablet and desktop version of the web design. After sketching several options on paper, I created the wireframes for this web site using Adobe XD (a wireframing and prototyping application). Next, I designed the HTML and Cascading Stylesheets (CSS) using a "mobile first" design technique using Brackets, a freeware modern text editor for web design and development. Media Queries in the CSS for tablet and desktop were then developed to create breakpoints where the design would respond to these two additional screen sizes in addition to the mobile design. I programmed in the progressive enhancements made to the site including the JavaScript which supports the mobile collapsible menu and the inclusion of a Google Map <iframe> to display the location of the business. With JavaScript disabled these two features gracefully degrade back to the baseline user experience of a non-collapsible mobile menu and a static map to display the business location.

I also designed the company logo using Adobe Illustrator CC along with the Clear Sky coupon designed in Adobe Photoshop CC and created all of the product imagery using photos I have taken.

This responsive web design course project can be seen at: Clear Sky Website

Feedback From Others

"Thomas, I was happy to view your completed Course Project 1! Your site has a very professional feel to it and it's great to see all of your responsive code and form elements working properly. Great work on pulling everything together!"

- Mike Lavella, DeVry University Instructor (5/2018)

"I truly enjoyed your website. I liked how you added a link for your coupon so it can be printed out. I see you kept continuity with your colors and fonts they work very well with your window cleaner theme. The website is easy to navigate and its not overdone. Good job."

- Alma Soto, DeVry University Student (5/2018)