articles on

Playing with CSS 3 - Animations, Rotate and Scale

I have been working on the new Abduzeedo design and have had the chance to play more with CSS 3, even though it's not fully supported on all browsers we can start using some really cool features such as round corners, text-shadow, box-shadow, transitions and transformations. The major downside still is Internet Explorer, however it seems that the IE 9 will have a much better CSS 3 support and support those features. I believe that HTML 5 and CSS 3 will replace Flash eventually, and we can notice that the web design community has been talking a lot about it, Smashingmagazine, one of the largest web design sites out there has been publishing great articles and even launched a CSS 3 contest to incetinve designer to play more with CSS 3. So in this post I will show you some experiments I've been doing with CSS 3, especially with animations using transitions and transformations like scale and rotate. *The demo and code will only work with Webkit browsers like Safari and Chrome. CSS Buttons and Thumbs In this example I will show you how to create a really cool navigation bar using CSS only. I used gradients, transitions and shadows. I also used a Flickr Javascript badge to load some images from Flickr and then use CSS transitions to scale up them when the user hovers an image. HTML Code CSS for the Navigation Bar For the navigation bar I used CSS to create the gradient, the syntax for the gradient in CSS is -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*). For more information about CSS Gradients I recommend that you check out the http://webkit.org website and this article in special http://webkit.org/blog/175/introducing-css-gradients/. One site that is very useful to generate the CSS 3 codes is http://css3generator.com/ especially because of the extra code we have to add to support Mozilla and Opera. #menu{ position: relative; display: block; margin: 20px auto; width: 600px; height: 60px; padding: 0 20px; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125))); -webkit-box-shadow:#000 0 1px 2px; -webkit-border-radius:2px; } CSS for the Navigation Buttons For the buttons once again I used CSS gradients once again and also Text-shadow, and CSS transition so when the user hovers the button the background color will change with an animation. ul li{ list-style-type: none; margin: 15px 0; float: left; height: 30px; line-height: 30px; } ul li a{ background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) ); display: block; padding: 0; text-decoration: none; color: #fff; font-size: 12px; font-weight: bolder; text-shadow: #000 0 -1px 1px; width: 90px; text-align: center; border-bottom: 1px solid #666; border-top: 1px solid #222; border-left: 1px solid #666; border-right: 1px solid #222; -webkit-transition:text-shadow .7s ease-out, background .7s ease-out; } ul li:first-child a{ -webkit-border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; } ul li:last-child a{ -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; } ul li a:hover{ text-shadow: #f5fc39 0 0 10px; background: #222; } Animated Flickr Images Here I used the same hover effect I applied on the images of my new personal site http://fabiosasso.com. So when the user hovers the thumbs the image scales up using the -webkit-transition and -webkit-transform:scale(). Below you can see the code, the transition is applied to the image code, while the transform goes on the hover state only. #flickr_badge_uber_wrapper{ width: 550px; position: relative; display: block; margin: 0 auto; margin-top: 100px; } .flickr_badge_image{ float: left; } .flickr_badge_image img{ margin: 10px; border: 3px solid #fff; display: block; position: relative; -webkit-border-radius:5px; -webkit-box-shadow: #000 0 0 2px; -webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in; } .flickr_badge_image img:hover{ -webkit-transform:scale(1.2); z-index: 10; -webkit-box-shadow: #666 0 5px 10px; } Click on the image to see the demo. 90s design with CSS The possibility of rotating and scaling HTML elements allows us to create different compositions that before would be possible only using images or Flash. So, I had this idea of playing only with CSS and basic typography to create a design inspired by David Carson. Basically I just added some rectangles and messed the typography reducing line-heights and rotated some texts, then with transitions I animated the whole composition to rotate and scale when the user clicks on the "Who am I" text. Below you can see the final result of this experiment. It is still a working process but you can have an idea of what you can accomplish now with CSS3. Click on the image to see the Demo CSS Scale and Rotate - Click on the image to see the Demo Recommended Articles Start Using CSS3 Today: Techniques and Tutorials CSS Gradients, Transforms, Animations, and Masks Cleaner Code with CSS3 Selectors CSS Animations Going Nuts with CSS Transitions CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY Download Click here to download the CSS and Html file used for this tutorial

Using Texture to Get the Most Out of Design

