Case study: Building a Medium clone, from design to prototype
By: Ali Çorak
Tags: UX Design, Case Study, Prototyping, UI Design, App Development

Case study: Building a Medium clone, from design to prototype

The medium user interface is minimal and beautiful. I decided to challenge myself a bit. Clone the Medium app: If everything goes well, I will design it first and then code it. When I will design and code it, we will also touch on the question of how we can better manage the process between designers and front-end developers. In this article, we will focus on ‘how to design user interface better and more sustainable’.

Which Design Program Should You Use

It is not very important. I only included it because it was discussed a lot. Maybe this choice can prevent some people from starting design. There are basic programs for UI design; Figma, Adobe XD, Sketch, inVision… There may be little points where they all differ from each other. But they are functionally very close to each other. If you know one of them better, stick with it. If you don’t know any, start with someone, research about them, but be sure to try. You never know which one you will like without trying it. If a suggestion is needed, Figma can be learned more quickly because the interface is so simple. I am better at Figma, so my choice is for Figma.

Which Platform Will You Use and Where to Test

iOS and Android have their own recommended design guidelines. (Apple Human Interface Guidelines, Google Material Design Guidelines) Medium has complied with the system defaults/recommendations on both platforms. I do this kind of work on the iPhone 8. I want to test it on the phone that I have when I am coding.

After determining this, I will design the frames in Figma according to the size of the iPhone 8 and with the Apple Human Interface Guide. (Well, we’ll detail questions like how it will look on the iPhone 11 later)

Icons

Unfortunately, when designing, we have to do boring work first. Also, planning and scheduling will make our job easy in the later stages of the design process. For this reason, I first visited the pages in the application one by one and noted which icons were used. (There may be missed, we can add it to the design as needed while designing) Then I visited Medium’s website and checked to see if the icons are the same. Web and app are two different platforms. Not every icon in the app can be found on the web. But luckily I found a lot of them. I copied the icons in SVG format and pasted them into Figma.

Icons were missing. I first looked at Flaticon to complete the icons. I saved the icons that fit the Medium design in SVG format. You may want to consider how to find Medium’s specific icons on Flaticon. However, some common icons were fit with Medium. I’m making a clone application. There will be differences, I will try to make it as close to the real app. So I don’t mind small differences.

Finally, I drew the icons that I couldn’t find anywhere else and put them in SVG format next to the other icons. Although it seemed long, it didn’t take a long time (I would like to learn if there is a shorter method)

In short: Browse the app, note the icons, and get them all.

Colors

Design integrity is important. For example, each border color or the background color of each page should not be separate from each other. For this reason, we will group the colors from the beginning as well as the icons. And if there is a missing color like in the icons, we will go back and add it to the style guide.

There are 4 main colors in the dark theme of the Medium app: Black, white, gray, and green. I have to say that there are many shades of gray in the dark theme. The background color, icon color, border color, and text color contain different shades of gray. While grouping the shades of gray, I got quite confused. You will probably be confused about such a situation. At this point, the naming comes across.

Naming

Naming is required to avoid the complexity of the design. Naming is one of the things that will help us the most. If you are designing with a team, it is helpful to determine how you will use naming. Because there are different techniques. I will proceed according to the method I use.

While naming, first divide it into general headings, then subheadings. For example, ‘Bars’ can be the general title; NavBars, Tab Bars, Tool Bars, Status Bars can be subtitles. Under ‘Nav Bars’, there may be subheadings such as Home, Reading List, and Activity. In summary: Bars / Nav Bars / Home. A great tree method…

Likewise, we must provide integrity in the design by naming the colors. If there are many different shades under the basic colors, we can classify them from general to specific. For example Text Color under the general heading ‘Gray’. (Gray / Text Color)

A tip: Light Mode — Dark Mode has become quite common lately. Considering this, you can separate the top of the naming tree as Light and Dark.

Next; typography. In fact, from what I experience, most apps have uncomplicated typography schemes. Especially if the app is designed according to the Apple Human Interface Guidelines, it will be the easiest naming section. Different sizes of SF Pro Display Bold are used in headings and SF Pro Text is used in articles. You can solve the problem with simple names such as ‘body-heading’, ‘body-text’.

But as Medium is a blogging platform, it is a bit more complex typographically. The tree method can be used for Medium.

You can use the tree method from general to specific. Do not choose names like “Frame 1, Rectangle 2, #FFFFFF and SF Pro Display”.

Use of Frames

We can use the rectangle tool a lot with different program habits. Especially in Bars, we can start the design by drawing a box directly. This may not be so important for small and quick designs. But if we are designing a large-scale UI, we cannot be successful with using boxes. We have to use frames and make them a habit. Although it is not considered important on mobile, we will access responsive layouts by using frames. Let’s continue with creating components.

Divide into Pieces

Creating components is the basis of atomic design. It has a very simple logic; design once and use it everywhere. Look at the pages and you will see that the elements you will design are the same in many places. The same icon may have been used on 5 pages. The same tab bar may have been used on all pages. What will we do in this situation? Will, we re-design the same elements over and over? This is where component logic comes into play.

At first, you may not be able to figure out which elements are used over and over again. May all sound different. It takes some experience to understand this. (Here is the opportunity) Here we will do the opposite of the naming method. We will create the biggest piece of the smallest pieces. (specific to general)

For example, let’s first look at the icons, are icons used frequently? If the answer is yes, let’s make it a component.

Next, let’s look at the tab bar with the icons, are there more than one page? If the answer is yes, let’s make the tab bar as a component.

We will examine other elements with this logic. As a tip, you can start by examining the bars, buttons, and headers, probably those elements that are suitable for component creation. After determining and designing the components, creating a page will be like a puzzle.

Responsive Layouts

Move away from the manual. Content in frames will change. The number of rows and columns in the articles will change and we must prepare our design for this. Use the auto layouts and layouts grid features.

Split Pages

We have already designed all the elements on the pages. Now it is time to combine the components as in the app. Simple, like a puzzle. The page we call Homepage is also divided into sub-pages. The same goes for other pages.

We will also note the main and subpages by browsing through the mobile app.

Components

After separating into pages, we place the components on the page. You will see that it’s really simple. This simplicity provided us with atomic design. We can simply choose where to place which component because we used naming when designing it.

Prototype

The most important point. We separated and designed the pages to prepare prototypes. The point to pay attention; all buttons, tab bars, etc. should work. We should feel like browsing completely through the app. Preview the prototype based on the platform and phone you designed. (iPhone 8 in my design)

Also, make the page transition animations (slide in, slide out, dissolve, etc.) like the real app as supported by the design program. Bring all interactions such as on taps, on drag, hovering to the prototype.

Figma File

By paying attention to the details I wrote in the article, I shared the Figma design in the community, you can duplicate and review it and make your designs. Hope you like it.

Medium App Clone Figma File