Abduzeedo New Design V4ListThumbs
Abduzeedo New Design V4
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.
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.
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.
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
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.
85 Comments
awesome!!
Great. It definitely looks better now.
Oh I forgot to mention the new AJAX comment system and the new profile page with a totally new Abducted articles section using Ajax too... take a look and start abducting articles :)
Thank you and feedback is very welcome.
Love it..much better.
Excited about the next month, you guys makin' me a birthday present!
Love the new site design. Much more organized and visually appealing.
Great work!
i love this new look.. and i wish you the best luck for this version..
i have only some troubles to read the date under the comment username and in the "More content from" part..
with my screen i cannot see almost anything.. but for the rest it looks great!!
hope this is useful.. ;)
It's a great design. Very clean.
Wow! It's very good to see that you guys keep improving the site. Thanks!
My overall impression is that this looks much better and is more user friendly. The idea of using (way) bigger fonts is nice in the headlines and in the rest of the articles. But I definitely think that the font size of the navigation is too big. The new colors like blue and pink work very well - especially because they also appear in the new logo.
The bigger pictures is also very nice and gets your attention much easier.
I look forward to the new upcoming features!
1. But in this new designs i didn't find the smileys... :(
2. AJAX is more commly used for Autosuggest, so if u wish add it to a search TextBox in the HomePage...
In my system i found a Bug (Maybe!) , while editing my profile,
In contact settings -> your personla contact form i have a drupal caching problem...
Hats off to the new design to u! :)
and also while i click the preview button i got this error...
* warning: array_shift() [function.array-shift]: The argument should be an array in /home/abduzeed/public_html/sites/all/modules/ajax_comments/ajax_comments.module on line 94.
* warning: Invalid argument supplied for foreach() in /home/abduzeed/public_html/sites/all/modules/cck/content.module on line 1270.
* warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, '' was given in /home/abduzeed/public_html/includes/form.inc on line 366.
great job!
luv this site, keep goin' ;)
I'm not 100% sure. It's cool, but on the other hand I liked all the special images that are now missing. Bring back the magic coffee cup! (It was on top of the comments)
I would suggest you put the "Follow Us" links after the navigation and at the end of each article. I think many readers could easily miss them if they were abducted into the article material, which is a pity.
Just my two cents...
Valentin Bora
Congrats, Fabio! This looks really great—a pleasure to read and navigate.
Also, thank you for having my work as a reference :)
Keep up the good work!
Hey I diggin what you did with the place! Everything is much more clear & concise. But where's the transparent ui you mentioned?
Where is search ? :(
Overall in this site i found several SQL Server(i found several query displayed as a error) Error, that is Database Error...
SO while creating tables, create some triggers along with that! :)
@laranz.joe - we're working on those errors, they happen because of the upgrade to the new version of Drupal.
@Valentin Bora - we thought about that but we didnt want to more elements after the article, we think that there are already too many things... we added that on the sidebar, but we will try again.
@nini the coffee mug is on the sidebar.
@giackop we will make those a bit lighter, you're using a PC right?
Thank you all for the comments
Definitivamente melhor, o novo visual está muito mais amigável.
Doco You don't know what is search?
visit www.google.com its a search engine :)
We're working on the search, we had a few problems but it will be up in a few hours.
Thanks.
1. around the site i found some AJAX errors as well as query errors in Databases! :(
2. What about the answers for the smileys Fabio?
Avoid the query problem:
Create some triggers for the table before inserting the elements in the table!
Sorry Doco, i didn't read your question well?
Sorry!
Hi :D
At the begining I dindt like it too much because of those big fonts and images (I'm working when I read Abduzeedo and I have a 24'' screen so I kept it smaller than 24'') and when I log in and take a look :O!!! SO BIG!!
Anyway, I started to read the whole entry and I liked what Fabio said about fonts and backgrounds... you totally convinced me!! :).
Maybe I have to cover my back harder!
(I dont know if I explained it ok, sry for my bad english!!)
Grats for your job (all of you of course).
Regards
love the new design.very cool!
Parabéns gurizada. Ficou ótimo!
Abraços
@abduzeedo i'm sorry to say that.. but yes a pc..
Hey giackop Proud to be a PC users, dont sorry to say....
Say proudly i'm a PC User!!
LawrencE a proud PC user!
I really dislike it, it feels like a downgrade from the original.
very nice!!bravo fabio!!
nice!
All users it says that 5days and 23 hours?
What is this problem Fabio!
try to fix it! :)
that is the the member for column in each ones profile?
Hi there!
Nice design. But I personaly don't like the font with the bold weight.
Too "hard".
All the rest is awesome. =)
Hi folk :)
I like the new design, you did a great job. But i hate the size of text etc.
Really, it's just terrible in my opinion to read this. Because of this, i dont know whether i will keep on reading your articles. But sites of the week & inspiration pictures are still oke :D
Really cool! Keep it the good work....
I suggest to reduce a little bit the logo so it can give more space to the navibar and the rest of the page. Just an opinion of this amazing version of abduzeedo!
I admit...I feel the lack of the image slideshow for featured posts at the top :)
Very nice, old site was ok, this new one just seems more professional and easier on the eyes.
Looks great!!
greetz
http://www.opensourcehunter.com/
I like the whole idea behind the design, especially the bigger font and the colors.
The thing I don't really like though, is the new logo. Also I'm not really fond of the tab styling.
Aside from that, THUMBS UP :)
I love the new design, it looks much more organized, and i really like the new star picture at the top :)
I love this, it's a lot better.
Nooooooooooo Ive lost all of my abductions!!!! Otherwise, very pretty. :)
I like it, but i think the nav is way too bulky and unattractive. it overtakes the header and the fonts are too big. Other than that, good work!
I really like what you guys did. You kept the overal feel of the site, though you managed to do some serious updating.
I'm not sure about the font, it reminds me too much of the redesigned 24 Ways website and I didn't like that... I also see the same font/font-styling pop up in a lot of websites. Maybe it'll grow on me...
A suggestion for a tutorial maybe: I'd like to know how you did the navigation. I could examine it with Firebug etc etc, but a tutorial would be nice!
Fiquei abduzeedo, ficou muito dahora acompanho o site ja um tempinho, muito bom, achei bem melhor :) parabéns.
The site looks great!
I Like to new site. Looks alot better!!
I love the new design
Cool re-design, however, i found that using Arial Neue makes the fonts MASSIVE on my pc. I wouldnt mention it except it is a standard install so i expect many others to find the same. I used firebug to revert to Arial and it looks like the screenshot shown here.
Hey Fabio, site looks great, just one little thing, where's the seach field gone? :)
Looks great guys! Keep up the good work! Greetings from Ireland!
Great work, but the first thing I noticed was the out-of-focus logo. I'm betting this was an intentional effect meant to look like a subtle glow, but at first glance it looks like a poorly web-optimized image or one that was upscaled from a smaller size. The ultra-crisp tagline to the right only makes the effect look more blurry by contrast. Just my two cents...
sweet indeed! were did the search bar go? :'(
i think u should put a text box for the css coding in newspond tutorial..
http://abduzeedo.com/tutorial-newspond-menu-fireworks-part-2
Nice upgrade :)
The new design rocks!!....love the colors :o)
it does have its charme..but the fonts are way too big in my oppinion! Though I like the big post images!
@orrisen
"We're working on the search, we had a few problems but it will be up in a few hours.
Thanks."
Very cool the new design! I love it!
I like the new UI bigger thumbnails works well for design sites, the only thing I'm missing is the "Powered by drupal" love link :)
Looks fantastic!
Great design and really easy to navigate - well done!
I liked the old design but, this one is really good, gotta get used to the new one :)
Congrats on the redesign Fabio, I like the new color choice! :)
the new redesign is great, I love it!
i love the way the comment box behaves :X:X
It rocks, congrats! :)
Are you guys going to tell us who is the contest winner?
Fabio, te puxou muito.
Quando eu entrei de manha pra postar, fiquei bobo.
Vamo bomba esse anoooo.
it's just awesomely awesome !
sleek and sexy!
I find the new logo typeface harder to read than the prior version.
Nice redesign Fabio. At a first look it was a little strange, because I was used to the old full featured v3 design. But it's becoming more clear for me now.
Great new design! You've done a great job! Looks more up-to-date than the previous design. I love the new color choice!
This is fabulous ! The Best ever Abduzeedo design I've ever seen, I liked this very much.
Simple, loads fast, nice font colors, enough room for contents and images. A perfect design for a website with many articles.
Only thing that disappointed me is the color of the navigation tabs and the amount of bright area in the header image....
whoa,
okay, the page looks alright... maybe a bit better than before, but wassup with the the font thing. Why would you write a CSS that makes the font bigger? For images it works well, 'cause now you can see more of the little details but the font is so big now my grandma can read it without her glasses. Oh yeah, glasses, maybe you should try those first instead of making the font bigger and if you don't like your new look there is also the possibility of contacts.
Well I guess I'll always have to move 10 feet back if I wanna read your blog.
Still, keep up the good work ;)
this sucks like hell, everyting is so big `:O
I think the redesign has most certainly made the website more user friendly. Congradulations to all of you that worked on it.
I also can't see the date of the comments very well. I only noticed it by accident actually. I am using a PC.
Great I like this style of web design.
But I have question please this design http://events.carsonified.com/
Event I think its want time of load this images in this page.
Not everyone have good net line.
I was wondering where to present my compliments on the new layout. It's fantastic I love the new yet simple features on the site and design is wonderful. I really love the color scheme as well, it really compliments the rest of the site. YOU GUYS ROCK! And as always this site just like the rest of the things you guys show us keeps getting better and better!
Much respect!
Sweet! Great favicon also. :)
Dude it's so big....so it take more time to find smth...
only one word to you guys... AMAZING!
keep up the good work! i luv this site..!
Well done overall I like the redesign. It make everything cleaner and easier to read. A cool redesign for a cool site!
Simple indeed. Simple indeed. In a world where most web pages feature fonts that are difficult to read with a magnifying glass, I kinda dig the larger font. Color scheme not bad either. Not a huge departure from the last design. Awesome job.
awsome guys, great job is beatufull
# Simplify
# Performance
the best site "abduzeedo"
Great work, keep it up. I love returning back to this site and reading the quality content you always have on offer.
Post new comment