Abduzeedo now has a new design. It's been 6 months since the last re-design. As the blog has grown and we have more articles published every day we believed it was necessary a refresh in the UI.

We focused on how to make the articles more attractive for those that are navigating through the site, and make the older articles more accessible.

We had a few goals in mind:

  • Simplify
  • Bigger Fonts
  • Bigger Images
  • Performance
  • Transparent UI

Inspiration

We had some sites that really inspired us, because of their design or solutions for certain problems we that were facing as well. The Events of Carsonified was a great example of big Typography, the simple and elegant designs of Vitor Lourenco were another great inspiration, and The New York Times solution for many articles in their sites was another excellent reference, we even use the same name “inside” for a section of our new site.

Also, following some of Jason Fried's (from 37signals) advice, we didn't plan the new site in terms of sitemaps, or diagrams or even a fancy Photoshop mockup. Most of the design was done using CSS/XHTML development, such as font sizes and functionality.

Below you can see some of the sites that inspired us.

Events from Carsonified website, big Typography

Vitor Lourenco Website, simple, elegant, big fonts and very clean, Vitor rocks!

New York Times website, they have lots of articles and great solutions for that.

Design

Our idea was to make the UI design much simpler, without images or gradients, simply HTML text, and CSS borders and colors. Of course the Space theme had to be kept, so the header image would be practically the only image in UI of the site. That way we could drive the readers’ attention to the images of the articles, which now are much bigger.

Besides the bigger photos, the typography is much bigger too. Abduzeedo uses a dark background color scheme with grey text, and we thought a good way to make the site more friendly was by using bigger fonts, emphasizing titles and links, and using darker colors for section titles and other UI elements. We think, as they say, the content is king, and we’re trying to treat Abduzeedo’s content like that.

Abduzeedo Secondary Navigation and New Design

We also reduced the number of the thumbnails and sections. There’s now a section called Inside Abduzeedo where we use Ajax to load content on demand. This allows us to reduce the number of Database requests when loading the site. Besides that, we have a second navigation where you can check out the most important sections of the site, such as Sites of the Week, Best of the Week, Popular, Video of the Week. The same happens in the tutorial section, now the secondary navigation shows the tutorial categories: Photoshop, Illustrator, Pixelmator, Fireworks, and Others. Each one of these sections has their own RSS feed, so if you want to read only the Sites of the Week you can subscribe to a feed and receive just articles from that section.

For the colors we kept the the dark scheme, now however, we added a few more colors to our palette. Following our 80’s inspiration we chose Pink, Blue, and Yellow for links and section references, along with white and grey for texts and UI elements.

Inside Abduzeedo Section using Ajax navigation

Twitter

Twitter is great and we will be using it even more. For this redesign we invited some Twitter users to test the new version before it was published, also we will start promoting new features and the most important thing will be asking for feedback. To follow us on twitter just go to http://twitter.com/abduzeedo.

New features

We have new features being developed that are really cool. We will try to release them next month so stay tuned. Also we’d like to thank you for the great response to the blog. We’re very happy because of that and it really motivates us to keep working even harder.

We’re excited with this new design, and we want to know what do you think about it. We have 2 favicon spots to give away, to win, just leave a comment with suggestions or if you find bugs let us know too.

This new release was a major update because we upgraded our CMS, with that some errors might happened, that’s why we really want to know how the site is looking and working for you. For those using Internet Explorer 6, we highly recommend you to upgrade to IE 7, we won’t support it for all features of the site.

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: