Repository | Task request: design an article preview for SteemMakers

---

Details

SteemMakers is a community which focuses on uniting, helping and rewarding makers and DIYers on the Steem blockchain. You can find more info about us and how to contact us on our website www.steemmakers.com.

In the task request @jefpatat was asking for the design for the container block of each article preview, but an entire page design would be highly appreciated. So I took the complete task and created:

• Top section redesign with user profile pic.
• Featured article preview.
• Normal article preview.
• Medals (gold, silver and bronze).
• Exclusive icons for Vote, Comment and Resteem.
• Sidebar.
• Footer.

---

Here is the final result:

Final files for medals

Featured/gold	Gold	Silver	Bronze

Medals evolution

My first proposal included a STAR as a symbol of excelence in the medals but I got feedback it would be better to include STEEMMAKERS logo on them to make them more recognizable as part of the project.

You can see below how they were changing according to feedback given and including my proposals to get to the final result.

_{Featured posts medals, showing the final version to the right}

^{Normal posts medals, showing the final to the front}

---

Benefits

SteemMakers is getting a professional look, with a website that is clean, modern and friendly.

Having a Featured posts area encourages the content creators to do even more effort so they will have a special place in the top of the site.

All the information is ordered in a intuitive way similar to other steem platforms but I made exclusive icons for SteemMakers so there aren't assets used from other sites.

Comparison

---

Proof of authorship

Wireframe rough idea:

Most important page iterations:

Sneak peak to layer panel:

---

Tools

The entire design was created with Adobe Photoshop CS6. Each section is grouped in a properly named layer.

---

Original files	Google drive folder. Contains PSD and PNG files.
	Licensed under a Creative Commons Attribution NonCommercial 4.0 International, commercial use allowed only for the project or by project owners.
Proof of work done	https://github.com/fabiyamada
Communication	First part was made on the Task Request post, later on Discord with jefpatat and podanrj (click on their names to see the screenshots).
Pull Request	https://github.com/JefPatat/SteemMakers/pull/22
Image sources	Placeholder images for posts are CC0 from pixabay.
Fonts	Rajdhani and Lato, both with OFL.