articles on

Web Design Process: Zee Site

I started Zee back in 2004 with a friend of mine, Fabiano Meneghetti. Throughout these years we have learned a lot, from our successes and of course from the failures. It's part of the game right, even though we try to succeed more than fail. One of this mistakes, was to partnership with people that did not share the same thoughts that we have, with different perspectives and ideas. Because of that, Zee had been suspended for 6 months. But after this period we thought that our way of thinking and everything we had gone through was worth it and could have not been simply forgotten. Abduzeedo, for example, was born after a robbery at Zee. Now we are back with Zee and we want to show you how we created our new website. Goals and Inspiration Our goal for the new site was that it would have to be super simple. Also we wanted to show that we were still in the game, that we’re always in the loop. That was the tagline we used for the teaser page and kept for the site. Simplicity One Page Only Big Slogan Short Texts Magazine Style The simplest way to achieve simplicity is through thoughtful reduction. - The Laws of Simplicity We had some ideas in mind however our inspiration came from magazines and books, we wanted a big text for the slogan, and short texts describing what we do and who we are. Portfolio For the portfolio we wanted to show a few works but keeping the user at the same page. From our statistics we knew that the visitors didn't spent too much time on the site, therefore, they couldn’t see all the information we had. Team As the site would have only one page we decided to use only thumbnails for the team section. We hid the descriptions and then showing only via Javascript when the visitor hover the image. The photos were taken by John Arlington, an excellent photographer friend of ours. We believe that a professional photo gives much more value to the design, and that’s why we contacted him. Layouts First idea after adding all the elements in the document. We didn't like the fonts though Second idea was with a different background and sort of a sheet of paper. Basically the second idea without a different background. Still it wasn't exactly what we were looking for. Creating the Site in Photoshop Step 1 First thing we did was to get a template model, we have been using a lot the 960 Grid System (http://960.gs/). So open the Photoshop Template to have the guides for reference. Step 2 We started playing with the logo and slogan, we broke the slogan in 2 lines so we could use one of the blocks as reference of width for the other texts, in this case the "the loop" block. We didn't pay attention to the text size because we were just laying down the elements. Step 3 Using the Rectangle Tool (U) we added a placeholder for the portfolio, in this case with the Abduzeedo logo. It's aligned in the center of the word "Always". Also with the Ellipse Tool (U) we created a basic navigation system inspired by the Apple iTunes Store. Step 4 Now we added a text that will describe what we do right next to our logo. For the font size we used 17. Also right next to the words "always in" we added another block of text that is a placeholder for a clients citation. Step 5 We tried to create a nice flow so the visitor would read the Logo and the text that describe our company, then our big slogan, our services and expertises with the portfolio for reference, then who we are and finally some personal projects. Step 6 A few adjustments especially the text alignments. Step 7 - Adding Colors We added a very light blue for the background and also a dark blue for the texts. Step 8 To create a nice effect on the slogan we started by adding a Drop Shadow via layer style, we used white for the color, 90º for the Angle, 1 pixel for the Distance and 0 for the Spread and Size. Also for the opacity we used 100%. After that we added the Inner Shadow. This time we used black for the color, 50% for the Opacity, 90º for the Angle, 2px for the Distance, 0 for the Choke and 1 px for the Size. Step 9 For all texts we added a white shadow like we did in the previous step. That will be done with CSS later on when we will be doing the HTML part. Step 10 We wanted to use some textures that's why we added the noise (Filter>Noise>Add Noise) on the background. We used 2% for the Amount and Gaussian. After that we added the same noise effect on the big slogan text. Step 11 With Layer Styles we added a white stroke and a shadow on thumbnails. Use the image below for reference. Final We added a few elements like the connection between the "in" and the "the". Also the quotes and the language navigation at the top. Basically this layout was used for reference for our HTML/CSS version. We did this version pretty quickly using Skype and sharing screen but we knew that a few things would change because of the texts and the versions, like the portuguese that required a new slogan. Conclusion With the layout done in Photoshop we created the HTML and CSS for the site. Most of the shadow effects were created using CSS3. Also we used Javascript for the tooltips and portfolio effects. We will publish a tutorial on how we did this part very soon. HTML sites Portuguese version with the new slogan English Details Portfolio work description Team description For more details visit the Zee website at http://zee.com.br

Beautiful Hand Drawn Websites

Illustrations are a nice way to give to your site a less formal style. With hand drawings, the style gets even less formal and also it gives to the site a super unique feel, allowing the designer to show off his/her skills. This type of element can be used for small details or even for the whole site layout. One thing is almost certainty, hand drawings will make your site looks more friendly, however it's very important to find the balance and make sure that they fit with the theme and subject of your site. In this post I will show you some beautiful hand drawn websites. They push the style close to the perfection, in my opinion, and I'd like you to pay attention to the usage, as I said, in some cases they use the hand drawings just for details, while in others, it's the whole site. I hope you like them

Super Cool Free Icon Sets

Yesterday I was looking for some icons for a project I am doing lately, and it's just great how DeviantART got some awesome free icons! It is a great place to find just the right icon to pimp your designs, so I've selected a few! These are pretty cool, and the best thing about them is that it's all free. So hurry up and go catch these great sets of icons... So, I hope you all enjoy my selection! Cheers. ;)

The Future of Web Design - New York City 2009

Next week the famous Carsonified Event "Future of Web Design" takes place in New York City and here you will see what to expect from this great event. The best web designers in the world will take place to talk about different topics that will bring up your web game to the next level. Check it out! First you need to visit the event page http://events.carsonified.com/ to get a good felling of what's going on. This year FOWD will take place in NYC on November 16th and 17th. To Find out about Event Location and Schedule visit http://events.carsonified.com/fowd/2009/nyc On November 16th you can choose from 8 different workshops to attend, here is what's on the list. Open Web Standards for the Rich Web - Molly Holzschalag Real World Accessibility for Web Designers - Derek Featherstone WordPress Theme Development for Web Designers - Elliot Jay Stocks How to Design Effective Web Content - Kristina Halvorson How to build a HTML5/CSS3 Website Today - Steve Smith Design Secrets of digg.com's User Interface - Daniel Burka How to use JQuery to Enhance your Web Design - Karl Swedberg Best Practices in Web Typography - Dan Rubin On November 17th, the Conference will take place and this is what will go on: Progressive Enrichment with CSS3 - Dan Cederhom Feedback informing design: Listening, really listening, to your users - Daniel Burka 3 Dimensional thinking for web designers - Mike Kus Accessibility in a Web 2.0 World - Derek Featherstone Stop Worrying & Get On With It: Tips and Tricks for designing for the Modern Web - Elliot Jay Stocks Partner Presentation - Bill Buxton New York Shorts: Vimeo - Blake Whiteman Familiar Futures: Making Mars Feel Like Home - Kyle Sollenberger The Long and Short of It: Panel Discussion - Liz Danzico, Jason Santa Maria, Paul Ford, and Kristina Halvorson. HTML5 Killed XHTML2: And the Mysterious Future of Markup - Molly Hozschlag FOWD Keynote: "Space: What does it mean?" Joshua Davis Meet the Speakers We’ve got some awesome speakers lined up for you this year at FOWD. Here's who we've got lined up so far. Don't forget to check back for updates to the speaker list. Click here to check the list. For all the abduzeedo users, I will be attending the event and would like to meet up with all our users that are going, leave a comment and will set it up. Last year FOWD was in New York as well and here you can watch all the content: Dan Mall The Experience Layer: Using Flash, JavaScript, and other technologies to engage users. Derek Powazek The future of community and crowd-sourced design Hillman Curtis Then minutes of Design Inspiration Mike Kus Whatever happened to the Art in Design? Nicholas Felton Charting Daily Data Nick La Finding Inspiration from your Environment Patrick Haney Web Design Fundamentals: Learning from the past to the better future Paul Boag Educating clients to say yes

Web Design in Pixelmator

The newly released Pixelmator includes a very important feature: the Slice Tool. Now we can slice and save pieces of the layout to create Web sites. That is really handy! Because of that, I decided to create a tutorial showing how to create a Web site design using Pixelmator. Step 1 Open Pixelmator, go to http://960.gs/ and download the template files. Open the PSD version so that you will have layers with guides. Select them all and go to Layer>Merge Layers. After that, fill the background layer with dark grey (#333) using the Paint Bucket Tool (N). Step 2 Go to Filter>Stylize>Noise. Use 1 for the Amount. Also make sure that Monochrome is not selected. Step 3 Add a new layer, and fill it with white, again using the Paint Bucket Tool (N). Then go to Filter>Generator>Stripes. Use 6 for the Width and 100 for the Sharpness. After that, change the Opacity to 5%. Step 4 Add a new layer, and, with the Gradient Tool (G), fill the layer with a gradient from Grey (#666) to black (#000). You will have to resize the layer as well because, when you fill the layer with the gradient, it will fill the whole area. Go to Edit>Free Transform. Step 5 Add another layer and fill it with black using the Paint Bucket Tool (N). That layer will be beneath the layer with gradient. After that, change the opacity of this layer to 70%. Step 6 Create a new layer with the Rectangular Marquee Tool (M), and then fill it with white using the . Go to Edit>Free Transform (Command +F). Then resize the rectangle until you achieve a 1 pixel height line. After that, change the Opacity to 20%. Step 7 Place the logo on the header now. Use the Type Tool (T) to create the text. Step 8 Let’s import an iPhone template. You can download the PSD file at http://www.teehanlax.com/blog/?p=447. Place it in the document. Use the image below for reference. Step 9 Choose an image, and place it in front of the iPhone. Then, with the Rectangular Marquee Tool (M), select the visible screen area of the iPhone and mask the image you have just imported. Step 10 Import some icons and then create blocks of text using the Type Tool (T) for the titles. Use Lucida Grande Regular, 14pt and white. For the description text, use Lucida Grande Regular, 11pt and grey (#999) Step 11 Now add a slogan, again using Lucida Grande Regular, 24pt and white for the color. Then add a little text below that, again using Lucida, but now in 14pt and grey (#999). It’s important to create a big block of content with the slogan and description aligned to the left and with the block of features. Step 12 Add the App Store Badge with some text next to it. Step 13 Add a new layer beneath the iPhone, and go to Filter>Generator>Clouds. Use black and white for the colors. Step 14 With the Eraser Tool (E), delete most of the layer, leaving just a few parts beneath the phone, as if it is smoke coming from behind it. Step 15 Add a new layer on top of the smoke layer, and fill it with dark yellow (#f88b00). Then change the Blending to Color Dodge. With the Eraser Tool (E) again, delete most of the layer, leaving just the parts over the smoke. That will create a nice flame effect. Conclusion Now, with the Slice Tool in Pixelmator, we can start creating layouts. In this tutorial, I covered basic tips such as creating a nice stripped background, subtle 3D effects, and, of course, a nice light/fire effect. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial

Abduzeedo Gets a Facelift

After almost a year, we have a new design! As web designers we’re always thinking about what to change in order to make the site more friendly for those who are looking for inspiration and tutorials. Our main goal was to simplify the design and also add more white-space. The images of the articles have and always will be the main asset of the blog so we wanted to drive the user’s attention to the images and text, and less to the interface itself. That’s why we have removed the stars on the header but still kept them on the footer. Also we were very inspired by magazine designs, that explains the text overlapping the images. New Features Among the main changes on the new design we could list: Bigger images Preview image at the top of the articles More white-space Thumbnail view on the home-page Threaded conversations on the comments CSS 3 for effects (sorry IE users) Big preview image with text overlapping Thumbnails view Reply to comments Navigation In terms of navigation, we split the menu in two. The main menu consists of the most important categories on the blog: Tutorials Photoshop Illustrator Pixelmator Fireworks Quick Tips Case Studies InspirationArchitecture Illustration Photography Daily Inspiration Sites of the Week Best of the Week Popular Post Wallpapers Inspiration Meebo Bar Another great feature we added (and that we're really excited about!) is the Meebo Bar! The Meebo Bar allows you to drag and share any images of the site via Twitter, Facebook or email. Also we will be able to chat while navigating on Abduzeedo. That way we might even be able to help you guys on tutorials or any questions you might have regarding posts and so on. Meebo Bar It doesn't just stop there. Abduzeedo is always under development. We try to learn as much as we can from you and we’re always open to suggestions. Our idea is always to make the experience as better and simpler as possible. We still have some features up our sleeves that will be released very soon! One thing I can reveal right now is that our iPhone app is 95% done ;) iPhone app is coming Also we want to mention and thank our hosting (mt) Media Temple for the great support during the redesign process, we were working with the 2 versions and sometimes doing crazy things but they guys over at Media Temple kept Abduzeedo up and running.

Web Design: Grain Texture

I'm designing my new portfolio, and lately I've been checking many sites to get somekind of reference for inspiration. One of the main style that I've check as a cool trend is the Grain Texture, that can be done really easily in Fireworks. So I've made a list of sites that use this simple, yet awesome texture! Also, do you guys know anymore sites that "wear" this texture? If you do, tell us! Leave a comment! I hope you enjoy these! Cheers! ;) Radium "Radium is an internet marketing agency specializing in SEO, SEM and social media marketing. We provide a high level of interactive consulting services that deliver measurable results. With a holistic approach to online marketing, we ensure technical alignment with strategic objectives and create winning online campaigns that succeed in an ever-changing environment. We have offices in Austin TX and Boston MA." Mark Jardine "I’m the designer for Tapbots, a tiny iPhone & Mac software company. When I’m not pushing pixels, I like to take pictures, draw, and play with cars." MetaLab "We are an interface design agency, we have been in business since 2006, we work from two different countries, we strive for pixel-pixel perfection, we believe simple is beautiful." atebits "atebits – suspiciously simple software" Bohemian Coding "Although I use the plural everywhere when I talk about Bohemian Coding, there's only one person in this company. Bohemian Coding was founded early 2008 in the Netherlands and is being run by Pieter Omvlee. We develop a number of great (at least in our opinion) shareware applications for Mac OS X and have many things planned for the future." Utterly Ingenious Digital "UiDIGITAL continue to provide full digital services that are invaluable to our business. Having engaged UiDIGITAL for a Strategic review of our web activities, we continued to a successful re-launch of our site, with an immediate upturn in performance. Not only that, but UiDIGITAL deployed a simple system that lets us update our own site at last!" Note & Point "A gallery devoted to making your Keynote and Powerpoint presentations look that much better." Shadowbox.js "Shadowbox is an online media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page." Robert Alan "I'm truly first and foremost a Web designer. From the moment I created my first table-based site in 2000, I was hooked. Since then, I've bootstrapped my way to standards-based design with XHTML and CSS. There is nothing I love more than the feeling of working an original, hand-crafted Photoshop comp into fresh, validated code." Jason Stockman "The design process involves heavy research and analysis of competing sites for your niche to uncover the best ways to improve the user experience." Make Film Work "I specialize in shooting. It's what I love. Give me a camera and I'll get to work. I'm also an experienced Final Cut Pro editor, having logged hundreds of hours over dozens of projects. I've worked on everything from sixty-second business spotlights all the way to feature films. If you've got it, I can cut it."

