articles on

Responsive web design case study: Zee

Last week we launched the new Zee website - Zee is my company here in Brazil. We did the site in a single page, presenting the company, our works and keeping the focus on content and in a simple design. I decided to write this case study because the main challenge we faced was to develop a totally responsive site, and since lately this is a strong web subject, I decided to show how was the creative process of the new Zee layout. I know this matter is all around the web, but a definition about responsive design always come handy: Responsive Web Design (RWD) essentially indicates that a web site is crafted to use CSS3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling. - Wikipedia Summarizing: 1 code, 1 CSS and a fluid and optimized layout to all devices. This is not a tutorial about developing a responsive project, is a case study. But there are a lot of articles and books about this, so here are a few references: Livro: Responsive Web Design, de Ethan Marcotte Build a responsive site in a week: designing responsively - .net magazine Responsive Web Design: What It Is and How To Use It - Smashing Magazine Responsive Web Design Techniques, Tools and Design Strategies - Smashing Magazine A Primer on Responsive Design : From Content to Development - UX Magazine Responsive Web Design, by Ethan Marcotte Breakpoints The first thing we did was to set the breakpoints, the amount of changes in the layout. It is almost impossible to do a different design to all resolutions and devices available today, so we decided the resolutions that would be the base of the design and kept a fluid design between these resolutions. In our case we are using the following breakpoints: 640px, 1024px e 1280px (remembering that 1280 is the width limit). Wireframes showing the 3 base resoluções Mobile first As we will have 3 base resolutions, we will have 3 different layouts. With this comes a common question: which layout I should pick to start? Starting with mobile is much more interesting and recommended, because this way we can keep the focus on important things so we can add other elements as the resolutions increase. There are a lot of articles about this issue and I suggest a really good book from A Book Apart callled Mobile First, Luke Wroblewksi. Layouts Now that we created the information architecture it is time to create the layouts. This part depends on your methodology, I like to do wireframes on paper, because this way I can correct and try things faster. After defining the base of the architecture is time to go to the layout. A lot of things change in the moment we create the layout so I don't see a productivity advantage in investing time on detailed wireframes. Layout for 640px resolution Layout for 1024px resolution Layout for 1280px resolution Media queries Layouts are ready, time to work to make some magic happen. In terms of code I used HTML5 Boilerplate and jQuery. But what actually make the layouts break between resolutions is the media querie. CSS3 has this fantastic property and the documentations about this is huge on w3c.org, but to simplify the explanation, here I used basically the width definition to do the breakpoints. Use of CSS3 media queries Widths in "%". Texts in "em". The big thing here is, apart from the media queries, to work with the widths in % because this keep the fluidity between breakpoints. (Be prepared because in this part math will take over your brain!). And the texts too, always in "em" instead of pixels. Result You can check the result on ou website: zee.com.br. In case you can't test in other devices use this link: responsive.is. And remember that Abduzeedo is also responsive! You can try it on iPhone, iPad, Android or even on this link I shared to see how the site behaves ;)

Book Suggestion: Smashing Book #3 Redesign the Web

The book suggestion of the week is about web design and it's from our friends over at Smashing Magazine. We are talking about their 3rd book, the Smashing Book #3 Redesign the Web. About the Book In recent years, the Web has changed—a lot. The Web designer’s tools are now advanced, and browsers are highly capable. Designers have established clever coding and design techniques, and they face new challenges and are embracing new technologies. These changes are fundamental and require us to reconsider how we approach Web design. It’s time to rethink and reinvent: it is time to redesign the Web. The new Smashing books will change the way you design websites for the better. But are we all prepared for this? How does responsive design fit into your workflow? What UX and mobile techniques do you follow when designing websites? And if you have a redesign project on the horizon, how do you approach it and work your way through it? The books explain what you need to know in order to create effective websites today, and what you need to know to be prepared for the future. Well-known experts share practical know-how and introduce a whole new mindset for progressive, future-proof Web design. Buy Now Via Amazon Via Smashing Magazine

