Dreamland Comics

The Finished Project

dream_fin

The Beginning

This was a straightforward project that I did in my off time. I spoke with the owner of Dreamland Comics in Libertyville about revamping his website. I asked questions about how he intended to use the website, any features he really wanted or that should be kept from the previous version, and any other concerns or thoughts.

He asked to keep some of the general things that a store should have on their website: hours, location, contact info, and an area to place posts.

Here is a screenshot of the original website:

p_dreamland01old

The site would be considered dated by today’s standards.

The Process

I knew that I wanted to incorporate responsive methodologies within the design but didn’t start doing any sketches until I did a competitive analysis of nearby stores. Comic stores tend to have their own unique personality and offer differing levels of service. Some stores sell stock directly through their website, some offer forums, some maintain a blog, and so on. After going through nearby stores and some bigger stores, I followed up with the owner to confirm the level of involvement desired on the site.

I did some sketches at this point but they were extremely general and just blocky. I explored doing a 2 or 3 column site but with the lack of new content, I settled on the current look. A carousel as the header, navigation below it, and room for news posts at the bottom.

I set about coding the site, using Brackets, and making visual assets as needed: taking pictures of the store, custom wallpaper, cleaning up staff portraits. I am extremely proud of how it has turned out. Some features I incorporated:

  • Site is responsive with foundation
  • Use of javascript/jQuery to address the use of noScript or disabled javascript. No loss of functionality.
  • Custom javascript/jQuery to display current day in Store Hours section
  • Custom javaScript/jQuery to randomize icons on the ‘New This Week/New Next Week’ modal windows.

After establishing all of the individual pages, I presented the Work in Progress to the owner and store manager to identify any areas that they wished were changed. Some suggestions here were to add some additional personality to the staff pages, clean up some of the contact info, and change the font on the carousel. This lead to an interesting problem.

I was told that the store font is Catwoman. Unfortunately this proved to be an interesting issue. I went back to work and quickly realized that Catwoman was not the font they wanted.

At the next review, they brought up the lack of Catwoman on the header and I explained that I was fairly sure that no one ever wanted to use the font from a movie that won 4 Golden Raspberry awards. After searching through promotional material they found that the font they wanted to use was actually…

Catwomen.

After I corrected the font usage, the owner suggested we get something else as the background as I had used a subtle pattern. So I went back to the drawing board, did some more research, spent some time in Photoshop and made the background the site is currently using. It looks fantastic. Let’s take a look at the…

dreamland_font

The Top: Catwoman / The Bottom: Catwomen

Conclusion

This project really illustrated how crucial it is, as a designer, that there is someone to critique your work and offer feedback. I think the site looks much better with the new background.

Update – Spring 2016

I was contacted about providing some updates to the site to deal with a change in personnel and ownership. I asked if there were any big changes that had developed since I completed the initial work. Beyond some little things, it was requested that a mailing list be incorporated in some manner.

It’s been over a year since I originally made the site and my skills have clearly grown. I thought it would be a great chance to update various areas of the site to improve usability. In no particular order, the following changes were implemented in addition to the changes requested.

  • Much greater integration of responsive methodologies and breakpoints
  • Fleshed out the SEO, refined it
  • Cleaned up Staff section to better reflect best practices and design principles
  • Significant work to provide more info on-screen and retain readability
  • Incorporated analytics into review of the site, looked for areas to revisit

Unfortunately, as it tends to go, I do not know when the site will be updated.

Leave a Reply

Your email address will not be published. Required fields are marked *