Designing for Mobile

THIS IS A CURRENT WIP - Fall Term 2023

Over this course we are focusing on the principles of design for mobile and the class is focused on allowing creative potential while prioritizing simplicity for a better user experience.

Much focus was on media queries, flexbox, CSS grid, Bootstrap, and more.

Hamburger Menus Project

Prompt:

The hamburger navigation should seamlessly incorporate into the color scheme and overall design of your prototype.
Using media queries, the hamburger menu should be part of your overall responsive design and kick in at smaller screen sizes, allowing for the best experience across all screens (A desktop navigation should appear on larger screens).
The navigation should contain at least four links to sections of your site (which you will complete and link next week).
- In order to make links active while you are still building, you can link them using a # symbol: < a href="#" >Active link< /a >

Topsail Island, NC CSS Grid Project

Prompt:

Use CSS Grid to rework the Visitors section of the Topsail Beach NC Website (Opens in new window) URL: https://topsailbeachnc.gov/Visitors/Things-To-Do to be responsive using CSS Grid. You are not required to use the images on the site and you may benefit from finding copyright-free images of your own.

Your goal for this project is to build an original, responsive website aimed at showcasing Topsail Beach as a tourist destination. To this end, you will mainly be referencing the Visitors section of the site, turning it into a standalone site, curating and organizing the content for potential visitors to the area. You are not expected to redesign the entire site - curate your content to your target audience!

While you are not required to link all the content from the original site, your final product should contain at least 4 functioning links (internal links to sections of a single-page site is fine).

Huntington Beach,CA Bootstrap Project

Prompt:

As you already made many of the executive editing decisions regarding content in the previous project, this assignment should be mostly a question of using Bootstrap for layout. If you wish, rather than a redesign, you can create your own beach town Website inspired by the link above.

Your final product should contain at least 5 functioning links (internal links to sections of a single-page site is fine) and cater to the relevant target audiences.

Software Utilized:

Midjourney (some images)