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.
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.
- Mood Board
- Style Guide
- Desktop Interface Design
- Responsive Mobile Design
Tools and Resources
- Sketch App Sources
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.
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.
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.
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.
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.
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.