There are a number of design elements that are important to design, texture being just one of them. However, texture can be a powerful force when presented in any type of design, adding visual interest and more detail. Texture is often times associated with the sense of feel, so adding it to a purely visual reference can make a 2D piece appear 3D or more real to life. What's the benefit of this? Things that seem more real to life often result in a more emotional response from the viewer, and are in return, are more memorable. Let's look at how texture can impact various forms of art and design, and some examples within each category. Typographic Design Typographic design has been quite a trend in recent years, and its place in the design world is growing increasingly. Below are some excellent examples of typographic design that use texture incredibly well, in an area where texture was once hardly present. Graphic Design Graphic design is always supposed to send out a message, and texture adds an emotional and 'real-life' response that can almost always yield better results. From posters to business cards, check out these examples of texture used in graphic design below. Web Design Texture is always more difficult to implement in web design because designers must consider varying screen sizes, resolutions, and a number of other factors. However, texture, just like in graphic design, can set the correct mood and give a better feedback than a web design that uses no texture. Below are some favorite web designs that focus on texture, and towards the end, web designs that don't necessarily focus on it, but definitely include it for an enhanced look. Art Traditional art for the most part is separate from design, but of course, texture is just as much a part of it. Check out these amazing art pieces in a number of different mediums that put their main focus on texture. Best Methods for Using Texture in Design From the examples above, it's easy to see how texture in any medium can enhance design. However, what are the best methods for incorporating it? Texture can add a lot of interest to a design which means it can also go too far as well. There are situations where texture can be distracting or used incorrectly so that it is ineffective. Of course, depending on what artistic venue you're working in, texture should be used differently. For example, logo design should keep texture to a minimum, while web or graphic design can use a lot more. Despite the differences for each type of design, let's look into some general rules, or guidelines. 1. Don't Distract from the Essential Elements There are different levels of texture and different types that can be used in better situations that others. If texture is distracting from the needed content or other imagery, then it is being used incorrectly. Try to think about this consciously and get other people's opinions before using too much texture. Also, try not to use heavy textures on backgrounds, unless it is meant to be part of the focus of the design. 2. Follow a Texture Theme Use similar texture styles to create repetition, in a seemingly random design. This can also be used to cause unity in the design. In certain types of design that use texture, the design can seem disorganized and messy, while design should always seem put together to an extent. A designer should use texture for visual interest, either to break a pattern or add variety to a repeating pattern, but texture should not be used to create such chaos that the design looks disorganized. Similar textures will help combat this. 3. Add Texture to Repeating Patterns Most of the examples above are seemingly random textures used for visual interest. However, there are many designers that add texture in a much more organized way, via patterns. An example of this practice would be straight wooden planks used as a background, or dust/noise added to a pattern. 4. Gradients and/or Fading Texture Sometimes an extreme texture can be made more subtle by simply not covering the entire design with it. Try fading a texture into a solid color, or to a darker and less noticeable version of the texture. Be sure to put the lightest part of the gradient (where the texture will be most noticeable) in an area of the design where it's needed — highlighting a main feature, or adding visual interest to a place that needs it. 5. Try Putting Texture as the Main Focus While most designs succeed with adding texture but making it as subtle as possible, other designs excel by making texture the primary focus. An example of this practice is a large background website. A well-textured large background along with interesting shapes and themes can be the main focus of the design, and therefore not be too distracting. This technique is also used often in graphic design with varying textures are clashed to create a design in itself. Wrapping Up Texture is an important part of any style of design, and many forms of design or art aren't visually appealing enough without it. While there are many examples of texture-less design still used today, many viewers see textured designs as more appealing and are more emotionally responsive. Even when knowing this, many designers are afraid of using texture in the wrong way to an extent that they avoid using it, or avoid using too much of it. Our advice to any designer or artist: always feel free to experiment with texture! Trying out new things is the only way to explore and discover new ways of using this one design element to its fullest potential. About the Author Crystal Ramsay is a web designer from the U.S., with a love of Wordpress, simplicity, and user-centric design. She is co-owner of a small and local design firm, and editor-in-chief of The Free Creatives (http://thefreecreatives.com), a blog made for freelance web designers. You can find her on Twitter at @freecreatives

Basics of Slicing with Pixelmator

In this tutorial, I will show you how to use the Slice Tool in Pixelmator to, of course, slice a design to be coded into a functional Web site. I will also show you the HTML/CSS walk-through process. In the end, you will be able to download the files and tinker with them as well. Step 1 Open the Pixelmator file we created for our UI tips tutorial. Step 2 The tool that we will use in this tutorial that will allow us to transform our design into a Web page is the Slice Tool (K). Basically we will use this tool to select the areas that will be save-as images. We won’t need the whole design, just a few parts that will be a part of the UI (background, logo, buttons, screenshots). Step 3 With the Slice Tool (K) selected, create a rectangle slice around the logo as the first slice. Notice that I didn’t include the text next to it because that will be HTML text. Step 4 Now select the Tab of the navigation. Try to be very precise when slicing your site because a single pixel can disrupt the alignment later on in the HTML part. Step 5 The cool thing about the Slice Tool is that we have some options; for example, if we are slicing a photo, we can use JPEG, while for UI elements, we can use transparent PNG. Also, you can change the slice name; in this case, my slice name is “active-tab.” I’m using transparent PNGs for the UI elements and logo, and JPEG for the screenshots. Step 6 Keep selecting the parts of the design that need to be sliced. In the screenshot below, I created 2 more slices, including one for the line that divides the feature content that will be used twice, at the top and bottom of this section. I also selected the main screenshot. Step 7 Here, let’s select only one screenshot, and then we repeat it in the HTML, or you can save different images later on.. Step 8 A very important part is the background. This slice will have to be exported first because we will need the background to be active for this UI element; otherwise, it will be transparent. Step 9 This is a the shadow that we have in the feature section, but I moved it down to slice it separately from that area; once you export it, open the file and go to Edit > Transform > Flip Vertical to create the bottom shadow. Step 10 After you have created all of the slices and named them properly, go through the layer palette hiding layers that are not necessary: all of the text and the background. As I mentioned before, the background slice will have to be exported again later on with the background active. With all the adjustments done, click on Export for Web in the Slice Tool Option. A dialog box will open asking where you want to save the slices. Create a new folder on your computer called “Site”; inside this folder, create another folder called “imgs.” Select the imgs folder and export all of the images into it. Step 11 If you did everything right, you will have images like those pictured in the image below. Step 12 This is not exactly part of Pixelmator, but I will illustrate the HTML and CSS parts so you can understand what I did. Below, you can see the HTML file. We will use the “<div>” tag to create the structure of our HTML. We could use the new HTML 5 tags for that, but we would have to make some adjustments on the CSS, and it would have problems with the different browsers. However, I highly recommend that you check out HTML 5; it’s the future. Step 13 If you take a look at the HTML code in line 8, there is a <link> tag where I linked the HTML file to the CSS file, the “styles.css” file. In this CSS file, I will define the look of the page using the images from Pixelmator. CSS is like writing a cooking recipe: you indicate how the elements will look. You define the font properties (size, color, type, style, weight…), the background, the margins, the padding, and everything. The BODY element is the page itself. There you can find the background using the slice image from Pixelmator (bg.jpg). Also, there are HEADER styles. Step 14 Here you can see how I coded the menu. The slice image of the tab is defined in line 71 for “#menu ul li.active a.” Step 15 Here we have the FEATURE area; again, the backgrounds are defined in lines 79 and 85. Also, the font size for the title and the paragraph are present. Step 16 Here is the code for the screenshots section. I used some CSS 3 properties to create some eye-candy effects, like the -webkit-transition and the transform. Step 17 Here is the code for the footer; it is very simple. Conclusion Pixelmator’s Slice Tool (K) can definitely be used to design user interfaces. The secret of a good UI is simplicity and consistency, so it’s very important to optimize your design to have as few slices as possible as well as the code. Now it’s up to you. Once again, I highly recommend that you check out some tutorials on CSS and HTML; it’s not difficult, and in my opinion, it’s super fun. Site demo Download the Pixelmator and Demo Files Site demo files | Pixelmator file

Mobile Web Design

Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa. Mobile is a great place to try new things with different limits. People using the mobile web are much less patient than those in front of a computer--cellphone screens are much smaller and the mobile internet connection, usually 3G, isn´t as fast yet. Design Adjustments Navigation The omnipresent menu can´t be applied in many cases because of the screen size. The menu probably would have to be in a vertical way and it could be very uncomfortable if for every single page people would need to scroll down all the menu to see the content. So, only use omnipresent menu if your site has only three links or less on its top navigation and, because of that, it can be horizontal. The solution is to put the navigation on the first page and on the others pages use a link at the top to come back to the first page or use breadcrumbs. Content Your content should be the highest priority. The screen is very small so make your design as clean as possible with less images and a lot of white space. The mobile connection isn´t as fast yet to handle images, and it can make it harder to focus on the content. Links On mobile everything is smaller and it is not different with links. You have to make them easier to click on. That can be done with, once again, more use of white space around them and bigger font sizes. When the link is selected, instead of just underlining it or changing its color, it should change the background color, even if the link is in the middle of a paragraph. It´s much better for mobile user to see what they have clicked on. Various Screen Sizes Each phone has a different screen size, and the iPhone has two positions: vertical and horizontal. So, your site cannot have a fixed width with pixels. It´s much better to use percentage and EMS. This method will make your site adaptable to the various screens sizes. Also you can limit the zoom of the interface and the size of the screen using the META properties for mobiles Cross Platforms Don´t expect your mobile site to look the same in all mobile browsers; there are dozens out there. There are some HTML elements and CSS properties that aren´t supported by some mobile browsers or, at least, it doesn't work the way it should. The various heading markups for example will look different from browser to browser. But if all you want is a site that works well on the iPhone and android, you won´t have too much trouble with the code as you already have with desktop browsers. All you need is to adapt the site as I said in the other topics. Check out well coded sites at Mobify, a place where you can build your mobile site. Some designs aren´t as nice but the codes are all valid. You can test it and see if it works for you. Some design blogs use it very well, others not so much. I tried it but I ended up building a mobile site all by myself. And here you can validate your code. Great Examples Below are some great mobile adjusted web designs, all of them and more you can find at a very useful mobile website showcase, Mobile Awesomeness. Other Resources Learn How To Develop For The iPhone - It shows you how to build an alternate page and style sheet for the iPhone and iTouch. Give Your Website a Custom iPhone Bookmark Icon - This tutorial teaches you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen. Create a Slick iPhone/Mobile Interface from any RSS Feed - This article is about creating a web page that is formatted for the iPhone that will dynamically fill itself with content from a RSS feed. iPhone Apps Design Mistakes: Over-Blown Visuals - The development of iPhone applications has recently become a hot topic. However, many of these applications are poorly designed and just don ´t become useful as it could be. MobiSiteGalore - A free site to build your mobile site Create a Unit Converter Application for Flash Lite Enabled Devices- Flash Lite is an implementation of the Flash runtime for mobile phones, consumer electronic devices, and Internet-connected digital home devices. Developing with Flash Lite - Mark Doherty over at FlashMobileBlog has teamed up with Dale Rankine to produce a video tutorial series: "Developing with Flash Lite" on their Adobe Flash Lite Vimeo channel. Doctype: jQTouch and Mobile Design - In this week’s 7 minute episode of Doctype Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.

CSS 3 Tips by Nick and Jim from Doctype

Doctype is the show for people who make websites. Every episode, Nick and Jim, break down the latest topics and trends in web design and web development, from CSS3 and iconography to jQuery and web security. Whether you're a designer that wants to learn some coding or a developer that thinks everything they make looks like crap, Doctype is the show for you! They have some very useful episodes with tips for those, like me, are trying to improve their CSS 3 skill, using rounded corners, text-shadows and columns. That's why we're sharing these episodes with the Abduzeedo community. For more information visit http://doctype.tv/ or follow them at Twitter (http://twitter.com/doctypetv) or Facebook (http://facebook.com/doctype). Episodes CSS3 Columns and jQuery Plugins CSS3 Borders and HTML5 Sections CSS3 Gradients & HTML5 Databases

UI Tips in Pixelmator

Many people have been asking me how to create a nice, Apple-style UI in Pixelmator with bevels and letterpress effects. I have also received some inquiries about creating rounded corners. So, I created this tutorial to explain some efficient, helpful tips. Step 1 Open Pixelmator and create a new document. I used 1000×1000 pixels. Then, fill the background with grey. On the menu, select File>Stylize>Noise. Select 1 as the amount. Step 2 Select the Rectangular Marquee Tool (M) to create a rectangular marquee. Step 3 Go to Edit>Refine Selection. Now you will be able to change the selection; you can increase or reduce the size, make the edges blurry with Feather, or create rounded corners with Smooth. I select level 15 for Smooth. Step 4 Add a new layer, and then use the Gradient Tool (G) to fill the marquee area with the gradient. For the colors, I used a dark grey gradient from #666 to #999. ? Step 5 Select the Rectangular Marquee Tool (M) again and create a marquee selection like the one in the image below. The idea here is to create a tab for site navigation. Next, simply delete the bottom part of the rectangle. Step 6 To select only the objects within the layer, roll over the Layers Panel, hold Command, and click on the thumbnail of the layer you want to select. Step 7 Go back to Edit>Refine Selection. Let’s increase the size by 1% and raise the Smooth level by 1%. The idea here is to create a little bevel, or stroke, and apply a gradient on it. Step 8 Add another layer behind the tab layer. With the gradient tool and the selection still active, fill the layer with the gradient. The colors of this gradient are black to white, with the dark grey is at the bottom and the white at the top like a highlight 3D bevel. Use the image below for reference. Step 10 Here is our navigation tab. We are accustomed to having filters and commands to create this type of effect in tools such as Fireworks or Photoshop, but as demonstrated here, these can be easily replicated. Of course, the manual process might take a few extra steps, but it can also help us better the way in which light and shade add depth to things. Step 11 With the Rectangular Marquee Selection (M), create a rectangular selection of 1px height. Step 12 Add a new layer and fill the selection with white. That way, we can create a white line. Step 13 Add another layer and fill it with grey that is a little bit darker than the background. Go back to Filter>Stylize>Noise and add 1% noise to the grey. Then, move the layer down and place it right beneath the white line. The line will be the 3D bevel of the layer. Step 14 Select each layer and go to Layer>Add Layer Mask. Fill the layer mask with black using the Paint Bucket Tool (N). The layer will disappear. With the Brush Tool (B) and a very soft brush, select the color white and paint over the areas you want to show. In this case, only the top center part of the rectangle and line will show, as in the image below. Step 15 Select the two layers and duplicate them, then go to Layer>Merge Layers. Next, select Edit>Transform>Flip Vertical. This will create a rectangular area in which to feature the main content of the site. Try to match the colors of the tab with those of this main area. You can edit the colors of the layers by selecting Image>Adjustments>Hue and Saturation. Step 16 People often ask me how to create a subtle letterpress effect. Some tools allow you to apply shadows or bevels, but Pixelmator does not have such an automated feature. However, there is a quick and easy way to create the same effect. First, add the text you want; in my case, I added “About Us” in black text, Arial font 16px. Step 17 Duplicate the layer and change the color of the text to white, and then move it down 1 pixel. Now you will have a very nice letterpress effect. You can also make the effect subtler by reducing the opacity of the white. Step 18 Create a few more navigation items, this time without tabs. The tab will be used only for the selected item. Step 19 Add a little text about the product. For this, I switched to a bigger font, black Arial at 20px. Step 20 Repeat the Step 17 to create the letterpress effect. Duplicate the text layer, change the color to white, and move it down by one 1 pixel. Tip: If your text color is white, you can create the effect by selecting black and moving the text 1 pixel up. Step 21 Add more text using a much smaller font of 12 pixels. Outside the main area, add a title for Screenshots using the same 20-pixel font used to create the main text. Repeat the letterpress effect. Step 22 Import a screenshot or other image and place it in your design. Move it to the right side so it can become the main image of the site. As you can see in the image below, the one I used is bigger than the main area and is overlapping the white line. To fix this, use the Rectangular Marquee Tool (M) to select an area that fits the part of the image located within the two white lines. Use the image below for reference. Step 23 Next, go to Layer>Add Layer Mask. The mask will hide the areas that did not fit inside the marquee selection. Step 24 Import a few more screenshots to use in the area below the Screenshots title. Let’s add some nice touches to these images. To create a little white stroke, go to Edit>Stroke. Select white for the color, 4 for the Width, and Inside. Press OK. Step 25 It’s also very simple to create a shadow. First, create a marquee selection of the image, as we did in Step 6. Then add a new layer and fill it with black using the Paint Bucket Tool (N). To create the shadow, go to Filter>Blur>Gaussian Blur. I used 15 for the radius, but you can select a larger radius to create a larger shadow. Conclusion Next, just add your logo and a slogan. That’s it! Even though there are not explicit filters to create round corners or bevels, it’s very simple to make these yourself with only a few extra steps. This process is a good exercise for our eyes and brain, and will help us better understand the way in which simple gradients, colors and shades can add depth to a flat image. I hope you find this tutorial useful. Please feel free to send additional requests to abduzeedo@abduzeedo.com. Tutorial Resources Pixelmator file

Web Design - Pricing Tables

We've been working in project for a Web Hosting client. After doing a few wireframes, we realized that we had to find good references to the pricing page. A good table just pops out in the middle of the layout, and makes it unique. So, I had to find some examples of Pricing tables to use as reference, so I spent my afternoon looking for these... we even had some kind people helping us at Twitter (thanks guys). So, here are the ones that we got to get together. I hope you enjoy it! :) Media Temple LightCMS Squarespace Wufoo Backboard HiTask Gloss Shopify SlideDeck Check the link for full view. Big Cartel The Invoice Machine Newsberry Pulse Ballpark MailChimp The Resumator Highrise Web Notes Crazy Egg

Web Design Case Study - Refilmagem

It is a great honor for me to present you the new project that I was working on called Refilmagem. A site about movies that was planned to add in a same place all the information about movies premiers, upcoming and showtimes from our home town, Porto Alegre. The project is from our partner at Zee and his girlfriend, Eduardo and Gisele (yeap, GisMullr!), and bellow I will show you how was the whole process of this project. When Eduardo spoke to me about this project and asked me to create the layout for the site, I loved the idea - not because I love movies, because I only go to the movies, watch some films and that is it - but I loved the concept, the approach of showing this kind of content in a simple and direct way, without all of that 'over information' and 'over colors' from other movies sites. The idea of Refilmagem came from a great frustration and difficulty of finding in a single site all the information about the premiers, showtimes, box office of the weekends and also the film review, poster and subtitled trailer. Gisele/Eduardo To begin the work, he sent me some sites' references that apply interesting concepts, as typography usage, content disposal, simple presentation, etc, so I could understand what he was looking for. Here are some of the references: Emptees Strange Beautiful Volumedia Robbie Manson Development before the Design The site was developed in Drupal, we love this CMS, and Eduardo is having lots of fun with the diversity of its modules. By the way he is being very successful with it. He had already started everything when I came along, and this process was pretty cool since we started the layout with the idea of the structure already defined. Refilmagem is basically a mashup where almost 90% of the service is automatic utilizing many types of API's and technologies like yahoo pipes, yql, json and jquery. Besides that the site counts with an editor/admin to give a special/personal touch to assure the that the service will run smoothly. Eduardo Sasso Drupal with very basic CSS. After that we started some mockups using pen and paper to see what we could do to maintain that same structure, or if we were going to test something different, how we would present the content, the header we were going to use and so on. First wireframes 'hand made'. And of course, having a defined wireframe we went through a lot of layout tests until we got to the final design. Different design tests Fabio also participated in this final part of process to help with the layout, and his help was very important in this step of the work. When we found the model we all liked, we started to improve its design working on Fireworks and CSS at the same time. In some moments it's faster to test straight at the CSS before, because we can gain time and we can have a notion about how it will the the behavior at the browser. Adjusting the Design basic CSS already with some definitions of colors and spaces. Started to work with header elements, shades and gradients. used lots of CSS3 at the shades and Round Corners Header detail, it gave us a lot of work to refine and organize the content. Some 'last minute' details. And as Eduardo is a huge fan of Rocky, he also joined the project! Right now this project (showtimes, movies, etc) is available for our home town - Porto Alegre, but soon it will be available for other cities in Brazil and maybe some cities around the world. We are already working on it. If you are not from Porto Alegre but you want to take a look at the project and browse around the site, go to refilmagem.com.br. Final Design

Great Reads for 2010

The beginning of the new year came with lots of plans and resolutions. In my opinion, it's very important to share our experiences and to learn from others as well, and because of that, in this post I will show you some books that I got and that I think are really good for designers or anyone tech-savvy. Some books I have already read, while others I am currently reading or looking forward to start. There are books more technical about web standards and usability, but there are also good motivational ones that I'm sure will boost your confidence for the new year. In the end that's basically all it's about, doing what you love and having confidence. Crush It!: Why NOW Is the Time to Cash In on Your Passion Publishers Weekly Review Yet another rallying cry to the banner of turning your passion into a career, from braggadocio-ridden entrepreneur Vaynerchuk. After taking over his father's local liquor store, Shopper's Discount Liquors, and building it from a $4 million business to a $50 million one, he created the wine-tasting blog Wine Library TV and discovered the power of the Internet for driving sales. This book shares his experience and step-by-step advice for using Twitter, Facebook, etc., and suggestions for monetizing an online persona, reiterating that the Internet makes it possible for anyone to make serious cash by turning what they love most into their personal brand. His enthusiasm is admirable and his advice solid, but there's nothing new here, and his unappealing swagger—repeated stories of how he crushed it and dominated grate particularly—gives his story more the tone of adolescent peacocking than of worthwhile and sober business advice. (Oct.) Copyright © Reed Business Information, a division of Reed Elsevier Inc. All rights reserved. Abduzeedo Review I have been following Gary for quite some time now and I have always admired him for his passion. The book is all about passion with some incredibly valuable tips on how to start doing what you like to do professionally. It's a motivating book, perfect for the beginning of this year, so you can start putting to practice your new year's resolutions. Great read, short and effective. Logo Design Love: A Guide to Creating Iconic Brand Identities Editorial Review There are a lot of books out there that show collections of logos. But David Airey’s “Logo Design Love” is something different: it’s a guide for designers (and clients) who want to understand what this mysterious business is all about. Written in reader-friendly, concise language, with a minimum of designer jargon, Airey gives a surprisingly clear explanation of the process, using a wide assortment of real-life examples to support his points. Anyone involved in creating visual identities, or wanting to learn how to go about it, will find this book invaluable. - Tom Geismar, Chermayeff & Geismar In Logo Design Love, Irish graphic designer David Airey brings the best parts of his wildly popular blog of the same name to the printed page. Just as in the blog, David fills each page of this simple, modern-looking book with gorgeous logos and real world anecdotes that illustrate best practices for designing brand identity systems that last. David not only shares his experiences working with clients, including sketches and final results of his successful designs, but uses the work of many well-known designers to explain why well-crafted brand identity systems are important, how to create iconic logos, and how to best work with clients to achieve success as a designer. Contributors include Gerard Huerta, who designed the logos for Time magazine and Waldenbooks; Lindon Leader, who created the current FedEx brand identity system as well as the CIGNA logo; and many more. Abduzeedo Review I'm currently in the middle of this book. It's a very useful resource for designers who want to specialize in logo design. The book has good examples with the story behind the logos. Besides that it's a very well designed book, beautiful layout and typography. I will prepare a more in-depth review as soon as I finish reading it. A World in HDR Editorial Review High dynamic range (HDR) photography lets you capture the myriad colors and levels of light that you can see in the real world, and the results are amazing photographs that run the gamut from super real to surreal. Explore this fantastic realm of photography through the unique vision of renowned travel photographer Trey Ratcliff. In this book, Trey shares his phenomenal HDR photographs as well as all the backstory on the adventurous circumstances of their origin. He also reveals the techniques he used to get the final shot. The breathtaking images gracing these pages and the author’s real-world advice for capturing and manipulating images will inspire you to create your own HDR magic. So Trey also includes his simple and straightforward tutorial that teaches you everything you need to know to make your own HDR photographs, whether you’re a beginner, amateur, or professional Abduzeedo Review Gisele is preparing a complete review of this book following the tutorials that Trey prepared especially for it. I took a brief look at the content, and there are some gorgeous photos. If you love HDR like I do you must get this book. Designing with Web Standards (3rd Edition) Amazon Review Standards, argues Jeffrey Zeldman in Designing With Web Standards, are our only hope for breaking out of the endless cycle of testing that plagues designers hoping to support all possible clients. In this book, he explains how designers can best use standards--primarily XHTML and CSS, plus ECMAScript and the standard Document Object Model (DOM)--to increase their personal productivity and maximize the availability of their creations. Zeldman's approach is detailed, authoritative, and rich with historical context, as he is quick to explain how features of standards evolved. It's a fantastic education that any design professional will appreciate. Zeldman is an idealist who devotes some of his book to explaining how much easier life would be if browser developers would just support standards properly (he's done a lot toward this goal in real life, as well). He is also a pragmatist, who recognizes that browsers implement standards differently (or partially, or not at all) and that it is the job of the Web designer to make pages work anyway. Thus, his book includes lots of explicit and tightly focused tips (with code) that have to do with bamboozling non-compliant browsers into behaving as they should, without tripping up more compliant browsers. There's lots of coverage of design and testing tools that can aid in the creation of good-looking, standards-abiding documents. --David Wall "Some books are meant to be read. Designing with Web Standards is even more: intended to be highlighted, dogeared, bookmarked, shared, passed around, and evangelized. It goes beyond reading to revolution" - Liz Danzico, Chari, MFA Interaction Design Once You're Lucky, Twice You're Good: The Rebirth of Silicon Valley and the Rise of Web 2.0 Editorial Review Once You’re Lucky, Twice You’re Good is the story of the entrepreneurs who learned their lesson from the bust and in recent years have created groundbreaking new Web companies. The second iteration of the dotcoms—dubbed Web 2.0—is all about bringing people together. Social networking sites such as Facebook and MySpace unite friends online; YouTube lets anyone posts videos for the world to see; Digg.com allows Internet users to vote on the most relevant news of the day; Six Apart sells software that enables bloggers to post their viewpoints online; and Slide helps people customize their virtual selves. Business reporter Sarah Lacy brings to light the entire Web 2.0 scene: the wide-eyed but wary entrepreneurs, the hated venture capitalists, the bloggers fueling the hype, the programmers coding through the night, the twenty-something millionaires, and the Internet “fan boys” eager for all the promises to come true. Abduzeedo Review I finished reading this book at the end of last year. It's another motivating one because it tells the story behind the web services we have been using now. All this revolution with the Web 2.0 and with user participation becoming the center of the equation. It also really encourages us to try to do what we believe is right. Eyetracking Web Usability Editorial Review Eyetracking Web Usability is based on one of the largest studies of eyetracking usability in existence. Best-selling author Jakob Nielsen and coauthor Kara Pernice used rigorous usability methodology and eyetracking technology to analyze 1.5 million instances where users look at Web sites to understand how the human eyes interact with design. Their findings will help designers, software developers, writers, editors, product managers, and advertisers understand what people see or don’t see, when they look, and why. With their comprehensive three-year study, the authors confirmed many known Web design conventions and the book provides additional insights on those standards. They also discovered important new user behaviors that are revealed here for the first time. Using compelling eye gaze plots and heat maps, Nielsen and Pernice guide the reader through hundreds of examples of eye movements, demonstrating why some designs work and others don’t. They also provide valuable advice for page layout, navigation menus, site elements, image selection, and advertising. This book is essential reading for anyone who is serious about doing business on the Web. Next week I will have a few more books to share with you so stay tuned. Also I'd like to thank David Airey, Pearson Education, and Trey Ratcliff for sending me books to read and share my thoughts with the design community.

Nestliving: a Beautiful site featuring Design furniture

I just love to look around for design furniture... I really like to check out the great products that some designers come up with. The style of furniture that I like to see is that classy-minimalist-stylish stuff that just get our attention and make us want to change almost every piece inside of our place. I was browsing around looking exactly for that kind of thing when I found this great site called nestliving.com and got amazed by their design - both web design and product design. The website is clean, minimalist and beautiful. As for the products, they are stunning. I have to say that I loved almost everything they sell at the site, but I have managed to control myself and put together this selection for you. From beds to coffee makers, toys and bicycles, these products are perfectly designed. They are so beautiful that you don't even want to use them... you just want to admire them. To check out more beautiful stuff go to nestliving.com and let us know what is your favorite product from their list! I hope you enjoy... :) Website Home Furniture Beds Muir Bed By Amenity Coffee Tables Isamu Noguchi Coffee Table Offi Scando Coffee Table LAX Series Coffee Table by MASH Studios Mag Coffee Table by Ali Sandifer Kids Playforever Enzo Speedster Playsam Jetliner Red Playsam Saab Roadster Ride On Car Offi Doodle Drawer Desk Orange Playsam Wooden Yo-Yo Outdoors Perch! design Birdfeeder Seating Eames Molded Plywood Lounge Chair - LCW Womb Chair and Ottoman Nelson Coconut Chair Cherner Arm Chair George Club Chair by Ali Sandifer Wiggle Side Chair by Vitra ETC Bicycles ABICI Granturismo Uomo in Rosso Clocks George Nelson eye clock by Vitra George Nelson petal clock by Vitra George Nelson Tripod clock by Vitra Coffee Chemex 6 Cup Coffee Maker Media Players Geneva Sound XL Music System in Black Geneva Sound L Music System in Walnut Ceramics Perch! design Plant Orb Skagerak of Denmark Plint Gourmet Set Perch! Design Bonnie and Clyde Salt and Pepper Shakers

Inside the Studio of Design By Front

Design By Front is an amazing web design studio from Northern Ireland. Front is an eclectic team of creative thinkers, designers, technologists, project managers and writers which makes them one of the top web design studios of the world. Here you will take a look inside the studio and find out more about their work. I encourage everyone to visit their website designbyfront.com. The Studio People often tell us our studio is ‘really cool’, and more often than not, clients ask to have meetings here. We usually blush, say shucks and move on – but we’re genuinely proud of where we come to work. We’re asked to be creative on behalf of our clients, so we need a space that encourages the building blocks of creativity; collaboration, exploration, and good old fashioned hard work, but also a space that feels like home. It has to help us do our job, and be ourselves. We have areas for both client and internal team meetings and when required groups of us migrate to the conference room or get comfy on the sofas. A collaborative space doesn’t need to be all bean bags and lava lamps… it can be the kitchen, a park bench or the parking lot. To find out more about their studio visit The Front Studio: Creating a Great Environment Their Work Abbey Theatre The National Theatre of Ireland gets a fresh rebrand. Book online with a view from your seat and catch up with behind the scenes blogs. NoPostie A new online service for sending unique animated messages featuring Tatty Teddy & Violent Veg to friends, family and loved ones from Carte Blanche Greetings. BBC Irish Portal Promoting Irish Language Culture through a huge audio, visual and editorial archive. Starring Me to You A lovely new mini-site for the Christmas ad featuring Tatty Teddy. We love stop-motion animation! TLC LSDA asked Front to create a place for educators to share, collaborate and learn. We created TLC, with just enough tenderness, love and care.

Playing with CSS3

When I was working on the new version of Abduzeedo, the current one, I decided to learn and use CSS 3 to enhance the visual of some elements. Instad of using images to create shadows and round corners I used CSS 3. Of course I knew that it would not be compatible to all browsers, more precisely, the Internet Explorer. From the statistics of the site, the majority uses Firefox (51.05%), followed by Safari (25.38) and then Internet Explorer with only 11.73, I thought it would work alright, and for those readers that use other browsers they would be able to access the site but would not be able to see these little details. So for this tutorial I will show you how I created some of the effects you see on the Abduzeedo UI. We will play with Box-Shadow, Round-Corners, Tex-Shadow and CSS gradients. The idea is to practice, in my opinion the best way to learn. Final Result This is the final result we will have by the end of this quick tutorial. The idea is to play a little bit with CSS3 even though this might not work perfectly on IE an Opera. Click on the Image to see the DEMO - It works only in Safari, Firefox and Chrome Step 1 The first thing to do is to create the HTML file with our data. Also let's create the link to our CSS file (<link rel="stylesheet" href="tut.css" type="text/css" media="all">). There's great places to learn more about HTML and CSS, I recommend CSS Tricks, Nettuts, Smashingmagazine, W3C, 24ways, Woork and others. Below you can se the page without any style. Step 2 Here's the HTML file, as you can see we're using HTML 5, once again to practice. That's the best thing of personal projects, we can practice and learn. Basically we have a Section called "Box" where the content will be inside. Then we have the navigation (Nav), another section with the content (content) and then inside the content section we have the messages. We use the tag article to them. Step 4 Let's start it by changing the "body" style. So let's define the font, the font weight, margins, paddings and the background color. It's really important that you have some CSS knowledge already, especially about the CSS Box Model to understand how Padding, Margins, Border, and sizes work. I highly recommend that you read this great article by Chris Coyer: The CSS Box Model body{ font: 14px/140% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-weight: lighter; margin: 0; padding: 0; background: #ddd; } Now for the box we will play with a new CSS 3 property, Box Shadow. Basically we can add shadows to elements without using any image. It's pretty simple to use, you set the Horizonal Lenght, Vertical Lenght, Blur and Color. Example: box-shadow: horizontal lenght vertical legnth blur color = box-shadow: 0px 0px 10px #666. For more information about Box-Shadow check out this article: Box-shadow: shadow effect on elements in css3. #box{ display: block; position: relative; width: 500px; margin: 20px auto; border: 1px solid #666; -webkit-box-shadow: 0 0px 10px #666; -moz-box-shadow:0 0px 10px #666; box-shadow: 0 0px 10px #666; } Step 5 For the navigation I created a PNG image with alpha transparency to use to create bevel effect to the navigation bar. nav{ position: relative; display: block; clear: both; background: #444 url(imgs/bg-gradient.png) repeat-x left -25px; height: 25px; padding: 10px 20px 10px 20px; } I highly recommend that you use a RESET.CSS for your projects, but here I'm not using, so I will just reset the UL and LI behaviors in order to create my navigation buttons. To understand why we reset our CSS, read this article by Eric Meyer: CSS Tools: Reset CSS. nav ul, nav ul li{ list-style-type: none; padding: 0; margin: 0; } The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. Step 6 For the buttons we will use round corners, box-shadow and text shadow to create a very nice effect. Take a look at the code below. Text-shadow is pretty much the same as box-shadow but for text, it's the same syntax. Now the round corners is different and it's one of the most wanted effects, we won't need to add a lot of markup and images to create this effect anymore. I recommend 2 articles about Round Corners: Border-radius: create rounded corners with CSS! and Have a Field Day with HTML5 Forms. The last one will cover another HTML 5 and CSS 3 new features. nav ul li{ float: left; background: #555 url(imgs/bg-gradient.png) repeat-x left -35px; padding: 0 10px; margin: 0 10px 0 0 ; color: #fff; font-weight: bold; height: 25px; line-height: 25px; font-size: 13px; cursor: pointer; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 -1px 1px #333; -moz-box-shadow:0 -1px 1px #333; box-shadow:0 1px -1px #333; text-shadow: #000000 0 -1px 1px; } Step 7 When the user hovers the button we will change the color of the background, font and effects. nav ul li:hover{ background-color: #ccc; box-shadow: 0 -1px 1px #fff; -webkit-box-shadow: 0 -1px 1px #fff; -moz-box-shadow: 0 -1px 1px #fff; color: #333; text-shadow: #fff 0 1px 1px; } Step 8 For the search field it's going to be pretty much the same, however we will use another image for the background, the magnifying glass icon, and position it on the right . input{ background: #ddd url(imgs/mglass.png) no-repeat 135px 2px ; outline: none !important; position: absolute; right: 20px; display: block; padding: 5px 10px; top: 9px; border: none; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; box-shadow: 0 -1px 1px #333; -moz-box-shadow: 0 -1px 1px #333; -webkit-box-shadow: 0 -1px 1px #333; } For the focus state let's just change the color of the backgroun. input:focus{ background: #fff; } Step 9 For the content let's play with gradients via CSS3. This will work only on Webkit based browsers. (Safari, Chrome, Webkit). Basically we set 2 or more colors that will create the gradient. I highly recommend that you take a look at this article: Introducing to CSS Gradients. Because only Webkit browsers will show the gradient I added 2 backrounds, the first one is set to grey (#ddd) and it will work on other browsers that will ignore the gradient. section#content{ display: block; position: relative; background: #ddd; background: #ddd -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(100, 100, 100, .5)), to(rgba(90, 90, 90, .1))); padding: 20px 20px 10px 20px; } .clear{ clear: both; } Step 10 For the thumbnails lets once again use Round Corners and Box Shadow. Besides that, use FLOAT:LEFT to align them to the left and a 3px solid white border. #thumb img{ float: left; border: 3px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0px 3px #333; -moz-box-shadow:0 0px 3px #333; box-shadow:0 0px 3px #333; } Step 11 The idea for the messages is to create a dialog box. Apply the Round-corners to all sides but the top left. Also I added the Box Shadow, and the CSS Gradient. div.msg{ float: right; width: 320px; padding: 20px; background: #f0f0f0 -webkit-gradient(linear, 0% 0%, 0 90%, from(rgba(100, 100, 100, 0)), to(rgba(90, 90, 90, .2))); -webkit-box-shadow: 0 0px 5px #333; -moz-box-shadow:0 0px 5px #333; box-shadow:0 0px 5px #333; margin-top: 40px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:0; -moz-border-radius-topright:10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; } As I didn't reset my CSS, the H3 was using the browser default style for it. So I had to change the margin to 0 and for the padding I changed the top, right and left to 0 just adding 10 pixels for the padding bottom. h3{ padding: 0 0 10px; margin: 0; } Step 12 One of the coolest things about CSS 3 is that we can play with shadows and also create glows by just changing the color of the box-shadow. div.msg:hover, #thumb img:hover{ -webkit-box-shadow: 0 0px 5px #0cf; -moz-box-shadow:0 0px 5px #0cf; box-shadow:0 0px 5px #0cf; } Conclusion Once again the idea of this quick tutorial is to show you the possibilities, there's much more to learn and of course everything has to be tested to make sure that it will work fine on different browsers. It is all about practicing. Click on the Image to see the DEMO - It works only in Safari, Firefox and Chrome Download the Files used for this Tutorial Click here to download the files used for this tutorial

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