Texture Factory Website

Web Design
Adobe Illustrator | Adobe Photoshop | Adobe AfterEffects
Hand Coded Using: HTML/CSS | Bootstrap
https://sites.millersville.edu/heblaine/Texture_Factory_Website/Device Mockups for Laptop, Tablet, and Mobile, shown on a factory backgroundScreenshot of Laptop Version of Texture Factory Website on a yellow/orange textured background

Overview

The concept behind this project was to create a website that showcases my process for creating my own digital textures. It walks the visitor through my process step by step from beginning to end. It also showcases the textures that I have created since they are incorporated into various illustrations and gifs used throughout the website.

Brainstorming

For this project, I knew that I wanted to showcase my process for making textures and the textures themselves. Since the primary goal of this website is to discuss my process, I decided upon the theme/concept of having it be a factory that "manufacturers" my textures. Once I established my concept, I moved on to creating my moodboard. Below are the moodboards I created that gave me inspiration and direction for this website.

Moodboard for Factory Themed Concept
Moodboard for Factory Themed Concept
No items found.

Sketches

After creating the moodboard I moved on to sketches. In most of my projects, I create a wireframe first and then I create any other illustrations or assets that I will need. This is exactly what I did for this project, below are my 2 wireframe sketches and then there are my machine and background sketches for the assets of the site.

Sketches of Various Machines
Sketch of a factory-themed background
Sketch of a Factory Themed Wireframe
Sketch of a Factory Themed Wireframe
No items found.

In-Progress

Once I had the visuals for both the site and its layout planned out I started work on creating the assets themselves. Below is the color palette, typography, and assets that I utilized in this project.

Color Palette, Typography, and Illustrations for Factory Themed Website
Illustrations for Factory Themed Website
No items found.

Final Piece

Everything has to be responsive these days and this website is no exception. I hand coded this website and set it up to be responsive on a variety of devices. Below you can find a link to the live website as well as some screenshots of the site on various devices and screen sizes.

Screenshot of the Mobile Layout for a Factory Themed Website
Screenshot of the Tablet Layout for a Factory Themed Website
Screenshot of the Desktop Layout for a Factory Themed Website