Book Suggestion - HTML and CSS: Design and Build Websites

The book suggestion of this week is about web design, to be more precise, it's about HTML & CSS. The book is called HTML and CSS: Design and Build Websites and besides being super useful it's a beautifully designed book. A book about code that doesn't read like a 1980s VCR manual... It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages... About the Book Computer books often look rather like manuals. They can be dense and intimidating (they may even send you to sleep), but this book proves that they do not need to look like that. Each page of this book introdues a new topic in a simple, visual way with straightforward explanations accompanied by bite-sized code samples. At the end of each chapter there is an in-depth example that puts together the techniques it has covered. No previous experience is necessary. One of the key things that makes this book different from other titles that teach the same subject is its completely new design approach. The full-color pages are packed with diagrams and photos that make the code easier to learn. Buy Now

Web Design: The Work of Justin Carroll

We've seen tons of great web designs during these years, and it's always great to see sites for movies done by great designers, like Justin Carroll, who has done a great deal of movie promo websites. From Super 8 to the Avengers, Justin has done some pretty rad pieces. Of course that these featured here are only a few of his works. There are much more in his personal portfolio, so I recommend you the check it out. I hope you enjoy these! Cheers. ;) The Avengers Snow White and the Huntsman Battleship Transformers: Dark Side of the Moon Thor

Abduzeedo New Design: Simple and Responsive

Abduzeedo was created as a personal project. The main goal was to backup work while trying different things not only in the realm of graphic design but also experimenting with new trends in coding and stuff like that. Every year we try to refresh the site with a new design, however this time it took us a bit longer, but alas here it is. It took us a little longer this time because last year we felt it wasn't exactly the right time nor necessary. The site was still performing well but with all the talk about responsive web design we saw an opportunity and a need to get on board with that. As you can see there are quite a few changes not only in terms of visual design, but under the hood as well. We would like to point out 5 major changes: Color palette: After years of a colorful rainbow palette we decided to change. The idea was to create a super simple color palette while maintaining the dark background. So, to have a nice contrast we went with yellow, because there's no better contrast than black and yellow. Typography: We know that typography is the language in it's solid state. Web fonts are expanding with different options from Typekit, Google and many others. We decided to use Google Web fonts because it's super fast and reliable. Our font of choice was Armata. Responsive Design: Using HTML 5 Boilerplate and some Javascript files we made the site responsive for mobile, tablets and desktop. We are working on another version for larger resolutions. So stay tuned. A big thanks to WebdesignerWall for the amazing tutorials and tips. Family of Web sites: We used to keep everything in our Drupal CMS. Now we've launched 2 different sites : "UNEWZ" for user news and "RAWZ" for the daily inspiration submissions. Our goal is make the site even more open to users. Now everybody can submit images and write posts for the Abduzeedo community. We will use these Web sites to source quality content to be featured on the blog. Simple and big: you will notice that the home-page has less text. We hid the description text and made them visible only when you roll over the posts. We are also using bigger thumbs and bigger images in the articles. Abduzeedo is all about inspiration, and nothing like some big images to inspire us. We still have so much to do, designing a web site is, I dare say, an endless project. But that is why it's so much fun. We learn so much and we of course make and will continue to make tons of mistakes. So bear with us. We will be improving this new design on a daily basis. We hope you enjoy it and feel free to share your thoughts with us

Web Design: Awesome Facebook Concept

A few weeks ago we featured here a great concept for IMDB, and since then I was just waiting to see another great concept like that. Visiting Behance, I just found the next one. Like the IMDB one, this is a interface lift, concept layout, but for Facebook. The social network has received lots of bad criticism since it released its timeline layout, and I guess some people would prefer much more this one. Check it out and tell us how do you like it. This awesome concept was done by web designer Barton Smith, from San Diego, CA. Show him some love by visiting his portfolio. I hope you enjoy this. ;)

Book Suggestion: Ordering Disorder Grid Principles for Web Design

