A documentation of a developing website

That's right. This is the 3rd redesign of designLegion. As the company progresses and we define our identity, I felt a need to have a design that reflected those changes... Innovative, leading, and different while keeping readers and clients in mind. A fresh breath of air in the web design community.

See older versions of designLegion here

So what's new?

• Identity/Logo redesign
• User interface redesign
• Streamlined xhtml and css coding
• Concise, simple homepage with updates listed
• Improved, streamlined rave section:
• Expandable/collapsible menu systems
• Browse articles from the calendar
• Recent post listings
• Login from the main rave page
• Scroll saving browsing for the Linux page
• Subject based contact form

DLv3: Concept to Launch

What I didn't like about the previous version of designLegion was the rigid two column structure. Over time, the layout lost its appeal... I wanted something that used the page more, was more flexible and not "contained" within walls. Like a painting, you're limited by the canvas "walls" and media you choose, so realistically I have my limitations on this. So I set out with my canvas and brush, (or better known today as Photoshop).

Concept in mind

Well here it is, our beginning... you have to begin somewhere right? This composite was created within half an hour and drew its inspiration from a variety of sources:

Composite 1

The only formatting kept from version 2 was the thumbnail style

Composite 2

Some of the biggest leaps are evident in composite 2. The real estate to the left has been made use of. The main heading and sub menu have been transferred here from the middle section. The main navigation has moved from the top right to the old sub menu position, the horizontal bar along the bottom. What is now the old logo was added to the top right corner, while the company name has been shrunk in the middle right box. Lastly a background image was added to the page body.

Composite 3

Here we take a first look at the home page style crafted from the previous composites. The colours are different as well as the main heading layout, this being a recurring feature of the site depending on each page style. Here we added menu titles in the left column and a border around the main mid-section to draw the user to that area. Finally, the body background image received more of a gradient.

Composite 4

Here, many changes were made to the look and feel of the site rather than the layout. The main image was flipped vertically, which flowed better with the layout. Colour was added to the mid section as everything was dull and boring; also a smoother transition was added from one end to the other, using gradients instead of blocks of colour. This added greater consistency and flow to the whole page. Another gradient was added to the body background image to further bring attention to the mid-section and navigation horizontal spans. The two now pop much more effectively. Text has been removed from the mid-section, leaving the main headings to be vertically centered. This enabling the viewer to quickly see what the page is about. Finally, thumbnail icons are stylized to be cleaner and "action" images where added to the menu.

Final Composite

In this final (and active) composite, the site was streamlined even further. The new identity/logo design was added and moved to the top middle area. This replaced a summary heading which was redundant or movable to the main heading section. A flash animation replaced the mid-section images. This filled the void of having content on the homepage while not being cluttered in a small area. The flash intro immediately notifies the viewer what the site is about and what we do. Also, various updates cycle round where the thumbnail icons once were. Finally, the images in the animation were brightened once more to be more visually appealing.

Final words

Designing a site is hard in many ways, most notably, transferring a concept from the drawing board into a working product. One of the best methods to remember is to leave the design and come back to it after a few hours or even days. Doing this enables you see improvements because you loosen the familiarization from viewing it consistantly. Also, if you don't like your design, work with it before discarding it. You can build on an existing design to get the look and feel desired.

Designing my site has been a great pleasure and generated alot of satisfaction from seeing it develop into what it is now. I hope you'll find version 3 a greater improvement and even easier to use. If you have any suggestions or comments regarding this design, feel free to leave a comment or contact me here.