55 Beautiful Green Layouts in Web Design

And continuing the series 'Beautiful Layouts in Web Design', today is all about green! As any other color, green has tons of beautiful shades... sometimes it's even a bit hard being sure that it's green that we are looking at. But anyways, here is a great selection of Green Layouts for you to enjoy and get inspired about. Once again you will find here a bit of everything: flash, html, drupal, etc. It's amazing the enourmous amount of good and beautiful websites we can find out there. There are for sure a lot of talented and creative designers and for sure many other great sites that are not listed here. So if you have anything to share, go ahead!! For this selection I browsed around: CSS Gallery - Design Shack, cssperk, CSS Import and Best CSS Gallery between some other sources such as deviantART. So I recommend you to check out these places, they have several websites to show. And also, click at the images to visit the websites we will show here... Hope you like it! :) And in case you have a suggestion for a next post (another color, style, etc), let me know via twitter.com/GisMullr. Aenemya - Digital art and web design portfolio of Marie 'kReEsTaL' Guillaumet Eco Environments Ltd Freelance Switch onehub Visual Elixir lionite portfolio devthought Nathan Sanders markup4U quadrifolia psdtolife mint Silverbackapp e-invent Pink Cactus coldcactus SprintBio Monk Development The Foster Mobley Group QueroMedia Simply Invoices Create a Revolution Stormlab frexy Mint: A Fresh Look at your Site graphiceyedea Bepeck Envato Essences d'ici et d'ailleurs RIPIE6 CSS Mania ASDA Financial Services CSS Import Sprouter Big Cartel Sofitek Lilly's Table I Avion Crazy Xhtml LAQED hrasti Lipton Green Mint Nybble Tech Lisa Bun Green Infrastructureinc And some samples from deviantART (under development) by KRoNiC-fx by SencerBugrahan by pho3nix-bf by spaka by koenigpersoenlich by gajdoslevente by detrans by BuBBaspa Suggested by @earthdesigner EMOTIONS by Mike Christine Galvin Design Green Any Site

