Cult of Distraction is a content site chock full of editorials and reviews by the very amusing and witty Nick Fisher. He’s a web developer by trade and a freelance writer for Mandatory, but this is his pet project where he gets to write about everything he’s passionate about – movies, video games, books, and other stuff he likes getting distracted by. The site is getting revamped where we want to improve the UX/UI by making it look more modern and intuitive to navigate around. My responsibilities involved creating the new design with a responsive layout, prototyping the navigation, and refreshing the logo. The development is still in progress, but the design itself is finalized to showcase.
The previous logo is little outdated, so I started redesigning this first. It retains similarities from the old, but I updated the look to be simpler and played with the negative space on the face and punctuation marks.
2016 Logo
New 2019 Logo
With the new layout, I started off designing the desktop view first. The article images will be the main focus to grab the user’s attention while the text is secondary, but prominent. The design is prepped to be responsive and easy to shift around for the other breakpoints. I wanted to keep the site mostly monochromatic with a red accent since the content images would be colorful enough by themselves. As for the tools used for this, the site was designed in Sketch and prototyped through Invision Craft.
The prototype for desktop is available to be viewed where you can check out the sections of the site and see sample reviews and editorial pages. Please choose between two options depending on your monitor’s resolution: Desktop Prototype & Desktop HD Prototype
This is the tablet breakpoint where the position/size of the tiles will be shifted. A prototype is also available for this, but I limited the frames and navigation since most of it has been exemplified on the desktop version: Tablet Prototype
This is the mobile breakpoint where the position/size of the tiles are shifted again. A prototype is also available for this with the limited frames and navigation: Mobile Prototype
After working on this project, I’ve been doing additional research on other prototype options to see what other features can be offered. I plan to experiment more and apply this to upcoming website/app projects when possible.
Acknowledgments:
UX/UI Designer: Angela Truong | Developer: Nick Fisher
