Project Description

Case Study

Marin Inspires Abroad

Case Study

Marin Inspires Abroad

For my Introduction to Web Design and Development course, I designed and hand-coded a website for Marin Inspires Abroad, a student travel blog showcasing multiple experiences abroad and personal insights to help others with their own travel planning.

Final Site

The goal of the website is to inspire viewers to travel the world based on the client’s past travel experiences and future plans abroad through reflecting her personality in every aspect of the site. The approach to the travel blog was different, creating a hybrid of high-quality imagery with minimal journal commentary to intrigue users in a more engaging manner.

Using HTML and CSS to build the website, the main challenge was determining how to support my design ideas through the capabilities of code. Implementing media queries into the code enabled the site to be responsive and adjust to various screen widths, allowing the Marin Inspires Abroad site to be versatile while retaining its design integrity based on the viewing preferences of the users.

Style Guide

To direct the main objective of the website based on the client’s vision, I coded a style guide to provide a preliminary example of the final site’s layout design and overall feel. I developed the brand assets that were best to fulfill the defined style guide needs, incorporating the elements along with imagery and external inspiration to create a highly applicable guide for the rest of the process.

Wireframes

After establishing the brand assets and the desired site style, I sketched wireframes for the main pages to lay out the content and special features to be included on the website. The wireframing stage allowed me to put my design thoughts that would add to the unconventional factor of the site on paper, with details of their function to aid in translating the design into reality through the coding process.

High-Fidelity Mockups

I transformed the wireframe sketches into high-fidelity mockups prior to the coding process to apply the brand elements to the design layout for the desktop, tablet, and mobile screen widths. The mockup layouts were key for determining how to best adapt the original desktop design to the smaller screen widths while building a client-approved visual reference to code the final site and necessary media queries.

The Outcome

This project introduced advantageous skills for understanding web design from both the front-end and back-end perspectives.

Not only did I have a valuable opportunity to engage in the client-developer process from the initial style guide choices to final production of the site, I also learned the HTML and CSS coding languages and how to design websites to be responsive using flex properties.

I felt that I truly captivated my client’s personality and overall goal of inspiring others to travel through the branding applied to the layout designs, and I achieved making my design ideas possible through continuously expanding my coding abilities.