My process behind creating a website is hardly unique or out of the ordinary, but I like to think I've taken notes from all the right people while developing my habits. So, here's a peek into my steps while creating a website, with zlockart.com as an example.
Concept
The formation of ideas and overarching themes for the feel and design of the site.
Starting off, I knew I wanted to not just create a website, but a brand for myself. So, I started with a logo before conceptualizing the site. I always loved my last name and thought I’d have some fun with it. (I could have copied Seuss and been behind a clock, but it’s been done.) The color scheme was derived from there, starting with orange for the gold on the lock and a desaturated navy, which happens to be my favorite neutral to pair with white or other bright colors.
Z-lock? Oh, I get it...
Stylistically, I knew I wanted to go a little retro, but with an architecture and construction theme. I was working with the tag-line “Web Architecture. Web Design. Web Construction,” but that was quickly voted out. However, the theme still applies, since I love to create and construct, I’m in the process of building my career, and my father has worked in construction for about 30 years.
This tile texture is from www.cgtextures.com, a favorite go-to for inspiration and assets.
Take all of that, throw in Adobe Photoshop, lots of fussing with images and patterns (I’m a sucker for patterns), and you get my inspiration for the site. This then advanced to the creation of a mood board which further fleshed out my color use and font choices.
Fun Facts:
Most of the original fonts had to be replaced later in favor of freeware fonts available for use with @font-face. My favorite resource for web fonts: www.fontsquirrel.com.
Also, I can tile a bathroom.
Architecture
The intelligent organization of information and content. Ease of understanding for all users must be taken into consideration.
For the architecture of the site, I really wanted to keep things simple. I condensed down my content into as few separate HTML pages as possible and further condensed those divisions into just a few distinct sections per page. I found there was no need for an “about” page when I realized that I’d be going into much more detail about my experience on another page and I would have a small blurb on the home page. Besides, who wants to write more about themselves than they have to? (Not me.)
Resulting Navigation
(back to top)
Design
The aesthetic planning and layout of the site.
I spent quite a bit of my time in the initial stages of the site on the design. Just part of the process included: creation of the logo and wireframes, pulling assets from the mood board into my layout, selection of fonts (not just for looks, but for ease of use on the web), and of course selection of colors and developing the feel of the site. Everything was pulled from scratch to create a consistent and cohesive style and a good reflection of my work and the work I hope to do in the future. Oh, and it has to show my other work too.
Fun Facts:
The design was made with all screen sizes in mind. The primary content was kept within the standard 960 pixel width for smaller monitors and the patterns and banners were extended to the width of the screen for visual interest on larger monitors.
