Mockup_ Web Development

Web Design / Web Development

Tools: WordPress, Photoshop, Illustrator, Sketch

Kersversations is a personal blog that I redesigned. The client wanted me to not only recreate their WIX website but create a better user experience. I conducted a site content audit, created new wireframes and mockups. I also found that the blog was missing some development essentials that would help with their workflow. I created a custom dark WordPress theme, with features that enable the Instagram feeds to load automatically. I plan to use a page builder like Elementor to speed up the development process, which will also be a great feature to have for the client to be able to update their website. The client provided all website content, images, color palette, and logo.

Old Website

Kersversations-Old Blog

New Website

DESIGN

The client didn’t necessarily have an official color palette or font face. I took the colors from her logo and created this color palette to the right.  Most of the designs are primarily based on the original design of the blog website. I loved the dark theme and chose to use it as the focus on the design.

Color Palette

Typography

H1

Avenir Next - Bold

H2

Avenir Next - Reg

P

Avenir Next - Light

Wireframes

The client used a design from Wix and needed a site that was user friendly and with a few extra features. This theme would be the dark theme where the focus is on the black background. As you can see in the wireframes below, I wanted the logo to be in the center and divide the navigation menu in half. The original site didn’t really have a logo. There was a tagline that was displayed on the home page instead. The client stated they wanted their social media to be visible on multiple pages, so I created a space for the feed on the home page and the about page.
Kersversations Wireframes 2
Kersversations_Mockup02

CONTACT ME

Like what you see? Let's get in touch...