52 Beautiful Blue Layouts in Web Design

One of the things that I like most about web design is its results... yeap, I love to see great designed websites, and for sure we can find a bunch of those out there. Today we will show some beautiful blue layouts in web design. At this selection you will find a bit of everything: flash, html, drupal, etc. As I'm looking around for some inspiration for my personal site (that I'm putting together) and I know that everybody loves to check out a good design, I decided to make this selection to show you. Most of the sites from this selection were found at CSS Gallery - Design Shack and cssperk between some other sources, so I recommend you to check out these places. And also, click at the images to visit the websites we will show here... Hope you like it! :) And in case you have a suggestion for a next post (another color, style, etc), let me know via twitter.com/GisMullr. Lucino & Gene Abogados Best Electrical Safe Driving Academy Envira Media Inc Bartelme Design Maniac Monkey Media Tropical Sky Diving Graham McDonnell Glacial Multimedia dgerelo CSS Garden Alex Swanson ZCOPE Ballpark cmsthatsuitsyou.co.uk MonAssoc FeedStitch Kosh Creative EyeDraw Owltastic leihu.com Bluedots Design Thermometer App Have you flossed today? Sourcebits Istanbul Dental Works Insight Studios reichweite.cc marketing-informatico.com nclud nitobi Amit Khera Squared Eye Post Box Sohtanaka Drupalcon nys.wri sIFRvault Koves Technologies LLC Blue Bonnet Cafe Ahlera Jack Flavored Rums Opal Cove Resort dg web design portfolio nirmal Sphere Powerset LocalSearch in a Box Carron Media Design Disease Designed by Fabio "abduzeedo" Sasso, Eduardo Sasso & Fabiano Meneghetti Openjobs Sikbox

