User Interface Design
National Geographic is a monthly magazine which features engaging articles ranging from science to world culture. This redesign project re-imagines National Geographic's classic magazines as a modern website with a focus on keeping the iconic features beloved by millions of readers all over the world.
⌛ 4 weeks
🛠 Miro, Adobe Illustrator, HTML, CSS, JavaScript
👤 Designer, Developer
National Geographic Magazine requires a website redesign which must encapsulate its core personality from the hardcopy magazines. Translate the design into a 960px width webpage as a semantic HTML document using HTML 5 and CSS 3.
Initial Findings
I chose to focus on National Geographic Magazine as I had a few old issues laying around on a bookshelf at home. Given how iconic the magazine covers are, I was curious as to how to translate it into a modern website. I avoided visiting the current website so as to not influence my design decisions.
I then defined the target user group to be magazine viewers looking for an easily accessible online alternative to the hardcopy versions of National Geographic magazines. Since much of the existing audience base would be familiar with the existing aesthetic of the magazines, I found that it was essential to identify and incorporate those archetypal design elements into my redesign. After selecting a cover and double spread from a 2002 issue, I identified the use of distinct design choices such as the tri-colour palette, use of sans-serif and serif fonts in headings and thick black bars to divide the spread into sections, all of which I aimed to include in my redesign.
Low Fidelity Wireframe
After definining the target user group, I proceeded into the ideation stage and constructed a low fidelity wireframe upon a 12 column grid layout in Adobe Illustrator. Given National Geographic’s strong visual focus on photographs, I made sure to incorporate a landing image and a slideshow structurally reminiscent of the captioned photographs from the spread. Furthermore, key website elements such as the header and footer housed child elements like the search bar, hamburger menu, site map and copyright information.
One crucial element for all magazines is the option of subscribing. In this case, a phone number for subscription services is presented in small red typography at the top of the cover page. I initially positioned the subscribe option in the header in the first high fidelity mockup.
High Fidelity Mock-up: First Iteration
Next, I built a high fidelity design mock-up upon the wireframe in Adobe Illustrator. I incorporated the tri-colour palette throughout the design, utilising the bold red shade in heading text and golden yellow shade to indicate affordance in the buttons and linked text.
User Testing
After presenting the first high fidelity mock-up to a few peers as well as the tutor, I received generally positive feedback for the page architecture and use of colours. However, further improvements could be made to the design such as changing the position of the subscribe button to the footer so it is both accessible to the user at all times while not being pushy.
High Fidelity Mock-up: Second Iteration
I incorporated feedback from user testing into the final mock-ups below. The main changes were to the button positions in order to improve accessibility and alignment with other elements, increasing overall visual appeal and coherence.
I then coded up my design using HTML, CSS and some vanilla JavaScript to provide mock “opening” functionality for the side menu. While translating the design, I realised that the font-sizes in the mock-up were too small so I increased them for web readability. Furthermore, I added dynamic animations to adapt my mock-up for the web and increase affordance of elements. These include the subtle fading in of the side-menu/search-bar and expanding of the yellow underline on hover to indicate a clickable link. Buttons would also darken on hover, and the search/menu buttons would toggle between being white and yellow depending on their state.
Live Demo
View a live demo of the website 👉 here. Have a click around! Note that the webpage has a white buffer on the right side. This is because it is hardcoded to be 960px wide, as per the brief for this project.
This project was really enjoyable as I was able to exercise my design and development skills from start to finish.
A key learning from undergoing this design-to-code project is the importance of appropriate font-sizing for readability. While I acted as both the designer and developer in this case and was able to immediately update the font-size in the code, establishing the correct size in the design mock-up streamlines the development stage. This is especially important in the industry to reduce unnecessary back-and-forth conversations between product designers and developers.
If I could change one step in my design process, it would be to transfer the mock-ups to high fidelity prototypes and conduct usability testing. This will ensure that my solution is designed effectively for the target audience. Since this project was designed as a static 960px wide website, the next step is to update the design for responsiveness while maintaining the user experience.