Project Zero: Website Design - Site Branding

Designing a Marquee

It has been a long time coming since my last website update about focus testing. Now that I am starting to add more content to the site, such as my recent Syntax Comparison web project, it seems a good time to tackle some site beautification. This includes adding some new pages, redefining the focus of my site, and designing a proper marquee/logo. While I want to briefly go over the first two points, I have quite a bit to show about the design process of the new site header.


Identity Crisis

Shortly after this site was created, I wound up discovering the MITx platform and its first Massive Open Online Course (MOOC). This obviously hijacked a lot of my attention in the following months. However I would still like to write articles on gamification, design, and issues such as copyright/patten reform.

To that end, I've updated the about page and 'mission statement' of the site. This site now aims to cover four main subjects: technology, education, gaming, and social interest. These topics are further focused by looking at them through a lens of how technical design can be used in both technical and non-technical situations.

In addition to that page update, I have created a new tab titled "Course Reviews"  to document the MOOC's I've taken from edX and coursera. This page contains mini bio's for these courses and then list what I was able to accomplish while completing them. They will also contain links to the course's page, and to any review articles I may write for them in the future. I intend to do something similar for my project blogs as well.

With the site's content a bit more flushed out, it is time to deal with how the site is presented...

Artistic Development

It is long overdue that I update the site header image, as the previous default image and text was simply horrible. The only reason it lasted for as long as it did, was because I had been unable to think of a proper branding for the site...

There are many sites that use their name in their branding in a distinct manner. Such as edX or Ars Technica...

edX logoArs Technica logoUnfortunately, "Tech" or "TI" are both common and established in logo's elsewhere, such as Texas Instruments (aka TI calculators). For similar reasons I dismissed the idea of original iconography, as it is just to easy to run afoul of the stuff others have already done. My options for creating a distinct yet simple graphic to represent my site were relatively limited...

It was only recently that I had that Eureka! moment. Since I had re-defined the four subjects of my site above, I could create an icon for each concept and encapsulate them in a simple shape. Each of these subjects have a distinct iconography of their own, and it would be a clear way to show people what the website is about.

Early Designs

My first concept of this was to have a 3-D 'Diamond Square' of a pearl white shade, and then having the icons appear to be embossed on four sides of the shape. This is one of the points in the process however, where my ambition clashes with the limited time and tools I have available. While Photoshop is a great tool if you use it regularly and are aware of its functions and shortcuts, if you only bring it out every once in a blue moon it can be quite unwieldy.

Anyway to actual solidify my design idea and get a few backup options I started doing some sketches using a drawing pad and Corel Painter Essentials 4, which I use when I want to do some quick sketching.Marquee sketchesEventually I decided to go with the simple 2-D diamond above (after a few attempts to do the 3-d shape in Photoshop). One of the issues with the original idea was that with the 3-d perspective, two of the four icons would have significantly less space then the other two. When scaled down and rotated, a lot of the detail in the icons would be lost.

Iconic pieces

The next issue was creating the four icons for technology, education, gaming, and social design. (For this purpose, I relate the 'social' design to the improv in my sites name sake; as well as social engineering and social policy). Briefly, I considered creating the images myself, free hand. But in order to serve their purpose, the icons would have to have a very solid and identifiable structure that sketching wouldn't capture. I had also considered building each of the icons using pixel art, but gave that up as being too time consuming.

Of course the reality is, why create work that has already been done several times before. The four images that I was considering have been reproduced many times before; A computer or gears for technology, a graduation cap for education, a game controller for gaming, and the 'drama mask' for improv/social; And unlike other sites or business logos they were universal images, available for fair use. It was very likely I could find a free to use source that contain these symbols.

Eventually I found a great web design site that had a large number of icon resources that were royalty free. After looking over several different styles, I settled on the transparent 3d-glass icon set as it most represented the embossed style I was looking for and would be flexible to a number of designs. From this icon set I was able to pick out the following icons.

3D Glass iconsThese would do nicely! Next I needed to create a crest or symbolic image to identify with the site. After placing the images in a 2-D Diamond shape, I started wondering if I could associate a color with each topic, like I had in the about page. This would be useful if I could extend this use of color to quickly associate different parts of my site with their proper topic. I also thought  that color shading effects could potentially give the image a little bit of depth.

