design process

Abduzeedo Redesign Case Study

abduzeedo — Thu, 22 Jul 2010 12:09:20 +0000

After months of study, designing, and developing, the new Abduzeedo is up. I know it might sound quite dramatic but this probably was the design I put most thought into. I tried to define exactly how the user experience would be and also what I could do to make that happen without losing reference from the previous designs.

Now that the site is up, even though I am still fixing some minor issues and I know that will never end, I will share with you here a little bit of my creative process and what directed me to make some of the design decisions I made.

Goals

The first thing to do on any design project or anything you want to do is to define the goals of the project. For this new version of Abduzeedo I had tons of ideas and things that I wanted to do, but I am only one so I picked up just a few that I considered the most important, so the goals of this new design were:

SIMPLICITY
SHOW MORE CONTENT
EASY TO BROWSE

Simplicity

The design must be simple in all senses of the word, the UI must be almost invisible in my point of view for a site like Abduzeedo in which the content is what matters and the only way to drive the user’s attention to the content is to make the UI as simple as possible.

Show more Content

After almost 4 years we have an incredible amount of content, and the best part is that most of this content is atemporal, they are pure inspiration and they will always be, so we needed to find a way to make this content more reachable to the readers like even random articles.

Easy to Browse

I love some iPad apps like Pulse for example because they are easy to browse through the content. Abduzeedo’s previous layout was very blog style with all the posts piled in a column. It was necessary to scroll down a lot to cover 10 articles. We needed to find a way to make that less of a hassle.

Defining Constraints

With the goals defined it was important to set some constraints so I would be able to start the labor work. In order to make a site simple my decision was to simply not use any graphics on the interface. The UI would be simply text and some gradients on the navigation to separate it from the rest of the content creating a hierarchy.

To be able to show more content the site would have to use more screen area and also be fluid for some resolutions.

Another really important thing in my case was the resources I had in terms of who would do what. Basically this was a project I did solo, with some feedbacks from Fabiano Meneghetti and a jQuery help for the User News form from my brother Eduardo Sasso, and I have to work with my available skills and also learn things that were necessary to make it happen, however I couldn’t try to reinvent the wheel because I wouldn’t be able to make it. It’s always good to know your limitations so we know where we can improve ourselves too.

The visitors statistics were really important to set some constraints in terms of browser and resolution usages, important areas and what to show to them.

Inspiration

As I mentioned before tons of things inspired me for the new design. First and foremost I wanted to change the grid style to a more magazine-ish grid style, therefore I could present more content.

Below you can see some of the references I took in consideration.

Before going to Fireworks I sketched quite a lot especially trying to come up with a fluid grid. I also did something that I think was very good and I will definitely do that more often. Before designing the UI in Fireworks I went straight to HTML first. So I played with solid colors and basic shapes in order to have a look and feel of the real deal and not a static mockup.

My first concept was a total fluid layout that would adapt to any resolution and fill the screen with content. I really like that idea, however after testing the HTML I noticed that in certain resolutions the main content was sort of weakened by the amount of content next to it on the sidebar. Once again, that was only possible after testing the HTML, because in my static sketches the idea looked killer but in reality it would be a flaw.

Below you can see some of the sketches and the first HTML concept.

Click on the image to see the grid in action. Resize your browser window to see what happens.

I also tried some jQuery plugins for fluid layouts like the Masonry one, which looked awesome in their demo pages, however once again, as I tested it with the real Abduzeedo content it didn’t work well. I mean, the plugin did what it was intended to do, what happened was that some content would radically change its position depending on the resolution, weakening the consistency of the UI. For example, in my computer the User News is in the top left and in my iPad it’s in the bottom right. That would make the user think too much in order to surf the page and what I want them to do is to get inspired and not to learn how the Abduzeedo UI works.

We use this plugin for the User News section.

Final Design

As you can see the final design is what your looking at right now. Just a few highlights about the design.

Header

The new header now uses much less of the screen, in the past it was like 250 pixels high, now we shrank it to 110 pixels. Therefore we gain more space for the content. We kept the original black style and added a gradient for the navigation bar so it differentiates itself from the content area.

Background

I am a huge fan of noisy backgrounds especially dark grey ones, probably because they remind me of the Atari 2660 console which has that rough texture very alike the noise background we have on Abduzeedo now.

Home-page and Section pages

The posts now have a smaller thumbnail with description and title. They are organized next to each other instead of piled up in a gallery style. We had this sort of style in the previous version but it was a different view option for the home-page and a laboratory for us :)

User News and Tutorial of the Week

This area is really important because every week we have a cool tutorial and lots of user generated content. In the former design the tutorial of the week was buried a day after it was published, which is really bad. Now it will be visible on every page till a new one comes along. The same applies to the User News...they will be visible on all pages.

