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 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.
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.
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.
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.
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.
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.