The book suggestion of the week is a must have for those willing to design nice web sites and pretty much anything. It is called Ordering Disorder: Grid Principles for Web Design (Voices That Matter) and as the name says it is all about grid systems or the principles behind it. Book Description The grid has long been an invaluable tool for creating order out of chaos for designers of all kinds—from city planners to architects to typesetters and graphic artists. In recent years, web designers, too, have come to discover the remarkable power that grid-based design can afford in creating intuitive, immersive, and beautiful user experiences. Ordering Disorder delivers a definitive take on grids and the Web. It provides both the big ideas and the brass-tacks techniques of grid-based design. Readers are sure to come away with a keen understanding of the power of grids, as well as the design tools needed to implement them for the World Wide Web. Author Khoi Vinh is internationally recognized for bringing the tried and true principles of the typographic grid to the World Wide Web. He is the former Design Director for NYTimes.com, where he consolidated his reputation for superior user experience design. He writes and lectures widely on design, technology and culture, and has published the popular blog Subtraction.com for over a decade. Follow Khoi on Twitter: @khoi. Khoi's blog: http://www.subtraction.com Some Photos Buy Now from Amazon

Web Design: Excellent Photographic Backgrounds

I've been so crazy about the UI Design posts that I almost forgot about the Web Design ones. But no worries, I've just realized it's been some time since my last post about it. Let's update things here. It's been a very long time since the last time we saw some cool photographic backgrounds in layouts, and lately there's been some awesome examples of that, like the sites below. These are pretty rad, and I sincerely wish this trend never dies. More of it, please! Well, to check out each website, simply click on the pics. Hope you enjoy these! Cheers! P.S.: Also, if you've seen any good photographic background layouts lately, drop us the link. ;) Get off your dock Indigo Jeans Jochem Gugelot Jacadi Lavazza Orlebar Brown Timberland mcube Agenzia Tecnodue

Sites of the Week #176

For this Sites of the Week we have selected some great sites such as Mightybell and 10k Apart. Also we're featuring the beautiful Kitchen Sink Studios portfolio, and much, much more! As usual we would love to hear from you, keep sending your suggestions to us and we will be more than happy to feature your site. This post is brought to you by our friends at Behance who just launched ProSite.com, fully custom online portfolio sites that sync with your social network. You can keep sending me your suggestions via Twitter twitter.com/FabianoMe or twitter.com/abduzeedo, and include #abdz_sites in the message. DESIGN / CSS The Miniature Earth - miniature-earth.com What if the population of the Earth were reduced into a community of only 100 people? Big Daddy Weave - mediaparker.com Formed at the University of Mobile, the quintet has earned a reputation both for the musical conviction that has carried their songs to the top of the charts and for the joy and passion that have made their live performances such moving and memorable experiences.APP / WEB APP / SERVICE WIS - webiconset WIS is a nice solution for designers everywhere looking for top-notch icons. With a whole set of great looking icons, these guys really deliver amazing design. STUDIO / PORTFOLIO / BLOG Tommy - thisistommy.com Welcome to Tommy, the Digital Creative Agency. At the time of writing, Tommy is over 43 million seconds old. We work with agencies, brands, companies and individuals. We love our work, our office, smart ideas and being playful. Colbow Design - colbowdesign.com I'm Brad and I buld things for the web and I love working with people like Wayne. The passionate, the driven, the engaged. People who want to learn more about their users and build around their needs.THEMES Salutation - themeforest.net/ Salutation is a WordPress and BuddyPress theme. If you’re not familiar with BuddyPress, it’s a social network plugin for WordPress allowing your website to become a fully functional community portal. BuddyPress lets your users interract through groups, forums, friends, status updates, private messaging and a lot more.

Web Design: Great IMDB Concept