I attempted a number of gradients at various styles and directions. Many of the attempts to start at the center of the shape and push outwards did not work. They either did not blend well with each other, or they ended up distracting from the detail in the icons themselves. Eventually I had to break the icons up into four individual diamonds within the main shape.

While choosing colors, I couldn't use colors that were to dark or else the icon would not show up. I was also aware of the use of complimentary colors in design, though with the symbols being based on primary colors this wasn't to much of an issue. After several variations I wound up producing this...

TI-LogoThe gradient effect keeps the color lighter near where the detail is, adds a little bit of depth or interest to the image, and helps the icons pop out in their respective sections. Its not the most exciting or innovative thing ever, but it is something I was able to create specifically for this site. Now that I have the Icon for the site, I can use it to build a new website header.

The Marquee

Version 0.1 of the header...

Technology Improv banner 01This was just a basic Skeleton, trying to figure out how to position the Icon and the test. With the content being left justified, that left a huge area of negative space on the right side that could distract the eye. I attempted to add some shading to make it a little more interesting, but wasn't really satisfied with the result. I was also not a fan of the white background, as it give the impression that it is missing something.

Since my site otherwise has a black/blue color scheme, I decided to move towards that direction. Using one of the ideas in my original sketch where the diamond has a 'wipe effect' that originates from the center of the header, I attempted to create something a little more interesting.

After a bit of tweaking, the final result was this:

TI-marq-banner-02.gifI had briefly toyed with the idea of reusing the four colors from my new Icon, but it made the header a little too colorful. Inserted the above/below separating lines for the text (Again, discarding some attempts to play with color). Then added a high alpha hexagon image that gradually brightens towards the right, to match the hex background on the borders of my page; giving the right side some contrast while hopefully not being to distracting.

This was a huge improvement over the site header I've had for the last year, and finally gave the site an identity of its own using content I put together myself. As of this post it is the header I am using currently.

Of course, it is not without critique... the brightness of the Icon compared to the rest of the header makes it hard to focus on both the icon and the text at the same time when it is at full size. Also I had worried, and some feedback from a friend later confirmed, that the pastel colors in the icon might make it look a bit 'whimsical'. I feel this is even more apparent in the twitter page when I actually rotate the image to be squared, and it resembles a building block.

And several other variations...

At this point it is the details and subtlety that will make the biggest difference; and unfortunately I don't have the time to get accustomed enough to Photoshop to apply that kind of control. I did however mockup a few other variations to see if anything stood out as a definite improvement. The first set of these...

TI-marq-banner-05.gifTI-marq-banner-04.gifTI-marq-banner-03b.gifI tried to move from the bright pascal to a darker more solid color. I even played around with changing the icon borders from black to white, though this occasionally gave me trouble with white icons blending into the bright yellow square. All of these are potentially interesting alternatives in their own way; But they all have polishing issues such as the jagged line on the top right side of the Icon in the first image. I would have to settle on a particular alternative before committing to doing a final pass on the art.

I did end up producing a series of variations that matched my original 'embossed ivory' concept though. Each of which works to a varying degree against the dark blue background...

TI-marq-banner-06.gif TI-marq-banner-07.gif TI-marq-banner-08.gif TI-marq-banner-09.gif TI-marq-banner-10.gif TI-marq-banner-11.gifAdmittedly though, I was taking a pretty heavy handed approach to playing with Photoshop's large number of effects. At this point though I am throwing paint at a wall; and while it is pretty and distracting, I could wind up doing this for a long time without being productive. But... Shiny!!!

Site Future

I'll probably continue to play with the site header a bit more as time goes on. This may result in another iteration of the header design, or even result in switching it to pull from several different designs. Regardless, it is a big improvement for the state of the site.

The next major task for my website though will be finishing my next project, and then creating a centralized project page. There are also a number of articles to catch up on as well, and probably continual tweaks to the sites appearance moving forward. Of course, if you have any input on some of the header mockups I placed above, let me know!

Leave a Reply

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