Big Fonts in Web Design

Web design has its own limitation, and us, web designers, have been working and learning how to overcome these constraints to create better solutions. Typography is our most important asset and we're seeing that designers are applying old concepts that they've learned from print design and applying to web design, in the right way. That's why we've been seeing more and more big contrasts in font sizes. In this post we selected some pages that we have for inspiration to show you that.

Web Design: Awesome Magazine Style Sites

It's been a time since we had a web design post. There's one trend that I find really awesome and I enjoy very much everytime I find a site featuring this style. Magazine style sites are usually very beautiful and well design, and here are some examples. From Fubiz to Justin Timberlake's site, these are great inspirations for every designer. There's not much to talk about it, so if you know any more of these magazine style sites, please, drop a comment! We'd love to check it. I hope you enjoy these as much as I did. Cheers! ;) One Nation Magazine Zaum & Brown Justin Timberlake B I G K I D Food Tease We are hunted Typographica Iinsight CreativeDepart The Book Cover Archive UGSMAG J Taylor Design Kosh Creative IndiePit Fubiz Filtersage Sexxx Church Cleveland Clinic Sower of Seeds

Web Site Design Tutorial: Wellknown.as Case

Last month I met some guys that are working on a really nice project that involved an iPhone app. So they invited me to design the web site, called Wellknown.as. I loved the idea and started looking for references and inspiration so I could start the design itself. So in this tutorial I will show you a little bit of how I created it using Fireworks. Of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same. Design References Step 1 The first thing to do is of course have a concept in mind of what you want to do. In my case the guys over at Wellknow.as told me exactly what they wanted for the layout. Also I used a CSS Framework and the Fireworks template. You can download it at http://960.gs/ Step 2 With the Rectangle Tool (U) create a new rectangle with the document size. For the Color use Solid and #191D22. Then on the Properties Panel, click on the Add Icon (+) and select Add Noise. Use 1 for the Amount. Step 3 With the Rectangle Tool (U) create another rectangle but make it like a stripe starting on 200 pixels in the Y axis. For the Color use #1c202a. Step 4 Click on the Add and to to Shadow and Glow > Inner Shadow. Use 0 for the distance, 40% for the Opacity, 1 for the Blur and 270º for the Angle. Step 5 Click again on the Add icon and choose Shadow and Glow>Drop Shadow. Use 0 for the Distance, 65% Opacity, 4 for the Blur. The angle won't make any difference because the Distance is 0. Step 6 Now again let's add some noise so the rectangle won't have that solid color, but instead a nice plastic feeling. Step 7 Here I placed the iPhone image right in the center of the image as it was sitting on. They didn't want to show the interface of the app right now so that angle was perfect. Step 8 Duplicate the layer and go to Modify>Transform>Flip Vertical. Then change the Opacity to 50% and go to Modify>Mask>Reveal All. With the Gradient Tool (G) select the black and white preset and apply it on the layer mask. What is white will be visible and what is black transparent. So, create the famous wet floor effect. Step 9 Add a new rectangle with the Rectangle Tool and fill it with a gradient using white for the both colors. Just change the opacities one will be 100% (1) and the other 0%(2). Use the Gradient Tool (G) to apply the gradient in a angle of 90º. Step 10 To create the light effect it was very easy. With the Ellipse Tool (U) create an ellipse, then use white for the color and change the Edge to Feather and 100 for the value (1). After that just change the Blend Mode to Overlay (2). Step 11 Now duplicate to make the light stronger. Also add different ellipses to make the light effect more realistic. Another thing that is very important is to play with the opacities. Use 50-60% for the new ellipses. Step 11 For the slogan, I used Arial 35px for the typeface because Arial is the iPhone's font, and a gradient from a light grey to white. Also I added a shadow using 1px for the Distance, 90% for the Opacity, 1 for the Blur and 90º for the Angle. Step 12 With the Round Rectangle Tool (U) create a rectangle, fill it with grey and change the opacity to 80% (1). The with the Rectangle Tool (U) create another rectangles but beneath the grey one. Also make it smaller (2). Again with the Round Rectangle Tool (U) create another element (3). Then select the 2 round rectangles and go to Modify>Combine Path>Punch. Select all elements and group them. After that add a noise like in the first steps. Step 13 With the Line Tool (N) create a line then go to Modify>Mask>Reveal All. Select the gradient tool and the black white preset with oval for the type and paint over the layer mask. That way the edges will fade. Step 14 With the Ellipse Tool (U) add an ellipse in black and change the Edge to Feather and use 60 for the amount. Then with mask, hide the part below the line. To do that is super simple, create a rectangle with the area you want to show and go to Edit>Cut. Then select the ellipse and go to Modify>Mask>Paste as Mask. Step 15 Repeat the same process to mask the Id Card. Step 16 Now let's add the lanyard. Again repeat the same process to mask it. Also add a little shadow to the card and lanyard. Step 17 Place some icons on the left column and it's time to add the content. Step 18 Make the guides visible so we can have a visual reference to create the columns and place the content. That will be really important when you code the CSS. Conclusion The layout is done, I need to do a few adjustments to make the slicing process a little bit easier but we have the whole home-page created. The design process was quite simple even the tools and filters we used, the most important thing was to define the concept before going to the tool. The same thing could be done in Photoshop or a different tool, however, with Fireworks we have the super useful vector capabilities and the non-destructive filters that make the process much easier. Also the way we can play with gradients in Fireworks is simply unbeatable. Click the image to visit the web site