Random Inspiration

This is a little experiment I wanted to do. We want to show you some random inspiration, let the odds show you what's cool and inspiring for you at any given moment :)

Footer

The tags are now in columns, the end of the tag cloud hehehe, and we have some other blocks with the link to our iPhone App, which wasn’t promoted in the previous design, and of course our magic mug for you to buy us some coffee because we are all human beings in the end and not aliens.

Resolutions

The site now has 2 layouts for different resolutions, so those with higher resolutions which represents more than 65% of our audience will have less scroll with the same amount of content.

Layout for iPads, Mobile Phones, Netbooks based on 1024x760 pixels resolution

Layout for resolutions higher than 1024x768 pixels

Well there are many more new features like focusing all the sharing features to the Meebo Bar, the new post design with larger images, tons of CSS3 little effects and transitions such as the Not-found page and we are also working on new features while fixing some minor bugs the site might have.

I hope you all like the new design and feel free to send us suggestions, opinions and critics about it. Our goal is always to deliver the best content to you and to ourselves because we use the site for inspiration as well, so it's as much mine as it is yours.

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Sponsored Links:

Thoughts on Creativity and Design Process

abduzeedo — Thu, 08 Jul 2010 09:11:34 +0000

I will start this post off by saying that everybody is creative and for some that might come as a surprise, but I believe in the idea of creativity as a means of solving problems; the easiest and most efficient way possible. When I say easy I'm referring to the timeframe that it takes to complete the task, and efficient to how well received the work is from the target audience. But the question is what to do when we cannot come up with any good idea or the so terrified creative block.

The creative process is something unique because it’s personal, we cannot teach someone how to come up with ideas but we can learn how to organize our thoughts in order to make our ideas easier to achieve in the form of a good design. At least in my opinion and let me explain why.

Overflow of Inspiration

We are bombarded with information all day long and even when we are sleeping we might dream and have ideas and therefore inspiration. That is good in terms of having lots of resources available but it’s really bad as well because with that amount of information it’s pretty hard to make a decision.

That’s why I believe that our decisions have to be made with goals in mind and these goals alongside with a clear idea of our target audience will help us filter this avalanche of ideas and inspiration.

...designers give form to products, interiors, and visual communications, and satisfy the functional, psychological, and aesthetic needs of users... http://design.osu.edu/dept_what.html

Create Constraints

In order to overcome this problem it’s really important to define some constraints. If we have too much freedom again it’s hard to make a decision because it tends to fall to our personal opinion and we can't rely that everybody will like the same things we do.

The book Making Ideas Happen covers this topic really well saying that in a specific research with designers, they were much more productive when they had more constraints in a project than those who had more freedom.

My suggestion to creating these constraints is to fall back to the importance of having a good design briefing before starting any sketch or firing up the computer. Talk with the client, try to understand exactly what you have to do and for whom you will do it. That is key.

Before starting anything I asked all questions I had and defined the constraints, that made the whole process a lot easier

Try, try and try some more

I've already said this in some speeches I gave, but it’s true. The only way to come up with something cool is by trying, testing, and evolving ideas. If you just wonder and never do, you will have nothing to evolve upon. It’s like the fear of the blank page. Once you start adding things to it, it's not that complicated anymore…it’s all about playing with the elements, right? Or like the inertia principle, once we get the object moving it’s hard to stop.

When I was in college I had an amazing professor and he used to make us sketch at least 150 variations for a logo project, he used to say that the first ideas we have are always based on something we saw and it’s already known and popular, that’s why we did it. Only after we run out of ideas is when we will start innovating.

Delivering

I tend to think that the next idea will always be better, which in reality most of the times is and that’s why I had so many projects that were never finished. As I mentioned in the last post we have external factors that might make us unsure and insecure of our ideas.

Now, I believe that we have to think of design as an evolving process that means once we have an idea and have gone through the creative process with the right constraints and we know that we did our best we must deliver.

Once we deliver we can start thinking on improving upon it. Seth Godin mentions that he is successful because he delivers more while other people keep postponing the delivering in order to finish a master piece which might never happen. He also talks about the last minute questions before delivering what he calls the Lizard Brain calling.

Amazing talk about delivering by Seth Godin

You don't need to be more creative, all of you are too creative.... what you need is a quiter lizard brain... - Seth Godin"

Creating something is always exciting, and having ideas is super easy that is why I am sure that everybody is extremely creative. Now the secret of success is making these ideas come true.

The most comforting thing is that we start a project with at least 50% chance to succeed without even doing anything. Now try to imagine if we give it our best, how much that percentage would chance in our favor.

Top image courtesy of Shutterstock.