I don't know if there are much cases of web designers doing concept layouts for big sites and actually getting it to become the official layout, but I would certainly enjoy to see this piece achieve that. Vladimir Kudinov, a Russian web designer, has done this amazing concept layout of IMDB, the all-mighty cinema site. I must say that people at IMDB should really consider taking a look at this, because it's amazing. Great style, good taste, nice use of colors. I know some people like white space very much, but here it's not overused: it's just the right amount. I like this not-so-new style of gallery, that looks just like Tumblr's archives. During my use of IMDB I have found myself much confused some times, but with this, I think things would get a little bit more intuitive, which is a winning situation. If anyone at IMDB gets to see this, please consider getting in touch with Vladimir. This would be a new breath to the site, for sure. For more of Vladimir's work, visit his portfolio at Behance. Also, he is sharing the PSD file for free download to everyone, which is awesome! Check at the bottom of the post for the download link. Cheers! ;) Film page Menu Player Popup component Rating detail Download Photoshop File Download the Photoshop file for free at DeviantART

Web Design: Huge Icon-Like Illustrations

One thing I definitely fell in love with are modern icons! So, when I got to see websites using huge ones, I was amazed by how well it fits in a good design. I call it "icon-like" because I'm not 100% sure that these can be indeed called icons. What defines an icon? The size? The use? Where it is made? I really don't know... but looking at these I imagine they were made in Fireworks, but I know someone smarter than me will tell us what's the most common tool to make something like these. Anyways, here are some awesome examples... and as you will notice, most of these are used by Mac apps, which makes total sense for me. Awesome OS, awesome icons... or icon-like illustrations. Also, I'd love to know from you if you know any more like these! Let us know! Cheers. ;) 6 Wunderkinder Postbox 2 Little Snapperh Cornerstone 2 Youzee Kaleidoscope Versions Checkout Enstore Candybar Transmit

Web Design: More Dark Layouts

Last week we had an awesome post on Illustrated layouts and I thought it would be a good idea to revive some other subjects we've done here before. Back in 2008 and last year we had posts on black and dark layouts. Just like last week's post, I'd like to know from you whether or not you see an evolution in these layouts compared to the older ones. For me, compared to 2008, there's been a hugh leap towards more cleaner design. Compared to 2010, there wasn't enough time to see any difference... we're a still at the same moment. But how do you feel about these? We'd love to know! Cheers. ;)

Web Design: Illustrated Layouts

Back in 2008 I made a nice little post about illustrated websites and I thought it would be a good idea to make a new one with fresh layouts because we've seen many new layouts since then. These are quite awesome and I think it's great to see that even though designers are not designing fully illustrated sites anymore, they are still doing good use of few illustrated elements in their designs. An illustration here and there and that's just enough. How do you like these? Do you think that it 2008's layouts were better or has evolution took place? Tell us! Also, if you know any more good illustrated websites, drop us the link, ok? Enjoy! Cheers. ;)

Web Design: Nice and Clean Layouts

It's been some time since I last checked my web design feed. I took a look at it now and found some great, fresh designs really worth sharing with you guys. There's a bunch of new clean layouts that are just awesome. I've seen some posts on trends for 2011, but I'd like to know from you guys: what do you think will be hot in 2011? Clean layouts with lots of white space? Big fonts? Glossy bars? Tell us! We'd love to hear. I hope you enjoy these! Cheers. ;) Mark Hobbs Music by Design Studio Pixel Espresso Chris Thurman Two Designers DBA Products TH= SUM InfinVision 6wunderkinder Wixel

Winner of Future of Web Design - Giveaway

