Designzzz Logo

The Gospel of Website Redesign

"Backstage BlastingArt: Website Brainstorming and Redesigning" www.blastingart.com

Introduction

Blasting art is one of the most prolific online art, design and photographer communities in the world. These days BA (Blasting Art) is phasing through a redesign process. The Web Designer, Web Developer and Administrator of Blasting Art were holding meetings where they discussed the whole process. The Designzzz's team was invited as an honorary observer to analyze the proceedings and present their views. Attending these meetings was by far the best experience a designer/developer could ever have. Seeing the masters brainstorming and learning all those tips and tricks was like "Learning on Steroids".

Developer

The problem solver, knows the codes and nothing but the codes.

Admin

Moderator of Blasting Art. Represents the reader's view. Funny, brief and bossy.

Designer

Cool guy, always in a chill mood, naughty, doesn't like to work.

Redesigning Header

In the first meeting, everybody discussed how to design header. The criteria were that key color of the design should be "Blue" and the header should carry a minimalist aura. In the beginning, the designer presents a simple header design, and as the discussions pull out, design improves.

Hey dudes, what do you think of it?

Nice thing to start with, the glow in the back of the logo would make the site heavier because the glow can't be made in code. If it's not a code, it's an image and the image is heavier and not SEO friendly.

I think novice users like glowing things. Everything that glitters resembles gold you know.

Modern type designs don't use gradients or glows.

Yes, that is because when the site is light-weight, it loads quickly and puts less stress on the server. Show us a design without the glow.

Okey-dokey

If there's no glow behind the logo, search bar would look very prominent due to its orange outline. Mr. Designer! You know what to do.

Yeah Yeah!

I like it!

Me too.

If it is user-friendly, go with it. Next up is Login Panel.

Let's keep it where it is. It is compact over there, looks elegant.

We still need to redesign it.

We don't need a new option or function, just the same things in a new design.

Dark blue text over light blue background.. sounds good?

Show it man, show it.

You guys will eat me alive.

No no, not alive, we'll roast you first.

Seems ok!

It's not that important either, so this is done. Header final now?

What if we made the whole header in dark?

Dark colors do look dashing but they are not friendly with eyes so if we are making a portal and we want our members to visit this site many times a day, dark is not a good idea.

  • Glows and Gradients not used in Modern designs.
  • Make the header minimal even if the site is not.
  • Login and such panels should be compacted in header.
  • No Dark backgrounds on Portals.
  • Don't eat the designer alive!!

Redesigning Content

In this sitting, the Designer brought a rough copy of the BA future design. But this meeting was only about stuff that should or should not be placed on the home page. This is a brainstorming session and not focused on the designing part. Here, you can learn the methodologies of designing a big portal site.

OK, now we need to make a list of categories.

Where will they be placed?

If there's a big list, they would come on the left side, but if we make a drop-down, it will obviously come below the header.

Big list, so it's gonna stay like it is?

Yeah, let's keep the old design.

One more thing, what content should we show on the first page? Latest uploads? If we show the latest ones, they will not be the best ones, and if the content is not the best on the very first page, the new visitors would take out a bad impression.

So most viewed old ones?

Nope, we have a featured area in BA, we can show the latest featured uploads.

Right, I was thinking of a featured content in scroller bar.

My beloved Designer! Please also make a design of this scroller.

It's gonna be a looong day.

Now let's make a list of all things in the navigation bar.

After a lot of discussion, they came to a conclusion...

There are many options in the navigation bar, so it'll be a drop down. What's the color scheme, I'd say make it a dandy one by showing the drops in flashy colors.

OK, now where do we put this navigation bar? Around categories? Or horizontal?

Navigation and Categories are separate things, so horizontal.

Show us a rough copy of the design we have made so far.

Don't make categories, i'll make a tag based system in a way that it'll seem like categories.

Okey, so I'll remove categories in the next design.

We should promote the content, that's what makes or breaks a site. I mean - let's make thumbnails bigger and text more visible.

We can make a scroller of "Featured Artists" as well.

The design resembles a lot to behance.com.

It must not look like a copy.

