Vibz

The one where I used a social media style for a blog.

WIREFRAME
design
PROTOTYPE

About the Project

A conceptual UI Design project

Vibz Blog Website is an innovative conceptual project that draws inspiration from the esteemed blog of Calvin Pedzai.

The Challenge

A male content blogazine website

The objective of this project was to develop a responsive blog with male-focused content targeted towards individuals between the ages of 25 and 35. The branding style guide for Vibz was not provided, granting me creative freedom to select visual elements and messaging that aligns with the project brief and resonates with the intended audience.
Marvin McKinney
28 years old
Project manager by day and a fitness enthusiast by night. He enjoys lifting weights, running, and cooking healthy meals.
Pain Point
Searching for inspiration about lifestyle, health, news, music, movies and gadgets (Our category sections)
Jacob Jones
32 years old
Creative marketing strategist who loves exploring new cuisines, hiking, and playing piano. Passionate about building brands.
Pain Point
Gets bored with uninspiring content
Wade Warren
34 years old
A skilled software engineer who enjoys playing guitar, hiking, and cooking. Always looking for the next coding challenge.
Pain Point
Hate having to return to websites to check for new articles

References

GQ & Men's Health

These are the sample inspirations that were provided with the brief. Some additional sites were also given, but these are the main ones that the client particularly liked.

Sitemap

Categories centered

One of the pain points mentioned is the requirement for easy navigation across different categories of the blog. With that in mind, I ensured that the sitemap was organized accordingly.

Wireframes

Four Screens

The project brief specified the need for only four screens designed for both desktop and mobile platforms.

The Solution

Social
media style

The articles or blog entries are presented in the form of blog entries, which effectively addresses the pain point of making the content more engaging. Furthermore, by incorporating the option to "like" or "heart" the articles, readers can gauge the level of appreciation from others, providing valuable feedback on the popularity and quality of the content.

The Solution

Full categories
on sticky
navigation

This section addresses two of the pain points mentioned in the project brief: the inclusion of a navigation option to switch between categories at any time, and the ability to easily access the latest articles within each category. By implementing this feature, users will have the convenience of exploring different categories while also staying updated with the newest articles in their chosen category.

The Solution

Instagram feed

As part of the brief, it was requested to include an Instagram feed. Considering that the majority of social media posts would likely revolve around the latest articles posted on the website (though not exclusively from a marketing perspective), I wanted to avoid redundancy with the website's content. Therefore, I placed the Instagram feed in the footer of the website.

Check the Figma Prototype

Desktop Prototype
Mobile Prototype

Contact me and let’s work together!

Send an email
See Résumé
Home
About Me
All Works
Super 9VibzPneuvayBallroom
Intelisys GlobalAmerican EagleIntelisys Ads
© Rick Quiambao. All Rights Reserved.