Web Design

i make laurbits.com

Ever wonder how websites are made or how a typical website project goes? Here, I’m going to walk you through the step by step process with one of my most recent clients. The entire process took around a week but most of the time was spent writing emails and waiting for feedback. The entire site was designed, coded and uploaded in 2 days.

Creative Brief:

Project Name: laurbits.com

Project Overview: A portfolio website for an artist with an anime style of drawing. She wanted to redo her old website to showcase her stuff better. She wanted the site to have the following features:

  1. Easy to update blog
  2. Comic/Portfolio with LightBox
  3. Easily extensible framework for when she opens a shop/adds new links
  4. Something that highlights her info (since she considers herself a relatively unknown artist)

After looking over her feature list, this was clearly going to be a dynamic website that would have to use a CMS (Content Mangement System) with some tweaking so she’ll be able to update things easily. It’s going to need some fancy lightweight (javascript) graphic effects that will be integrated into the CMS and of course, a solid design to showcase everything. I outlined what the project would entail, my own suggestions for improvements and I gave her a quote for my services. After settling on a price (base price without any additions), I gave her an overview of what I would be responsible for and she paid a down payment. Now the fun begins!

Here’s what I was dealing with:

This is the original site. It’s not bad on first look. The colors are pleasing and it’s functional. However, the typography is not so great and there isn’t enough spacing so the informational hierarchy is a bit too bland and everything blends into each other. The eye is drawn to the important parts of the site (her work and the navigation) so overall it’s a mild success design-wise.

Now, here’s the big problem. The entire thing is a static website. She has her own blog (hosted elsewhere which is another issue) which is linked on the site but other than that, everything appears to be hand coded. This means that in order for her to update her website, she has to go through her website, open an ftp client, get the file she wants to update, code whatever she wants to update in HTML and CSS, put it back onto the website and pray to god that she hasn’t missed a stray html tag or misplaced a link. It’s much worse if she wants to add new features as she has to make an entirely new file and code the new page from scratch and then upload that onto the server. And don’t even get me started on making galleries. You’d have to resize every single picture individually. It’s a nightmare hand coding things from scratch ESPECIALLY if you don’t have a computer science or programming background. This just isn’t going to cut it user wise so I’ll have to build up a system for her.

First things first though, I have to create a design for her to look at before I can even start coding. This actually brings me to one of my favorite parts of the website building process. Mockups.


Here’s the first image that I came up with:

I copied her palette but I added orange to spice it up. It also helps draw the eyes to the important parts. But I still kept the palette fairly neutral in order not to upstage her work. Her portfolio pieces were mostly less saturated in color so I purposefully tweaked the saturation a bit and picked brighter colors for better contrast. I highlighted the important parts (her social media feeds to keep in touch with fans and her artist bio). I also fixed the spacing problem and the font issues.

Problem was that she no likeys ๐Ÿ™

  1. She originally liked the color scheme but thought that perhaps the color was maybe even a bit too neutral. She wanted to make a bigger statement with it.
  2. The social media buttons were horrible. She didn’t want them so prominent in the design.
  3. Most artists have a separate page for info and she wanted the same for her site. She thought that her info was too overpowering and not important enough to warrant that space especially since she’s not so well known.
  4. Her work was not highlighted enough.
  5. Hated the round corners. Looked too template-ey

So she wanted to de-emphasize information on her website and pick an entirely new color scheme. She stated that her target audience and demographic is:

” female, around 14-25 and my last poll on DA kinda skewed to this demographic too. They generally understand and appreciate manga, like the urban fantasy genre and appreciate smart, savvy, well-written stories about interesting female characters. (Joss Whedon fans, too, I hope!)”

Whoo Joss Whedon! *coughs* anyway… Because of that, she wanted the site to cater to girls but without being too girly. She did not like pink but she said it would be alright if it were not the dominant color.ย  Being an artist, she went color shopping and later in the day, she sent a list of palettes that she liked. Usually, I do most of the palette picking so it was great that she had an idea of what she wanted. I looked over the colors she picked and put them into layouts to give her a better idea of what she was choosing. Her palette choices are pics 1 through 6.

Looking through them and fiddling with settings, I suggested that palette #1 and palette #6 would work great for her site. The rest were either too girly or too derivative of popular websites. I then gave palette #7 and #8 as my own personal suggestions for the website.

She had fallen in love with and chosen palette # 1.

New problem, the color scheme is masculine and I have to feminize it somehow. She suggested to give the site a grunge texture or feel but I felt that that would be piling masculine upon masculine so I suggested a bokeh type texture/background. She loved it so I set to work again! Here’s what I came up with:

She loved it! Phew. Only some minor adjustments this time.

  1. She thought that the highlight box was much too big for her work so she wanted to shrink it.
  2. She loved the new social media buttons because they were prominent but not overpowering.
  3. She was worried about consistency so she wanted to change the font of the menu to match with the post and sidebar headers

After she agreed to the final mockup, the custom background and changes, I sent her a contract for her to digitally sign and now we’re in business!

Here’s the finished website template:

Now comes the harder part. Coding!

She already had a website account and domain set up so she gave me access to that. Now to work on getting that Content Management System in place… I specifically chose WordPress for the site since it’s a pretty robust CMS. It’s also probably one of the most intuitive CMS’s out there for new users. You don’t have to be extremely computer savvy in order to add things. You just need to know how to work basic documents. Sort of like MS Word. Here’s a preview of what you see when you sign onto your website:

instead of:

I mean seriously. I don’t want you guys stuck with that.

Now, I know what you must be thinking. I’m making it so easy for people to update their own websites, isn’t that sort of dumb? I mean, then they won’t need me anymore to maintain things. Yes, this is true. Things are much MUCH easier for them to update themselves but I believe in user functionality so it just needs to be done. I’m not going to give my clients a crap website that they can’t do anything with. Besides, if there are more complicated features to add, I’m pretty sure they’ll keep me in mind for it ๐Ÿ˜€

After that, I created 12 or so wordpress template files based on my own framework. It was coded in PHP, CSS3, Javascript, some HTML and whatever buzzwords it is that you kids are into these days. Here’s a peek at the code!

(yes all those open windows are codes a basic site (can you imagine if you had to do this yourself? Thank god you can hire peons and code monkeys like me ;D )

Some technical features:

  1. Support for all popular screen resolutions and browsers
  2. Dynamic php generated content such as (comments, categories, posts, tag, etc.)
  3. Templated pages for easily extensible website frameworks
  4. Easier to use picture show case tech. (Like the one on this site!) Plus slideshows and animated transitions. OoooOOOOoooo. All you have to do is upload pics
  5. User database and registration system

After I was done, I offered her some of my extra services, such as Google Analytics (website statistics) set up, dynamic Search Engine Optimization, Virtual Shop and Check out, ad space and rotating ads, Google AdWords and Adsense and maybe some extra custom templates for various pages but she said no. ๐Ÿ™

I put in a very basic SEO for her anyways. She said she didn’t need it but it’s something that you just really have to have in this day and age. How else will Google find your stuff?

Sent her an electronic invoice for the received work, uploaded it to her servers and signed off on rights. She graciously let me use the mockups and the images for my portfolio site though so yay ๐Ÿ˜€ All in all, one of the funner projects. Here are the site mockups with the bokeh background for her site. You can use it for desktop backgrounds and stuff but don’t use it for anything else!