UI/UX Design

Kliqqi template redesign

Introduction

Kliqqi formerly known as Pligg CMS is an individualized content management system that lets you to easily create a social network or online social community similar to Facebook, Reddit, or Twitter,  where users can publish articles, vote on them,  leave comments, and share them with friends & family.

Project Goal

My goal is to redesign their default template which is using bootstrap, make it more user friendly and intuitive. There were no restrictions such as color scheme or using an existing style.

 

Tools & Technologies

This template was built using Photoshop, html5, css3, javascript, php and smarty. For responsiveness I kept the existing framework which was Bootstrap and Google Material Design for UI components.

 

User Interface

– Home Page

This is the initial design I started from. My first goal here was to find a better color scheme using 2 primary colors and 2 secondary colors. My second goal was to remove all the content which didn’t add much value.

kliqqi home before

 

This is my first iteration of redesigning the home page.  I wanted the header to be clean and simple. I only left the important actions visible in the header, while everything else was moved into a drop down menu. The welcome message gives the design a bit of personality and makes the website more friendly.

Each story has now an image to give users a preview of what the story is about and each story is nested into a individual card which makes it easier to read.kliqqi home after

 

– Profile Page

The profile page was very basic and it only had few tables with details about the user.

kliqqi profile before

 

Since there was more space horizontally I decided to move all details about the user in a left sidebar and keeping the details about the profile in a separate container. Another goal was to remove all the tables and replace them with lists not just because they didn’t look good but also because they were used in the wrong way and are not meant to be used for layouts.

 

– Login Page

 

I decided to remove the last section for the register and replace input fields with the Google Material inputs

 

– Register

 

For this page I replace the input fields with the Google Material inputs and split the registration form in 2 columns.

 

– Story Page

For the story page, I kept a similar style to the pages above and the same layout structure that was used in the original design

This is everything for the moment. More updates coming soon!

1 comment