Outdoor Adventures
Outdoor Adventures is a website designed to attract customers of an outdoor adventure company. This project utilized the knowledge I had gained from a Web Design course taken at Montana State Univesity.
Project Overview
The Problem
Create a website for a business that advertises its goods and services while attracting the eye of potential customers.
My Role
Research, Prototype, Design, Code
Tools Used
Balsamiq (wireframing)
Languages Used
HTML/CSS
The Process
Step 1 -- Research:
Before getting started on this project, I wanted to have a good idea of the company's competitors and their own website designs. I started by looking up local and out-of-state outdoor recreation companies and analyzing their websites. I took notes on what worked well, what didn't, and jotted down design ideas that came to me along the way.
Step 2 -- Ideate:
I then used the research I collected from stage one to brainstorm design ideas. Because Outdoor Adventures was not a real company, I had to decide what I wanted their goods and services to be, as well as their core customer base. I ensured I had a concrete idea of my audience and the business to design the most effective design. The business would sell guided tours and rental equipment. The average customer would be a tourist or someone who is not too experienced with outdoor activities. Having this base knowledge helped lead me into the next steps of the design process.
Step 3 -- Wireframe:
After completing my research, I began to create my wireframe mockups. To do this I used a website called Balsamiq to make the process clean and simple. This website has a large library of images, text boxes, and navigation bars available making the wireframe design process effortless and straightforward. Balsamiq allowed me to focus on the structure of the website without worrying about colors, text, or images. I applied usability heuristics such as keeping a minimalistic design and a consistent layout.
Step 4 -- Code!:
Next up, the fun part! This is where I put all my preparation into action and got to coding. I followed the wireframe structure I created in the previous step, then added images, color, and functionality. I picked a muted, natural color scheme to mirror the colors in nature and selected images that evoked feelings of accomplishment and adventure. I created my website using HTML and CSS.
