Page 1

MILESTONE inside the design process


Step One:

COMPANY BRANDING. MILESTONE

A significant event in a person’s life, often marking the start of a new chapter.

Great websites start with great brands, so our group project began with researching the function of travel agencies.

We developed a basic site map and a list of features that we wanted on each page. Although our ideas changed throughout the project, this gave us a solid place to start and begin our design research!


Step Two:

DESIGN RESEARCH.

As in any design project, we took time to explore visual styles and design resources. Our team particularly liked the feel of flat web design, which we felt could be successfully integrated with the powerful photography that travel oriented marketing lends itself to. Some of our favorite sites for inspiration during this process were Pinterest, Behance, & Dribble.


Step Three:

WIREFRAME MOCKUP. Using Adobe Illustrator, we spent over a week constructing and refining a mockup of our website in order to get a true vision for our company. After deciding to go with the modern, trendy feel of flat web design, we decided on some other key visual elements to be repeated throughout our site, as depicted below.

Blue Color Palette

CALL TO ACTION

Flat Buttons

Flat Vector Illustrations (& Rounded Boxes)


Step Four:

CODING. #1

HTML & CSS

With our wireframe as a guide, we went into the coding process knowing exactly what we wanted, making the HTML & CSS phase of the project much easier.

#2

JQUERY SCRIPTS

This was the most time-consuming part of the website development — we put a lot of effort into integrating functioning jQuery scripts and then styling them to fit our brand.

#3

TRAVEL CONTENT

After scouring the web for marketable travel content & destinations, we researched key features and starting prices for each travel package, and found appealing, high quality photographs.

#4

RESPONSIVE DESIGN

One size does not fit all — the last step in our coding process was to use media queries to make sure our website will adapt to all screen sizes, including mobile devices, and not to mention all modern browsers.


Use & Development:

INNOVATIVE TECHNOLOGY.

QUICK VIEW POP-UP

WEATHER WIDGET

5 STAR RATING SYSTEM

IMAGE SLIDER

INTERACTIVE CALENDAR

REAL-TIME CLOCK


Use & Development:

MEDIA ELEMENTS. We chose to use two different styles of graphic media elements on our website:

HIGH-RES PHOTOGRAPHY

FLAT-STYLE VECTORS


Additional Info:

INDIVIDUAL ROLES. LINDSAY KLENZMAN Worked On: User Interface (UI) Co-Design, User Experience (UX) Design, Focus Group Polling, Price Research, Destination Research

TANISHA THOMAS Worked On: Cross-Browser Debugging, jQuery Plugin Testing, Photography Compilation, Destination Research, User Interface (UI) Co-Design

SARAH RIEDLINGER Worked On: HTML/CSS Coding, jQuery Plugin Implementation, User Interface (UI) Co-Design, Vector Artwork Design

MileStone Travel Brand Guide  

A guide to the branding and design process of the MileStone Travel website.