Web Design: 22 Great Drupal Sites

For some time now, I'm getting to know Drupal, a really powerful, open source cms. With it, it's possible to do virtually any kind of site you want, and it's great for magazine style sites. If you don't know, Abduzeedo is made on Drupal. Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites. So I went through the internet, looking for some nice sites made on Drupal, and for my surprise, it looks like people don't explore it too much, making mostly magazine, journal style sites. Anyways, here's a selection of sites, and at the bottom, the sites made by our staff. Sites made by our staff

Web Design: Orange Sites

After a really long time, we're bringing back our Web Design series. I had this in mind since the our last post in this series, but since we were exploring new areas, we didn't have the opportunity until now! This color will just pop out from any layout! I went through hundreds of site to find these... so, to inspire you guys, I've made a selection of some really good orange sites! I really hope you enjoy these! Cheers. ;)

25 Great Examples of iPhone Optimized Sites

During the weekend I decided to work on the iPhone version of Abduzeedo. Firstly I thought that only a few tweaks in the CSS file would be enough, but it was a bit more complicated than that. However, there are quite a few ways to create a nice iPhone version for your site using services like Mobify.me. In my case, I decided to build a new Drupal theme from scratch. Before going straight to the code, I looked for some examples of good sites optimized for the iPhone. A really cool site to use as reference is the http://cssiphone.com, it's full of screenshots of the coolest iPhone sites out there. So here's my selection, hope you enjoy it.

