Revamp of utopian.io website

Here is my work for the UI revamp for the utopian website.

I will be listing out the features of my works:

1. The website is one page design as I did not want the current style of website to be changed.
2. Bright color gradients have been used to make sure it looks clean and minimal.
3. Based on the menu links, the website is divided into divs which will be easier to navigate.
4. The length of the website is shortened as the existing one is too lengthy to scroll.
5. Detailed stroke icons have been used to make it look easier for users.
6. Most of the information is bundled inside a button with a outer link. The main aim to make the website look short and descriptive.
7. The mobile app screenshot is designed to make users bring more visibility for the website.
8. All images and icons used are open source which are attached in the attachment below.
9. All the icons are SVG file to decrease the size of icons and as well as to retain the clarity of icons.
10. Each divs is designed with a mindset where users are able to view the current div information in their screens.
11. The website is designed with the mind of bootstrap which is easier for developers.
12. All the necessary links are designed with a mindset that information can be accumulated in modal box.
13. Only one font is used to not differentiate between heading and paragraphs because I wanted to make sure everything in the website is readable.

Features

1. Necessary Logins Links in One Place
Single div for all the necessary login links so that user does not have to scroll down.

2. Mobile UI Screenshot
The mobile app UI is designed to bring more trust and visibility for the users. Will be working on mobile app based on this design comments.

3. Project tasks in a slider
All the open source projects tasks are listed in row of 2 to make sure users are able to see the most of the information in a single slider. Accessibility to find tasks will be easier.

4. Flat Colors for Each Task Categories
This is designed with all the flat colors and the most suitable icons according to the categories.

5. More visibility to the moderators

The moderators are the core behind utopian. So in order to give importance to them, this section is designed with bright colors and as well as information is shown in minimal.

**Working Files ** https://drive.google.com/drive/folders/167A9HG2ftzTikmH0_o4tjCSdmSn1Re9o?usp=sharing

---

Posted on Utopian.io - Rewarding Open Source Contributors

---