Telescope
Reaching The Stars
All you ever wanted to know about astronomy and the universe surrounding us.
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iMac-@2x-1024x847.png)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Mood-Board-Image@2x-compressor.png)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Part-1@2x-633x1024.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Part-2@2x-734x1024.png)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Header-Alternative-F@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Header-Short-F@2x.jpg)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/80px-Copy@2x.png)
Old Icon
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Telescope-Icon@2x.png)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Part-1-F@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Part-2-F@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Macbook-Pro-Small-2@2x-1024x602.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Macbook-Pro-Small-1@2x-1024x602.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iMac-@2x-1024x847.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Macbook-Pro-Small-3@2x-1024x602.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Macbook-Pro-Small-4@2x-1024x602.png)
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
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Color@2x.png)
Typography
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Typo@2x-1024x740.png)
Iconography/ Buttons
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Icons@2x.png)
Graphic Elements
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Graphic-Elements@2x.png)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Part-1-G@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Part-1-G-Grid@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Part-2-G@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2021/03/Part-2-G-Grid@2x.jpg)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Mobile-Screen-1@2x-576x1024.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/Burger-Icon@2x.png)
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.
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iPhone-JetBlack-1@2x-511x1024.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iPhone-JetBlack-4@2x-511x1024.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iPhone-JetBlack-2@2x-511x1024.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iPhone-JetBlack-5@2x-511x1024.png)
![](https://www.elenasandfort.com/wp-content/uploads/2020/12/iPhone-JetBlack-3@2x-511x1024.png)
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.