350+ Great CSS Tools and Techniques

One of the most enjoyable moments for a web designer is coding CSS. It's such a nice language that it actually gets fun to work with it... style your pages and actually watching your designs gain life and forms. But sometimes, a little help is welcome. Even being a fun thing to do, sometimes you run into some problems, trying to find the right way to get a certain look. But for our sake, there are many many great sites out there that help us during these times, such as the great CSS Play, Smashing Magazine, and others. Taking a quick ride thru my Delicious, I took a look at some of my CSS tag favorites, and I'd like to share them with you. These are really resourceful articles, worth the visit. From tools to simple techniques that will help you at some point. Hope you all enjoy these!! Cheers. ;) 50 Extremely Useful And Powerful CSS Tools 12 CSS Tools and Tutorials for Beautiful Web Typography 101 CSS Techniques Of All Time- Part 1 53 CSS-Techniques You Couldn’t Live Without Powerful CSS-Techniques For Effective Coding 25 Code Snippets for Web Designers (Part1) 25 Code Snippets for Web Designers (Part2) 25 Code Snippets for Web Designers (Part3) CSS Dock Menu Most used CSS tricks

Web Design: Footers

When you check a nice designed web site, is kinda frustrating when you realize they didn't get a cool footer. Each has its body, and the footer is such an important part of it that I just can't understand how come people don't spend time designing it properly. It's really awesome when you surf the web and run into some cool footers... and here's a brief selection of some I found. Hope you like it! Cheers. ;) Tickerville Viget Labs Dale Harris Meet Crush + Lovely Brad Colbow Sarah Longnecker Fubiz The White House Kontain Kitfolio Sprocket House Fabio Carneiro Matthias Schütz