Inspired by my love for Formula 1, I initiated 'The Grid' project during my course in 2021. It aimed to create a modern and engaging magazine focused on basic design principles.
To appeal to younger F1 enthusiasts, I prioritised simplicity and readability in the layout. Additionally, I produced a captivating motion graphic for social media promotion.
Expanding the project in 2022, I developed a sleek website using WordPress, mirroring the magazine's clean aesthetic. Consistency was maintained through a mix of filled and outlined text for headers. 'The Grid' demonstrates my proficiency in bridging graphic design, motion graphics, and web development, resulting in a cohesive and immersive digital experience.
As this was for a class project, it was required to have some variety in the page layouts. I made sure to maintain consistency throughout mine by using a mix of filled and outlined text for the headers.
One of the main goals for this design was to ensure that the body content within the magazine wasn't overwhelming and cluttered on each page, and I believe that this has been achieved.
To maintain consistency, I planned to use the three brand colours for the magazine.
However, since most of the F1 teams have familiar and dominant colours, where a spread was focused on a specific team, the team colour was used, and for more general content, the brand colours were used.
If the magazine were to have more pages, the page layouts would be reused with some small adjustments or swapping of layout sides.
A typographic motion graphic was created as an advertisement for the latest issue of The Grid.
The intention was to use it on the magazine's social media channels or as a GIF on a website.
The concept aimed to simulate the speed and movement of Formula 1 race cars by having the text swiftly enter and exit the frame, allowing for a seamless looping effect.
The text was divided into three layers, each with a different visible alpha channel. When these layers overlapped, the text appeared white.
Additionally, a delay was applied to each layer, resulting in a glitched colour effect during the text's movement.
Initially, the colours were limited to the red, green, and blue alpha channels, but they were later adjusted to match the magazine's branding colours.
For the website segment of this project, a challenging timeframe of only 4/5 days was allocated for the design and WordPress-based development, alongside specific requisites.
A primary focus was to ensure seamless client handover (The Grid) and effortless content addition without style disruptions. To meet these goals, a site map was crafted, prototypes were tested, and user feedback was incorporated before actual construction.The design embraces a minimalist and clean layout, harmonizing with the magazine's aesthetics and prioritizing user-friendly navigation.
Custom post types were employed to meet project specifications, empowering the client for autonomous content addition. This approach guaranteed that any new articles would naturally integrate into the articles page with appropriate styling. Additionally, an extra custom post type was integrated to manage the magazine's contributors, facilitating their addition or removal as needed.
The site follows a straightforward structure to enhance navigation ease. The original plan entailed including a shop section where users could purchase the magazine as well as any additional products offered by The Grid.
However, due to the project's time constraints, priority was given to building the initial set of pages and the shop was something that could be integrated at a later stage.
.webp)
Landing Page
Motion graphic header
Showcases the top articles
Contributors Listing
Quick overview of The Grid
Articles Page
Lists all available articles to read & includes an excerpt.
Article title acts as the link to the full article.
About Page
Introduces the user to what The Grid is all about.
Future Iterations
Further development of the web design would include a shop section for the magazine, as well as more promotion on the landing page about new issues and The Grid's content.