# 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.

![Dygest mockup displayed on a MacBook on a table](https://i.ibb.co/rwJ4d7J/Space-Gray-Macbook-on-table-min-Custom.png)

# Design

## Website Components

![Dygest story preview](https://i.ibb.co/5jYJ96j/pre-Story-Preview-min.jpg)
*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](https://i.ibb.co/WnSmW9K/pre-Story-Showcase-min.jpg)
*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 mockup ](https://i.ibb.co/vL5y93C/Google-Pixel-2-XL-1-min.jpg)
*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.

![](https://i.ibb.co/23Y2Hx9/Desktop-1-min.png)
*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](https://twitter.com/samisoffiine), and [view my Portfolio here](https://samcross.digital/portfolio).

----

Thank you for viewing! You can also [view this post on Behance](https://www.behance.net/gallery/100127201/Web-Design-Dygest-A-Medium-Clone).

Sam Cross

Dygest - A Medium Clone

# Introduction

Yeovil College asked me to design and develop a website for their upcoming BTEC National in Esports course, starting in the 2020-21 academic year.

The website was designed to be familiar to users of the main Yeovil College website, but with some added touches. It was developed with Next.JS, enabling Static Site Generation (SSG) with ReactJS. I used many modern technologies to ensure it was extremely fast - not just on initial page load, but throughout its use.

# The Design Process

![The original design displayed on a Macbook](https://i.ibb.co/VMrcS8p/Website-Design-Mockup-Space-Gray-Macbook-on-table-Home.png)
*The chosen single-page design*

I began by creating three wireframe designs for the website, each with a different concept. The first wireframe design is the design I selected for the final product. The other two experimented with side-scrolling and a multiple-page experience. I deemed multiple pages excessive as there isn't a large amount of information displayed on the website, and side-scrolling was ruled out as it would've been too unfamiliar for users of the Yeovil College website - a large majority of these users are parents between the ages of 35-55.

## Single-Page Design

![Another mockup of the design displayed on a Macbook](https://i.ibb.co/YWRJjYS/Website-Design-Mockup-Space-Gray-Macbook-on-table-Subject.png)

The single-page design was chosen as it proved simple to use, and the site didn’t require many individual pages due to the small amount of information presented. I did consider expanding the site by adding further information about the course on separate pages, but this wasn’t necessary as the information is already available on the main Yeovil College website. The single-page design is more than sufficient for its purpose – displaying information about the course and allowing visitors to apply to the college.

## Website Layout

The layout above-the-fold, the first thing users see, was influenced by the [Tesla](https://tesla.com) website, and microsite experiences. A full-page hero with an eye-catching image background was placed at the top of the page - this drew attention to a call-to-action button in the centre, which served to increase enrolment numbers.

> Hick's Law was considered throughout the design - few options were required, so I only presented the most important links, relevant to the current section.

### Responsive Design

![Mockup showing the website scaling down to mobile width](https://i.ibb.co/FJjbdyJ/Website-Design-Mockup-Mac-Book-and-i-Phone-on-white-table-with-coffee-The-Course.jpg)

Since this project, I've built my designs mobile-first, which ensures a great experience across all device sizes. This website was built desktop-first, and tablet/mobile sizes were considered afterwards. However, the website scales down very well to these device sizes.

### Encouraging Scrolling

All the content on the website is presented on a single page. The design encourages the visitor to scroll down for more information, and doesn't overwhelm them with too much text inside their browser viewport. In the page header there are links to the various page sections, such as the course and subject information sections.

### Links and Information

There are links to the enrolment application, and course information and campus offerings on the main college website, throughout the page. These links allow the user to easily explore the regular college site. The purpose of the website was to showcase the esports course and encourage visitors to enrol – a main focus of the design process.

## Layout Revisions

Initially, the sections for course and study information were split 50/50, with one side being dedicated to an image, and the other to text content. I revised the design to make these sections taller, shrunk the images to form borders, then shifted them upwards to create a sense of three-dimensional space. This design allows the section type to be placed underneath the image, with the section heading displayed alongside. On smaller screens, all the elements shift into a single column, which ensures a consistent experience across devices. The images serve to separate each section and catch the attention of the visitor.

# The Development Process

The website was developed with modern web technologies. I used ReactJS to build the website, as it allowed me to split the website into reusable components. SCSS was combined with CSS modules, allowing nesting of selectors and the use of variables in stylesheets.

## Content Management

Another benefit to the use of React is the ability to inject data directly into a page, from various sources. As the website was going to be hosted by the college (a plan which later didn't come to fruition due to the Coronavirus pandemic), I wanted to make it easier for the college IT staff to hook into their own Content Management System (CMS). This could have easily been enabled with the same methods I used on my own [personal website](https://samcross.digital).

## Performance and JavaScript

Though I used a JavaScript framework to create the website, I did not want any JavaScript code to be run on the client. For that reason, I chose to migrate the website to Next.JS, a framework which enables Static Site Generation (SSG). Building the website with Next.JS meant that the page served to visitors was simply HTML and CSS - *no JavaScript at all*. This makes the website super-performant on all devices.

### Images and WebP

The website itself is fairly image-heavy, so I wanted a way to keep the page size and render times as low as possible. For this reason, I used the new WebP format to serve images, and fell back to compressed JPEG images if the client didn't support the format (at time of writing, only Google Chrome supports WebP images).

## Deployment

I deployed the website on [Netlify](https://netlify.com), and you can [view it here](https://yeocol-esports.netlify.app). Netlify offers a very generous free usage tier for static sites, hosted on their super-fast CDN.

----

**Update**: The design writeup for this project is now available on [Behance](https://www.behance.net/gallery/99698121/Esports-at-Yeovil-College-A-Microsite).

Thanks for reading! Please check out my [portfolio](/portfolio) and contact me for enquiries.

R. Wood

Esports at Yeovil College - A Microsite

# Introduction

During my second year of studying at college, I decided it was time to settle on a career for the future. I'm passionate about great design, website technologies, and networking, so web development was the perfect fit. I decided to launch my online marketing and web development business, Sam Cross Digital, in June 2020.

# The Logo

![Business card concept design](https://i.ibb.co/D4cr1bh/Sam-Cross-Business-Card-2020-05-Display.png)
*A previous concept design for a business card*

Before anything else, I decided to create a logo for my brand, which I now use across all my social media channels and my website. The logo was initially conceptualised as a hyperlink icon, shaped into an "S". I turned the icon on its side to further enforce the concept of a letter, without losing the original meaning.

# The Website

![The Sam Cross Digital website homepage](https://i.ibb.co/bByYG7V/image.png)
*The Sam Cross Digital homepage*

I designed a website using Figma, which used a friendly design with curved edges on most elements. The design incorporates my brand colours of magenta and purple in various places, such as buttons.

![A button on the website](https://i.ibb.co/nPKVmbG/image.png)

## Development

The website is built using Next - a JavaScript library which enables Static Site Generation (SSG) with ReactJS - and deployed on Netlify (with Heroku hosting the Strapi backend).

----

Thank you for reading! Please check out more projects on my [portfolio](/portfolio).

Projects

Dygest - A Medium Clone

Esports at Yeovil College - A Microsite

Sam Cross Digital