About the author

Sponsored Links:

5 Steps to Streamline your Creative Process

abduzeedo — Tue, 08 Sep 2009 10:59:01 +0000

As a designer I’m always trying to optimize my creative process. Since I started, lots of things have changed in my workflow, some things got simpler while others got a little bit more complicated. With these changes came the experience of learning from the mistakes but also from the successes.

In this article I will summarize how I try to streamline my creative process to make it as efficient as possible. Basically everything consists of 5 steps:

1- Understand the work

"A well-defined problem is half solved."Michael Osborne - Principal, Michael Osborne Design

It might sound obvious but sometimes we tend to assume that we know what we have to do when we simply don’t. It’s really important to know exactly what it is that you have to do before you start doing anything. If you don't, it would be like going to the supermarket when you’re hungry. You want to buy everything... The understanding of the project will filter exactly what you have to look for, it will give you directions and the context of the work you will have to do. But what's the use in knowing what you have to do if you don't know who you're doing it for? That will lead us to the second step...

2- Audience

"A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools."Douglas Adams - Creator of The Hitchhiker’s Guide to the Galaxy

So, you now have a firm understanding of the work, but now the question has come to: for whom will the work be intended? The audience is key in this equation because it filters and reduces even more the range of your search for inspiration. Once you have the audience figured out, you really have to get in your mind that it's 100% about them, which will lead us to the third step.

3- Business

"Every night I pray that clients with taste will get money and clients with money will get taste." Bill Gardner - Principal, Gardner Design

The biggest difference between commercial design and art, for me, is that we design something for the audience and not as a means of self-expression for ourselves. We solve problems for them, we make it easier for them. As far as graphic and visual design goes, most of the problems arise in communication. Essentially, we’re the middle man between the client and the consumer. Our goal is to make the communication better for them (which in most cases means simplifying), and not to interfere in the communication with our own personal tastes and influences.

4 - Challenge

"We spend a lot of effort trying to make things look effortless." Alexander Isley - Principal, Alexander Isley Design

With a solid understanding of the work, the audience, and the question of solving problems, we now face the challenge: the designing part. The challenge creates the motivation to look for the details that will make your work better and superior.

5 - Try

"You will never really like anything you do, and you will die knowing that you still have to do your best." Garth Walker - Orange Juice Design

The previous steps won’t necessarily guarantee that you'll come up with a good design, they're merely there to form a foundation, or a stepping stone, if you will.

To recap, the understanding of both the work and the audience will create the context. Keeping in mind the business perspective will avoid you losing focus on what's important. And, finally, the challenge will give you the motivation to look for the most innovative and efficient solutions. But the only way for you to come up with a good design is to take all these things and TRY.

This is the workflow I’ve been using since I graduated from college. Like I said, this workflow has been modified based on what I have learned throughout these years, through the wins and losses. The process should change depending on your personal way of working, but I think the one thing that will always be the secret to a good design and therefore should be a key in everyone's workflow is simplicity.

About the author

Sponsored Links:

Brainstorm #9 Logo Process

abduzeedo — Wed, 29 Apr 2009 09:48:45 +0000

Last month Carlos Merigo, from Brainstorm #9, one of the biggest and most prestigious Brazilian blogs, contacted me asking if I would be interested in redesigning his blog brand. I was totally amazed by the opportunity to work on a project like that. I knew it would be challenging because of the target audience, mostly advertisers and people who really know about that matter.

Briefing the design process

The first thing when designing a logo, is to understand the context, history and what's the image it has to deliver to the audience. Asking Carlos about the meaning of the logo, he explained to me that the logo was, of course, related to “brainstorming”.

Brainstorming is a group creativity technique designed to generate a large number of ideas for the solution of a problem. The method was first popularized in the late 1930s by Alex Faickney Osborn in a book called Applied Imagination. Osborn proposed that groups could double their creative output with brainstorming. - Wikipedia

Now, about the number #9, it was a really nice story: he was looking for something that would make the name stand out, Brainstorm was way too simple. Then he saw on his table the famous White Album by the The Beatles. He decided to take a look at the name of the songs and found the Revolution #9. That gave him an insight, because even John Lenon himself once said that that song was the weirdest, longest and probably most hated Beatles song.

John Lennon wrote this with contributions from Yoko Ono. It's a highly experimental piece, which Lennon once called "The music of the future." It is the most controversial and bizarre track on the album - you have to have a very open mind to appreciate it.

