Identity Design | Web Design | UI/UX | HTML & CSS | Illustration
ABOUT
The idea is to help people start their day right by getting them out of their bed and into nature to watch the sunrise. Forenoon is a welcoming event that aims to help everyone “start fresh.” The event will feature vendors that sell nutritious, healthy food and provide areas for people to sit, eat and socialize.
The visual identity for Forenoon revolves around the rising sun. The 3 O’s in the forenoon logo show 3 stages of the sun rising above the horizon. The secondary logo features just the three circles of the rising sun.
In contrast to the clean-lined logo and type, the rest of the visuals for Forenoon are organic hand-drawn illustrations. The juxtaposition of these 2 styles creates an identity that is relaxed yet sophisticated. The mix of organic and geometric elements is carried over to marketing materials such as posters and the website.
The Forenoon website contains 4 main pages: Home, About, Vendors, and Contact. These pages feature all of the essential information for the event such as the current vendors, location, and frequently asked questions
The prototyping for the site was done in Figma before moving to HTML and CSS. It shows how the site is intended to look and served as a reference for when the code was being written.
The Forenoon website was developed using hand-written HTML, CSS, and jQuery. This combination of code results in a fully responsive website design across desktop, tablet, and mobile sizes.
Home page resizing with MediaQuery— nav bar adapts and content stacks
Showcase of the Forenoon website on Figma (left) vs final coded website (right).
UX/ UI Principles of Interaction:
Discoverability—The Forenoon website utilizes hover states on clickable links.
Signifiers— The hamburger icon on tablet and mobile interfaces serves as a symbol for interaction.
