Introduction

Dygest is a clone of the website Medium. I wanted to create a new reading experience based upon the simplicity and style of the original Medium website.

Design

Website Components

Dygest story preview

The story preview is a simple black-on-white element, with light padding around the edges. The author is displayed prominently with a large, square image. I dislike the way Medium gives little attention to its authors, so I wanted to ensure viewers knew the author of an article before they even opened it.

Dygest Showcase story preview

The element above is used for Dygest Showcase stories. It follows the same design principles as the above element, but the author is displayed even more prominently, and there is an image in the background.

The element's design also has a lined paper effect throughout the text block - this simulates the writing of the article on paper.

Responsive Design

The website was designed mobile-first, and then scaled up to desktop size.

Dygest - Mobile high-fidelity design

Low-fidelity wireframes were created for both mobile and desktop, and the final high-fidelity mockups, displayed above and below, were based upon these.

Dygest - Desktop high-fidelity design

The Future

I'm planning to turn Dygest into a full-stack web application with Node.js, React, TypeScript, and a few other technologies. If you would like to read more about this, you can stay updated via my Twitter, and view my Portfolio here.

Thank you for viewing! You can also view this post on Behance.