It won't, I'll change it. If it seems like a copy, it's a disgrace for the designer.

I guess some description of artworks is also required.

That creates clutter. I like it minimal.

Get rid of other formal stuff. Views, comments etc. There's no need of them on the home page.

I think the thumb should be big, users will like their work to be displayed in a larger size. Mr. Designer, show us a couple of samples of thumb styles.

  • Give a lot of thought to the navigation bar. It is the most used function.
  • Categories and Navigation Bar should be placed separately.
  • In a portal, only moderated content should be on the homepage.
  • Extras can easily be added through a scrolling slide.
  • Design should be unique, not a copy of some other website.
  • Highlight your users, they are the soul of any community website.
  • Keep the homepage minimal. The less data the more visibility.
  • Designers should make more than one example of every design element. You never know what the client will love.

Design Process

This is the climax. The last session where the final version of BA design is being created. Everybody chips in with ideas and you can see 3 different angles (Designing World, Developers World and Readers Universe).

So Designer boy! What you got?

I didn't work.

Damn my life..

Just kidding, here you go. :D three styles to put content. Also updated the pagination a little.

Updating pagination design was a good idea.

Yes, the difference between good and great designing is that in great designs, even the minor things are designed well.

I like the second content style.

I like the first one, vast, easy to read, no clutter.

It's not vast, it's negative space, I like the third one. Compact, title on the top and no dispensable data. A lot of content on the homepage.

Comment count doesn't need to be there. Latest uploads won't have many comments, so their numbers won't determine the quality of the artwork.

You sound like Admin!

Wise men think alike.

I think thumb should be big. Big thumbs are hard to find on art communities, and sometimes visitors don't open the content page just because the thumb doesn't promote the artwork enough.

Agreed, so we need the title on top of thumbs, heading and description should be separated by thumb.

Yeah, that looks better. And no comments, and I guess no votes either.

Precisely.

I made another thumb style earlier, have a look.

Vote up button should stay, we can even make it a Facebook like or Google +1 button. More votes means more SEO.

Vote button on the left side of the title?

Example or GTHO!

Me and my big fat mouth.

Featured artist scroller on top or bottom?

Theoretically the content should be at the start. Scroller at bottom.

Your opinion Designer..

On top, make the artists feel they are important to you

They are important for us, and they deserve the most important place. On top it is.

Here's the complete design.

Seems pretty nice, do you think this is a modern template?

I'll answer that. It doesn't matter whether it's modern or not, nor does it matter if it's cool. All that matter is how user friendly it is.

It is modern, it is clutterless, it only uses solid light colors, has a high readability value, contains a unique combination of colors...

I was just teasing you, man. Ok, I'll code it using max-width and min-width tags so it'll look great on all resolutions.

  • A good design has even minor things designed well.
  • Keep the design clutter-free - Watch for negative space.
  • Big thumbnails give the visitor an incentive to open content page.
  • If there's a voting option, highlight it. More votes translate into more profit.
  • Important stuff should be on the top, regardless of book theories.
  • Developers must keep up with the latest coding trends.
  • While designing a site, always keep the users in mind. If the site is user-friendly, that's all that matters.
  • Developers should focus on making the site quick and SEO friendly and don't care much about graphics.

All Steps!

Here's a recap for the whole episode. See from where we started, where we reached and how and why we reached there. This is your ultimate guide for completing a big task related to web design and you can implement the same strategies to any project. Whether you are a freelancer or work in a mighty software house, this is the way to do it.

First Draft

Second Draft

Final Design

Conclusion

By far, the best way to learn in any branch is to quietly sit down and observe how professionals approach their task. We were fortunate enough to receive this opportunity and I think it's now obvious why is Blasting Art so successful. One of the foundations of a perfect team is a friendly atmosphere where people can speak their mind and even kid a little - but for the sake of productivity and results. We sincerely hope you've enjoyed our Cliff Notes. Rest assured that whenever we get another such opportunity, we'll be there; and, through us, you'll get it too!
On 06.16.11, Published in Articles, Designs, Inspiration
Share The Love
   
   
Follow Us

Leave a Response