articles on

Web Inspiration: Video Backgrounds

Hello, it's been a long long time since I've posted something but I'm happy to be back and I hope to post more often. I've had this idea for a post for a while, it's something I've seen only a handful of times but I really like it. It's about websites that use full page videos as their backgrounds. Similar to the idea of using full page photos that we talked about here on abduzeedo last summer. I totally dig this design style. Can't say it's a trend yet because I haven't seen too many. Here are some examples of sites that do this. The first used to automatically start when you loaded the page but then he changed so you have to click on the image to start it. If you know of anymore sites like this, please post the links in the comments. Electrick Suicide This one (IDEAL) is my favorite out of all them. The look of it is awesome, you can control the video just by the move of your mouse or you could just let it play on it's own. IDEAL I'm sure many of you already know of this site since they are a pretty big international agency. Razorfish And if you are interested in doing this for yourself, I've found this website that you can buy a pre-made flash file. I'm in no way affiliated with this site, it just turned up in my search. I like how you can choose how many scan lines your video could have. Lets you give your site that old found video feeling. Flash Den

35 Black Web Designs That Show Us That Once You Go Black, You Never Go Back

It's been some time since we had our last post on the Web Design series. We've been giving you a lot of graphic design inspiration, but it's time to get some web awesomeness. Yesterday we had black wallpapers, today, it's all about black layouts. In August 28th we had the first Black Layouts post, and it was a big success! And since we've featured Black wallpapers yesterday, we've decided that once in a while we'll make a color week. This is the beginning, the Black Week! And tomorrow we'll get more of black design inspirations! Hope you all enjoy my selection... I had a hard time finding these. Cheers! ;)

Designing for the Web Book Giveaway

Web design is very different from graphic design, probably everybody knows that. But the real question is what makes them so different, and how graphic designers could start doing some web design projects. A good answer to that is the web design book A Practical Guide to Designing for the Web from Mark Boulton a designer from the UK. What is the book about? A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design. Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one. Who should read this book? Anyone who fancies a great read! No, seriously, if you're a designer, developer, or content producer, reading A Practical Guide to Designing for the Web will enrich your website design and plug the holes in your design knowledge. About the Author Mark Boulton is a designer from the UK. He’s worked exclusively in web design for over ten years, but has a background in traditional graphic and typographic design. Drawing on this traditional background, Mark is able to bridge the gap between graphic design and the modern web design. Mark runs his own web design studio, Mark Boulton Design, who specialise in designing simple, beautiful things for the modern web. He also co-wrote Web Standards Creativity published by Friends of Ed, and he writes a popular blog, mostly about design. Giveaway We have 2 copies to give away. To win it is really simple, just leave a comment telling us what's the biggest difference between Graphic and Web Design. Preview of the Book

50 Awesome Blog Designs - Part 1

Blog designs is something I really enjoy seeing and designing as well, I remember not too long ago when most of the blogs where pretty much the same with the same structure and changing only colors, check out how they look now. This is a series I want to continue every now and then to create a good inspirations for all the bloggers and web designers we got here. As I was saying that not to long ago the blogs where pretty much the same, has totally changed, not only the design but the structures of a blog can be anyway you can Imagine, and that's also something that amazes me. So look out for that and enjoy the selection. If you have a cool blog, post a link and it may get on the next selection.

Easy Wireframes with Balsamiq - Giveaway

When designing something there are always some basic steps we follow. They might differ from designer to designer, but one thing is most certain, there will be a sort of sketching/conceptual step, when the colors and details are not important but where we put together an idea of what the design will have in terms of elements and form. With web design it’s no different. We need to create a rough wireframe of what the thing will look like, prior to building a wireframe in HTML showing behaviors. I usually do that on paper pretty fast, however as I’ve been working apart from my colleagues it was always very hard to send them those drawings. I had always to go to Fireworks or Illustrator to mock it up. Even though it’s simple to achieve in FW or AI, I needed to create all UI elements like scroll bar, video players, etc. That’s where Balsamiq comes to help us. Balsamiq is a very useful tool. Built in AIR it simply has a library of UI elements that you can drag to your canvas and create nice and simple wireframes pretty easily; and very quickly. It comes with a huge library of UI elements from Browser Window to Cover Flow element. It has pretty much everything you need to create a simple wireframe. You can export as a PNG or even as an XML file, allowing you to sent it to your coworkers so they can import and edit your prototype. Using Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting. Balsamiq is really cool, the only thing that bothers me is the Comic Sans font, maybe they could use a different one. Also, We have a license for Balsamiq to giveaway. To win just leave a comment. The winner will be announced next week. Some Examples of Wireframes created with Balsamiq.

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 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 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.

Web Design: Brown Sites

What's up, people? I know that many of you really like our web design series, and that's why we're bringing to you another one about it! How do you guys feel about brown sites? Probably you don't think brown as a great color to design, but once you see these sites, you'll most definitely change your mind. These are great pieces and makes us add brown to our color pallet. I hope you guys enjoy these!! Cheers! ;)

Web Design: Medical and Health Sites

Back in the week we received the awesome suggestion of having medical and health sites featured here in our Web Design series. I gotta say it was a true challenge to find good looking sites... but I think I managed to find cool ones. Here's my selection. And please people, if you know any more sites of this kind, please link it!! We'd love to know more of these!! And I hope you like these! Cheers. ;)

Web Design Inspiration: Mike Precious

We love portfolios... getting to see someone else's great work is something that anyone loves, except those jealous people out there that just don't enjoy other people's works. Today, we got to know this great designer called Mike Precious. Now, I don't know if he's name is actually "Precious" or what, but that's pretty damn awesome. Anyways, he makes beautiful design and you guys should really check these out! After that, don't forget to pay him a visit! Cheers! ;)

