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
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
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
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. ;)
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.
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
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
"Less is more". That's what some people say... and they might be right. Usually, minimalistic sites are really beautiful, and even with few elements, they deliver us their message, and that's just what we need. Even though we really like checking some cool sites with lots of elements, minimalistic sites tend to be more straight to the point, what give 'em lots of points. Also, these sites look really fancy like that. Anyways, here is my selection on minimalistic sites. Hope you all like it. Cheers! ;)
Every day I go through a lot of blogs and I always try to notice and understand why they display their post the way they do, so I decided to share with you guys by selecting a couple good blogs and talk about how they display their posts on the main page. Well, surfing on the web you can find thousands of blogs about everything and most of them will have different designs and different ways to display their posts on the main page, this is what we are going to talk about on this post. The most important thing about blogs and what make them be a good or not it's the blog's content, independent of it's look and style the blog content is definitely the main thing on a blog, even if you got the best looking blog on earth and don't have a good content there is no way your blog will succeed. You may think it's not but the way the posts are displayed on the front page can set you blog from being successful or not. You have to adapt the way you display your content to a couple things so you can fit the design and structure to it's content. I know there should be at least a little bit of study behind that for each blog, but sometimes it doesn't happen that way. I'm going to be showing a couple samples and talk about it so we can get a better knowledge about it. The things you see in most on the blogs when displaying their post is: (It does not always come in this order) Post Title Post Description Thumbnail Date Author Tags Category Comments Read More These are the most common things you see on a post display and I think it's good to have it all but in the right way depending on your needs, let's see how others do so we can get a good idea, I selected 3 big blogs that most of us know to show how they work. SmashingMagazine http://www.smashingmagazine.com/ As most of us know, this is a blog that has very useful and innovative information for designers and Web developers and it's very interesting the way they display their post, very different from most blogs. SmashingMagazine have very big and complex posts, because of that they don't post many times a day like a lot of blogs do, but I would say they post around 7 times a week and the way they display each post on the main page is very important, the index fit's 8 posts so if you come to the blog one time a week you are able to see everything they posted for that week without having to look any further. Because of the fact that they don't post all the time they make each post very known on the main page by using a very big way to display what they have, I would say that's a very smart move and it fits their need very well. They use a big title with the color green, a color there can't be seen anywhere else in the blog because that way when you see the big green letters what comes to your mind is that a new post is starting, and also is very well used to drive the readers attention to the post which is great. To follow that they have a very simple line that starts with a little icon to represent time and date and also has in light color text the name of the author, the date of the post, a link for the category and the number of comments. Notice that the category link has a lighter color than the usual links of the blog. After that comes a big description of the post where they use bold font to highlight the main words of the description since they have such a big post description, their thumbnail comes in between the description and it's always very direct, it doesn't take the whole width space and it comes in different sizes depending on the posts. To finish up a read more link (notice that if you click on the title or on the thumb it will also take you to the post) When the main element of a post it is the written content, the post description plays a big part and a lot of times it's even the begging of the written post, focused on that you need a nicely written description and remember that the post title is even more important because people want to know what they reading about. Also remember to put a thumb that doesn't take a lot of attention because thumbs attract eyes and clicks to see the full post. Fubiz http://fubiz.net/ Fubiz is a french blog that brings great design inspiration and has a very elegant way to display their posts. Fubiz has a simple but very elegant way to display their posts, it's a very busy blog with an average of 16 posts a week and it's main page fit's 12 posts. The posts start with the title in a darker text color than the rest of it and to help drive some attention it comes with a little vertical pink bar just enough to put you eyes in the right place to start reading the post. The title is followed by a small post description with light color text because the blog content is mostly images so the description is there but doesn't really need to be read. The thumbnail is the most important thing on their post, it takes the whole width and vary on the height. Having a good thumb up front is a big step for having a successful post. After that comes a link to read more, but you can also go to the post page by clicking on the title or the thumb. To finish up they display their tags highlighted and it's also a link for that tag, and a simple line starting with a icon that represents date and time followed by the author, and the date of the post. Their post has one extra thing that shoes how many votes their post have represented by a heart and the number of votes. On the right bottom part you can see an icon with the number of comments which make that stand out a little and maybe encourage people to read more and go on to the post page by the number of comments. For a inspiration website the main focus is the inspiration which are the images. That makes the thumbnail the main element on the posts so it's good to get a decent size thumb. PSD Tuts http://psd.tutsplus.com/ PSD Tuts is a very well known tutorial blog that post the best of photoshop tuts. The way they display their post is very cool, everything is always the same changing only the content. They post an average of 7 times a week and their main page fits 10 posts. What comes first on their post is a 200x200 pixels thumbnail on the left side and all the rest of the post info comes on the right side. Continuing on the right side we have a big post title with darker color and also big comment icon with the number of comments, I think if the blogs get a lot of comments it's good to show off the way they do, it also helps attract more readers, Under the title comes the line with the date, category, and author's name. I don't like the way this line has a red background because it takes a lot of attention and it's not the main thing that people look forward to see. Following that is a short description of the post in light color text and italic font, it comes out to be the most simple thing about the post. To finish up a Continue Reading link that is placed on the end and stands out after the light text description which is good. When it comes to tutorials, most people tend to see the title and the thumb because they want to see what is the tutorial all about and what the result looks like, very important to focus on these two elements More Samples Conclusion The main goal of a blog is to have it's posts viewed as many times as possible, and to make their posts very famous you have to make the very best display of each post. The blog content should play a good role on how you are going to display the posts on your blog. Hope this was useful information, I want to start writing more about this stuff and if you would like to hear more make you comment, any questions and suggestions are more than welcome. Thank you,
Collage is a cool style that deserves attention. Assembling random images to built a good looking site is one though task, but there are those who manage to do a fantastic job, worth of being showcased here. These examples bellow are really awesome, and show us the wide range of styles we get within collage. And please, don't forget to visit them!! They'll appreciate it. Cheers! ;)
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
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! ;)
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
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. http://www.jor-on.com/blog/ http://robgoodlatte.com/ http://mattbrett.com/ http://bienbienbien.net/ http://octwelve.com/ http://www.monofactor.com/ http://www.photoshoplady.com/ http://paulenderson.com/ http://blog.razvanstavila.com/ http://www.daleanthony.com/ http://blog.criticalwebdesign.co.uk/ http://www.noventilador.com.br/ http://leslyg.com/ http://bigsweaterdesign.com/blog/ http://www.webdesignerwall.com/ http://www.jrvelasco.com/ http://artgeex.com/v6/ http://malenehald.dk/blog/ http://www.larissameek.com/ http://www.okapistudio.com/ http://designdisease.com/ http://www.pixele.fr/ http://reformrevolution.com/ http://www.kineda.com/ http://www.webdesignerdepot.com/ http://webdesignledger.com/ http://acko.net/ http://www.gomediazine.com/ http://hi.pirajafisken.net/ http://www.made-in-england.org/ http://www.macalicious.com/ http://www.mattbernstein.co.uk/ http://www.style4you.it/ http://aditshukla.com/ http://www.filmschool.ph/blogger/ http://www.antiphrasis.com/ http://www.basmatitree.net/ http://www.homedesignfind.com/ http://pointlessramblings.com/ http://www.dollarshort.org/ http://www.pienternet.be/ http://agamicreative.com/ http://www.bradruggles.com/ http://www.helsinki.fi/luova/ http://blog.6angrymen.com/ http://www.viget.com/extend/ http://www.viget.com/inspire http://www.mrdiggles.com/ http://www.43folders.com/ http://www.peminoz.com/ If you have a cool blog, post a link and it may get on the next selection.
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 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 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.
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! ;)