arrow-left-lightarrow-leftarrow-right-lightarrow-rightarrow-thin-left arrow-thin-right browser-search cup heart indicator laptop layers layout-4boxes layout-sideleft mail-heart mail map-pin mixer mouse nav paintbucket pencil-ruler phone picture play video
UX + UI Designer

What the <DIV>?

  • Scope: Visual Design, Front-End Development, Information Architecture
  • Tools: Adobe Illustrator, HTML & CSS
  • Duration: 5 Days

The Project

Design a high fidelity mock up a single page of a website based on a previous project and code that mockup from scratch using newly learned HTML & CSS skills.

The Problem

The National Museum of Natural History mobile app of exploration needs a companion site that allows patrons to plan a route through the museum before they go. The design of the site needs to be a complete overhaul to the existing National Museum site while staying within the frame of the Smithsonian Institute.

The Solution

A complete refresh of the existing National Museum of Natural History site beginning with the top-level navigation architecture restructuring, encasing a dynamic planning component allowing patrons to explore the entire museum based on topics of interest, and then send that plan to the mobile museum explorer app.

The Process

Research Anyway

Without a lot of time for this project, I had to research other Smithsonian Institute websites to see what my competitors were doing well and more importantly where they were failing. I also looked at other types of competitors such as trip planning sites to find some unique solutions to the planning process that I may be able to implement in order to ensure my users would successful plan their museum trip.

On the Count of Three, Draw

I began by quickly sketching a new wireframe of the structural layout of the single page ensuring I included room for all necessary components. This sketch was immediately put into Illustrator where I knew I would need to begin working right away in order to have a pixel perfect mockup within 24 hours.

<div> within <div> within <div>

Once I finished my design in illustrator, I printed a hard copy and began boxing my design back into a wireframe with the intention of converting these boxes to <div> tags. With a background in self-taught web design I dove head first into the HTML and CSS and began building the underlying structure of my site.

Why Oh Why Did I Design it That Way

I knew with my design I had bitten off more than I could chew when it came to CSS, but this only inspired me to dig deeper and find new ways to achieve my goals. I scoured the net, asked my developer friends in the class next door, and picked my instructors brains for all sorts of tips and tricks. In the end I was able to complete my design and share my ever-growing coding knowledge with my fellow classmates to help them achieve their goals as well.

Half image
Half image