Inspiration: Foan82 (Renato Miguel Simoes)

Foan82 has an eye candy portfolio that is hard not to pay attention to, the quality and diversity of the work of Renato Simoes is just incredible, totally worth checking it out the work of this Portuguese designer. Foan was born in 1982 in the city of Lisbon, Portugal. He graduated from college in communication and graphics techniques of design. His first lecture on communication design was given with 25 years old. Co-founder of Rvadesign Studio, where he works as illustrator and new media designer. Worked in several publications and international projects. Currently freelance designer and work for some agencies. For more visit Foan82

Design Tips: Educating Clients to say Yes

Design is all about providing the best solution for a problem to a target audience. That's at least the simple way to describe what we do right? Well, some times it can't be harder to make people (and for that I mean clients) understand that and approve a design based in goals and not in a personal opinion based on taste. Even though we can manage to make the client approve a design, the worst thing is when after they approved they decide that the design is not good anymore and it will be necessary to change a little thing or to add that other thing, and in the end what we got was a Frankenstein design. So what can we do? Paul Boag, a famous web designer and host of one of the coolest web design podcasts out there, Boagworld, did a great presentation on that subject on the last Future of Web Design Conference and he has some tips for us on how to make clients understand our work. The keynote was called "Educating Clients to Say Yes", and he talks about how to make clients understand what we do, and some tips on how can we make they approve our work. I highly recommend you to check that out right now. Also Paul Boag is behind a nice web service called GetSignOff that is exactly about that, getting your design approved. You may present your site designs, manage feedback and also organize multiple versions of your designs in a clear way: Do you struggle to get design sign off? You may produce the best website designs ever, but getting sign off is always painful. Presenting designs to distant clients and managing their feedback is challenging. GetSignOff provides a mechanism for presenting your site designs, managing feedback and organizing multiple versions of a design. The service is really nice and simple, you create a client and upload your design with the explanation of your approach to it, also you can add notes directly to the design. Then you send to the client a link to a page where he can see that and leave comments. Once you have the client's feedback you can revise the design and send it a new version. For more information visit the GetSignOff website, they have really good videos showing how it works and give it a try. I think the best way to make clients understand what you do and respect you is showing that you are really professional. You have a very organized system to present and deliver your work, and the most important: you have documentation of the work you have done. Sneak Peak at from Paul Boag on Vimeo.

Inspiration: Marcio Toledo

Yesterday I happily crossed Marcio Toledo website where he has a great portfolio selection, and if you love web designing this is something you most see, not only the design but the structures of the websites he designs, very good inspiration for those who like it. Brazilian cross-media designer with 6 years of experience in the market for internet, print and advertising, has developed projects for clients like ABC Television, Atrativa, Bandai, Bavaria, Cartoon Network, Dj Patife, Gafisa, Grupo Pão de Açúcar, Governo de São Paulo, Helbor, I-Play, Imovelweb, Investbolsa, Lycos Networks, Lopes, Microboard, Nestlé, Oi, Petrobras, PlayPhone, PSDB-SP, RatedPhone, Real Arcade, Sega, Skyzone, Sobloco, Spinelli Corretora, Spring It, Tamboré, Wal-Mart among others. For more visit

Web Design: Rock Bands Sites

There's been a long time since I've actually visited any band site. But today I was wondering how band were presenting themselves in the web, and it's been a cool ride. I know that this list features solo artists, but still, Alanis' and Madonna's sites are pretty cool, and worth a visit. Anyways, this is another post of our great Web Design series... for further inspiration, visit our other posts about it! So go on and check these out! Cheers! ;) Aerosmith Foo Fighters Alanis Muse The Strokes Third Eye Blind Metallica AC DC Blur Coldplay Beastie Boys Rooney The Killers Franz Ferdinand Maroon 5 Madonna U2 Green Day Oasis R.E.M. Eagle Eye Cherry The Kooks Semisonic Daft Punk Dashboard Confessional

Web Design: Yellow Sites

When you design a new site, the best thing is having lots of options: gradients, minimalist, blue, black, green... and all other cool trends we've seen so far. So, check out today's trend: Yellow sites!! Hope you all enjoy my selection!! Cheers! ;)

Web Design: Real Estate Sites

One of the best clients for web designers are Real Estate agencies. As Lex Luthor would say, big money lays in land, property... so there's where you'll find good clients. You can count on that. And here is a little inspiration for you. These are really awesome, I was actually concerned that I wouldn't find good looking real estate sites, but I was wrong; there are plenty. Since I'm looking for a good structured settlement with any nearby school, I started visiting some of these (in Brazil only), and found good sites, so it come to me to make this post. I hope you all enjoy this. Cheers! ;)

Web Design Inspiration: Lucas Hirata

During my daily reads, I usually spend sometime at, Brazil's biggest network, where one finds many subjects, from sports to the latest politics news. It's got a fresh design, and last week I've found the designer behind it. Lucas Hirata is a Brazilian designer from the state of Bahia, and has been designing since 1996, but in 2006 he started working to Globo, and it's been doing awesome interfaces for them since them. If you enter, you'll get to see his major work. Besides Globo, there are also some cool pieces, check them out here. Hope you all enjoy these. Cheers! ;) For mor info visit Lucas website at

Web Design: Grunge Sites

Following our series of Web Design, today I bring to you only grungy designs (user request). These are pretty awesome, so come on and check it out! Grunge design is really nice to do... there are a few elements that make that grunge look: dripping sprays and paints, non-regular brushes, torn papers, old paper textures, rough edges, among many. Here is brief selection of sites... I hope you enjoy these. Cheers! ;)