Hey guys, thanks to everyone that participated for a chance to win this giveaway, unfortunately we can only pick one winner and I wish we could pick a few because there's a lot of people who deserve this opportunity but here is the one. The Giveaway First I would like to ask everyone to not enter the giveaway if you not going to be able to go, check out the event date and location, make sure you can make it before you try to win it. The two day pass event is worth $895.00 and we want to give it away to someone that will make the best use of it. The winner will get a free 2 Day Conference Pass, the conference will take place in on November 15th & 16th, visit their website for more information www.futureofwebdesign.com/new-york-2010 The Winner Scott Earl As a full-time 40+ hr a week UX Designer, and freelancer on the side, I live and breath everything design. I'm looking to evolve my skills and take my UX game to the next level by exploring any and every avenue I possibly can. I'm peeking around the corner every chance I get at what the next big thing is going to be, and would like to stay on the bleeding edge of the web design industry. This event would definitely keep me on that path, and I also just need a vacation! That's the ultimate package you're giving away right there ;) Congratulations Scott, I'll be contacting you shortly, if by any means you can make to the conference we will be picking another winner. The Event The Future of Web Design has changed! After a huge success of the new format in London, we're bringing the new look show to New York: two days of conference sessions, each with two tracks to choose from, and a day of intimate workshop allowing attendees to gain a deeper understanding of their chosen topic. What's going on? Future of Web Design - November 15th - 17th, New York The Best of the Best - The biggest Names in web design, presenting over 2 days of packed conference schedule. Bigger than ever Before - Future of Web Design New York is now a two day, two track conference. That's around 400% more content than 2009. Covering the Most Important Subjects - We cover the topics that matter the most to today's web designers and front end developers, including HTML5, CSS3, typography and UX. Added Learning Opportunities - As well as two tracks of great content there will be an extensive program of extra University sessions and expert-led design clinics running throughout the breaks. Relive the Conference - Online videos of all sessions, with integrated slides, audio and full transcriptions will be made available to attendees after the event, allowing colleagues to benefit too. Intimate Workshops - Full day (9am - 5pm) are also available to attendees wishing to delve deeper into specially chosen hot topics. Numbers are capped at 40 per session, ensuring a great learning environment. Great Changes for Networking - With over 500 like-minded designers descending on New York for the event, and both structured and informal network sessions provided, it's a brilliant opportunity to meet new friends and forge professional contacts. The Speakers Click here find out more about each speaker. Doug Bowman Molly Holzschlag Paul Boag Cameron Moll Nick La Aral Balkan Aarron Walter Jan Cavan Sarah Parmenter Jonathan Snook Thomas McLeod Tim Van Damme Dan Mall Matthew Smith Ethan Marcotte Brad Haynes Denise Jacobs Estelle Weyl Jon Schlossberg Jesse Friedman The Conference Venue This year's conference will take place at New World Stages in New York on 15th + 16th November. New World Stages is located at 340 West 50th St, between 8th and 9th avenue at World Wide Plaza. Parking is convieniently located on both 49th and 50th street. Who's Going ? If you planing on going to the event, let us know so we can meet up!

Future of Web Design - Giveaway

