Responsive Web: ArtFashion_Mag
Idea
Create a responsive website that enables fashion and art-interested people to stay informed on the latest trends, fashion shows and art exhibitions.
Side Note: This projects purpose is to showcase my UX/UI Design skills. I do not work or have worked for any brands/artists mentioned.
Challenges & Goals
Create responsive and accessible article pages with different modules and features such as Inline Video, Image Galleries and Affiliate Integrations that help the users decide where to shop latest trends or which art exhibitions to visit.
Creating a seamless switch to different devices
Designing an Article Page that conveys the brand and ensures high user accessibility
Designing multiple modules for the article pages like galleries, inline videos, and affiliate placements
Providing a clear structure on all devices
Providing additional contextual information that the users expect to find, such as related articles and recommended content
Business Model & Goals
The business model should consists of different forms of Ad Placements and Affiliate Links within the Website and Newsletter. Possible placements are within the content of the articles, before videos and within Newsletters. Another possible model is to enable a Paywall after a user has read more than three articles per month.
Business Goals will focus on boosting Affiliate Sales, generating Ad Impressions as well as generating Newsletter Sign-ups.
User Stories
Structure and User Flows
Primary Destinations within Top Navigation: Home (Logo), Articles, Editorial, Video, Categories, Search and secondary Destinations: About, Newsletter, Advertising, Contact, Privacy & Terms, Social Media Profiles.
Hub-Pages (Homepage, Categories) and Modules such as Recommended Articles, Related Article, Tags, etc., to ensure the users can reach all relevant destinations within a few clicks and without using the navigation itself.
Functionalities such as the Menu, Search, Link to Home (via Logo), and Footer Menu is available on every page.
The responsive Website maintains the same structure on all devices, the only difference being the Top Navigation being placed in a Burger Menu on Mobile Devices.
The Flow Chart for Primary Destinations:
Main Screen: Homepage
Tradeoffs and Learnings
Main Screen: Article Pages
Tradeoffs and Learnings
Color Palette
ArtFashion_Mag’s brand is artsy, quirky, modern, edgy, urban, and straightforward, emphasized by a muted background color combined with lighter highlight colors for featured content.
I am using a muted palette with a muted blue-grey as a background and three matching highlight colors for different content types.
Typography
I chose the font pair Space Grotesk and Inter and am using Space Grotesk as the highlight font for all types of headlines and labels. Inter is used as the body font and for secondary text such as the meta information on article cards.
Space Grotesk conveys the artsy and quirky aspects of the brand with its angular letterforms with more closed-off counters and uniquely feeling details such as the stroke of the “y” or the slashed zero. Used in bold font weight only, it is edgy and catches the attention.
Inter, on the other hand, is a clean and modern body font for a highly legible and accessible due to generous spacing and open counters.
Iconography
To match the angular letterforms and modern branding, I use the sharp version of the icons from the Material Design Icon set. Since I do not use any rounded corners or elements, these fit the brand in the best way.
For example in the Search Bar (Maximized Search Bar with Autocomplete Functionality on 1512px side width):
Final Prototype
I developed a Mobile and Desktop clickable prototype with my final design in Figma.
In Figma I added all necessary breakpoints and how the layout adjusts in each of them, including tablet/iPad versions. I also created the hub pages "Articles", "Videos", "Editorial", and "Categories" as well as the Search. A next step would be to create the Newsletter Sign-up and company related pages such as "About".
Do you want to check out the prototypes? Let’s meet!