Telescope

Reaching The Stars

All you ever wanted to know about astronomy and the universe surrounding us.

Project Overview

The Task for this project was to deliver the visual design for a blog website that publishes articles on astronomy and related topics. I was given the intended structure in the form of wireframes as well as the theme to create a complete visual experience.

Additionally, I was asked to convert the design into a responsive layout and to give examples for a mobile version of the blog.

Process

The challenge was to create an appropriate and optimized design without having a lot of metrics, additional information and testing resources.

Prior to the design process, I conducted research on the design and layout of blog articles as well as websites and applications with the topic of astronomy to get more familiar with the latest design trends. These findings helped me to build and iterate the interface design. The optimized desktop design was then converted into a responsive mobile layout. 

UI Design

  • Mood Board 
  • Style Guide
  • Desktop Interface Design
  • Responsive Mobile Design
  • Mockups

Tools and Resources

  • Sketch
  • Icons8
  • Unsplash
  • Sketch App Sources

Mood Board

After researching and comparing different websites, I then combined my findings and visualized them in a mood board to capture the essence and feel of the future design.

Mid -Fidelity-Wireframes

These mid-fidelity wireframes were the layout provided in the project brief and the starting point for my design process. With the help of this structure, I established the visual hierarchy and optimized the flow.

Interface Design

Testing a variety of color combinations, I first used a color palette with vibrant blues and purple to emphasize the color of space and the night sky. After a revision, this concept was changed as I saw that the design was too flat. It was not reflecting the depth and contrast of space and the variety of the blog’s content. For the final design, I used a dark theme with contrasting blues and orange tones which makes the design look much more balanced and versatile.

I also decided to change the original star-shaped icon which gives a very generic and common feel. The new icon displays a telescope, matching the theme of the blog and giving it a more appropriate and distinctive character. 

Old Icon

New Icon

Visual Design

This is the final visual design for the desktop application of the blog. First displayed as a wireframe in its original layout and additionally shown in action on different mockups.

Style Guide

In the next step, I collected and visualized all the important design elements used in the interface design as a style guide. This documentation is very important for future reference and also helped me a lot with the responsive design, giving me fast and simple access to all the necessary elements. 

Color

Typography

Iconography/ Buttons

Graphic Elements

Responsive Mobile Design

To convert my website design into a mobile format, I used a responsive grid system to structure the screens. First transfering the content as a single page cohesive to the web design and then breaking up the content sections into separate pages to achieve a more simple and intuitive flow. 

Burger Menu

While working on the mockups, I found that the single page design layout would be quite long and exhausting for a user to scroll through in order to view all the information.

That is why I decided to separate the different content sections and to display them on separate screens. To navigate easily through the content screens, I added a burger menu as the main navigational element.

Mockups

The following mockups are showcasing the new mobile layout with separate content pages instead of one page. For this design, I used the same grid system as shown above and made changes to the size, spacing and padding of design elements.

Learnings

Good research is the basis of every successful product. Even if not being a part of the initial UX research and testing phase, understanding the needs and expectations of the end-user is crucial for a designer. Diving deep into the theme of the blog, analyzing competitors and understanding the target audience guided me through my design process. 

Ideally, all that information is given to the designer by a client or UX designer working on the same project. But in reality that is not always possible which makes it very important for a UI designer to do research as well and to not only view the project from a design perspective but with a user-centered mindset too.

Trials and errors are the best way to create a well rounded and user-friendly design. Especially in the beginning phase of the project, it helped me a lot to try out different design solutions like the color choice for example. Every design element should play an important part in the overall design. And if something doesn’t match the theme or goal of the product, making changes and exploring different ways is one of the most important steps.

Thank You For Viewing

Follow Me On

Copyright © 2020 Elena Sandfort