Yes, you heard it right. We are giving away a 2 Day Conference Pass for the upcoming FOWD Future of Web Design this November 15-17 in New York. This is one of the best web design events there is, with the best speakers in the industry is a must go to anybody that works with web design. Find out more about the event. Me and Fabio were set to go to this year's FOWD in NY but unfortunately Fabio won't make it but the good side is we are giving away a 2 Day Conference Pass, and the winner get to go for free and hang out with me in NY. The Giveaway First I would like to ask everyone to not enter the giveaway if you not going to be able to go, check out the event date and location, make sure you can make it before you try to win it. The two day pass event is worth $895.00 and we want to give it away to someone that will make the best use of it. The winner will get a free 2 Day Conference Pass, the conference will take place in on November 15th & 16th, visit their website for more information www.futureofwebdesign.com/new-york-2010 How to Win To enter the giveaway is easy. Answer this question on the comment area: "Why we should pick you to go to FOWD" and share on twitter "I wanna go to FOWD for free with ABDZ" Good Luck Guys! The Event The Future of Web Design has changed! After a huge success of the new format in London, we're bringing the new look show to New York: two days of conference sessions, each with two tracks to choose from, and a day of intimate workshop allowing attendees to gain a deeper understanding of their chosen topic. What's going on? Future of Web Design - November 15th - 17th, New York The Best of the Best - The biggest Names in web design, presenting over 2 days of packed conference schedule. Bigger than ever Before - Future of Web Design New York is now a two day, two track conference. That's around 400% more content than 2009. Covering the Most Important Subjects - We cover the topics that matter the most to today's web designers and front end developers, including HTML5, CSS3, typography and UX. Added Learning Opportunities - As well as two tracks of great content there will be an extensive program of extra University sessions and expert-led design clinics running throughout the breaks. Relive the Conference - Online videos of all sessions, with integrated slides, audio and full transcriptions will be made available to attendees after the event, allowing colleagues to benefit too. Intimate Workshops - Full day (9am - 5pm) are also available to attendees wishing to delve deeper into specially chosen hot topics. Numbers are capped at 40 per session, ensuring a great learning environment. Great Changes for Networking - With over 500 like-minded designers descending on New York for the event, and both structured and informal network sessions provided, it's a brilliant opportunity to meet new friends and forge professional contacts. The Speakers Click here find out more about each speaker. Doug Bowman Molly Holzschlag Paul Boag Cameron Moll Nick La Aral Balkan Aarron Walter Jan Cavan Sarah Parmenter Jonathan Snook Thomas McLeod Tim Van Damme Dan Mall Matthew Smith Ethan Marcotte Brad Haynes Denise Jacobs Estelle Weyl Jon Schlossberg Jesse Friedman The Conference Venue This year's conference will take place at New World Stages in New York on 15th + 16th November. New World Stages is located at 340 West 50th St, between 8th and 9th avenue at World Wide Plaza. Parking is convieniently located on both 49th and 50th street. Who's Going ? If you planing on going to the event, let us know so we can meet up!

Future of Web Design - New York

FOWD Future of Web Design is back to New York this November 15th - 17th. I'm happy to announce that me and Fabio are going to be there and it's going to be awesome! A 3 day event with the best speakers in the industry is a must go to anybody that works with web design. Find out more about the event. The Future of Web Design has changed! After a huge success of the new format in London, we're bringing the new look show to New York: two days of conference sessions, each with two tracks to choose from, and a day of intimate workshop allowing attendees to gain a deeper understanding of their chosen topic. What's going on? Future of Web Design - November 15th - 17th, New York The Best of the Best - The biggest Names in web design, presenting over 2 days of packed conference schedule. Bigger than ever Before - Future of Web Design New York is now a two day, two track conference. That's around 400% more content than 2009. Covering the Most Important Subjects - We cover the topics that matter the most to today's web designers and front end developers, including HTML5, CSS3, typography and UX. Added Learning Opportunities - As well as two tracks of great content there will be an extensive program of extra University sessions and expert-led design clinics running throughout the breaks. Relive the Conference - Online videos of all sessions, with integrated slides, audio and full transcriptions will be made available to attendees after the event, allowing colleagues to benefit too. Intimate Workshops - Full day (9am - 5pm) are also available to attendees wishing to delve deeper into specially chosen hot topics. Numbers are capped at 40 per session, ensuring a great learning environment. Great Changes for Networking - With over 500 like-minded designers descending on New York for the event, and both structured and informal network sessions provided, it's a brilliant opportunity to meet new friends and forge professional contacts. The Speakers Click here find out more about each speaker. Doug Bowman Molly Holzschlag Paul Boag Cameron Moll Nick La Aral Balkan Aarron Walter Jan Cavan Sarah Parmenter Jonathan Snook Thomas McLeod Tim Van Damme Dan Mall Matthew Smith Ethan Marcotte Brad Haynes Denise Jacobs Estelle Weyl Jon Schlossberg Jesse Friedman The Conference Venue This year's conference will take place at New World Stages in New York on 15th + 16th November. New World Stages is located at 340 West 50th St, between 8th and 9th avenue at World Wide Plaza. Parking is convieniently located on both 49th and 50th street. Who's Going ? If you planing on going to the event, let us know so we can meet up!