The work is credited to Lennon/McCartney, though it was primarily the effort of John Lennon. (This was Lennon and McCartney's standard practice, to share songwriting credit on all songs written by either or both.) George Harrison, Ringo Starr, and Yoko Ono made small contributions, while Paul McCartney did not actively participate in the track's creation. Ono's avant-garde influence on Lennon's compositional style is clear throughout "Revolution 9." - Wikipedia

I had to listen to the song, and it’s definitely a crazy song, full of looping and sort of a collage of different things, pretty much like a brainstorm.

That was the current logo.

So the keywords from my little brainstorm were:

Loop
Collage
Avant-garde

Logo References and Sketches

Before going straight to the computer, I worked on some sketches, exploring a few concepts using the keywords that were selected before. Also I visit logopond.com for some logo references. You can take a look at some logos I used for reference at the Ultimate One Color Logos Inspiration article.

Logos from logopond for design references

The first idea was to keep the # symbol and add another element. In this case the lightning bolt.

I know, I suck at that but it's helpful ;)

First Idea

After having some interesting ideas on paper, it was time to go to Illustrator and work on the symbols. Below you can see one of my ideas, mixing the # and the lightning bolt.

The first symbol mixing the # with the lightning bolt

It was a nice idea and a good symbol in my humble opinion. It had a nice link with the previous logo, but there was a big problem: the number 9 wouldn't work well along with that symbol.

First Idea with the Logotype and versions

Selected Idea

Even though the first version came out quite nicely, I decided to work on another version, trying something different and using the number 9. With that in mind, I decided to mix the number and the lightning bolt symbol.

Second idea mixing the number 9 and the lightning bolt

Logotype

With the Avant-garde influence on the song Revolution #9, I simply had to use that font. I really like it, despite the fact that here in Brazil it was a default font in Corel Draw, the most popular software for vector design here. But what does that have to do with the font? Well, imagine that this is the default font... so when people send business cards to the bureau and forget to send the fonts, which one is used instead?

Yes, maybe it was the most used font ever here in Brazil, but with a few tweaks it would work fine.

Exploring the idea of looping, I played with some characters, mainly in the word Brain because ideas and complex thoughts are born in the brain, so it had to have a clear relation between LOOPING in the Brain. Also I used gradients to add some depth to the connections between the letters.

In the last letter, the "M", I nudged the symbol a bit over the letter, leaving a little gap between the symbol and the letters to avoid problems with the monochromatic version.

Selecting and playting with fonts

Final Result

I really believe that the new logo achieved the goals we had set in the very beginning of the project. A simple and iconic logo, relating to the Beatles song, Revolution #9.

Versions

Braincast

Braincast, the Brainstorm #9 screencast.

Site

Also I worked on the web site, but that's another story for perhaps another post in the future.

Text Ad: Are you looking for crm certification exam prep? Join online 650-195 training specially designed to help you pass BH0-006 exam quickly.

About the author

Sponsored Links:

Sikbox Logo Design Process

abduzeedo — Wed, 15 Oct 2008 11:59:01 +0000

For the last few weeks I've been working on some projects, but there is one in particular that I think will be really useful for the blog community. It's called Sikbox. Sikbox is a web app that allows you to add a live search to your site, or any site. It uses the Yahoo Boss api and it actually works better than my Drupal default search system.

This project was done pretty quickly. I had the honor to work on the logo and web design with my brother, Eduardo Sasso, the Ninja programmer, and Fabiano, the CSS samurai.

Anyway, in this post I want to share a bit of the ideas and the design process for the logo creation.

Doing the home work

The first thing we did was look for references. We visited lots of sites and also used the very helpful http://patterntap.com/. Below are some of the references we had.

First ideas

The basic idea for the logo was to create a clear association with search. The most common and iconographic symbol for that is the magnifying glass. However we wanted a very subtle element and the first thoughts and sketches we had, tried to avoid that.

For the first designs we tried to use the search box result and the cursor for the symbol as you can see below.

I'm terrible at drawing but they always help ;)

Back to the roots

After some sketches and designs we decided to forget about the other symbols and try to go with the magnifying glass (but again something subtle and discreet). The idea we had was to create the "b" with that element. Also we had to rethink our idea for the best font style, we gave up the idea of a serif font.

Refining the idea.

Our first thought was use shadow to create the 3D effect, but as I always like to do the negative version, the shadows wouldn't work well in that format. We decided to make the effect without the shadow instead.

Final design

Of course the whole process was much longer and painful :) but we think the end result was really cool and, despite the fact that we didn't want the magnifying glass symbol in the very beginning of the process, it ended up a lot better than we had thought.

That's again why I think we have to like the design process otherwise this sort of starting from scratch thing can be very traumatizing, but if you learn to enjoy that everything will flow much better.

Site Design with the logo.

Text Ad: Sign up with best microsoft mcts for getting incredible online 70-652 dumps and 642-661 prep guides. We also provide best services with guaranteed success.