Indie Game Darling

2019

Overview

Indie Game Darling is a fictional news company that reports on stories, events, and updates on the independent gaming community. A mobile responsive website created for my web design certificate class using HTML, CSS, and some jquery for the mobile menu. All articles and images used in this project were for educational purposes only.

The Problem

The assignment was to develop a periodical website with three types of pages – a home page, a list page, and an article page.

Users & Audience

I aimed to create a website that would appeal to the gaming community, specifically the subsection of independent games. Ideally, users of my website would visit Indie Game Darling to read the latest news and updates instead of coming through other websites that have a larger focus on all things video games.

Competitor research

I researched the website design of possible competitors to Indie Game Darling. The sites that I analyzed were Polygon.com, Indiegamesplus.com, and Gamespot.com. I noticed that their sites were very minimalistic, as not to distract from the content. However, each site had an accent color that seemed to give life to the content and was consistent throughout.

Design Solution

I chose to lean towards a minimalistic layout and use a pattern with shades of green, very close in hue, as the accent color. The hierarchy was determined using a green background for the featured articles, size and positioning of articles, and the size and color of the titles.

Conceptual Mock-ups

Below are desktop and mobile concepts assembled in photoshop.

Revisions

The initial concept was simplified even further. Certain elements like the brackets were removed and the position of articles was rearranged.

Coding

I assembled primarily using HTML, CSS, and JQuery. It was also coded for mobile responsiveness.

Outcomes

The screenshots of the final site are shown below.