IconJar is a simple concept. An icon store with a never-ending set of icons. You make one small payment you get the icons already made sent to you, plus we’ll send you all of the new icons we design to you as they are made.
Details of the IconJar Icon Set
As it currently stands there is 139 icons to kick you off with. We’re planning on releasing a huge amount more. The set is very much a pixel based icon set, so it’s made with small sizes & tiny details in mind. The current IconJar Icon set comes at 32px in size, with .png and .psd files, we’re looking to re-draw many of these in 16px icons too. These will be available in future updates free of charge.
Anybody who has already purchased WPBundle will already have access to this Icon set and the free updates as it was included as a free bonus. The only difference now is that we’ve gave it a shiny new home and “branded” it.
The standard price for the ever-growing set of icons is $45. But for the first week only we’ll be selling it for only $23, so now’s your chance to buy the Icon set with free updates at a huge discount.
You can view the full set here which shows you everything that is included in the set. If you want to follow updates you can check out the IconJar Twitter account, this is where we’ll post details of releases & screenshots of upcoming releases.
Who doesn’t like a good movie? Virtually every movie made has a film website these days, ranging from little more than an online place to park a trailer to a fully-immersive experience. And with the varied content, themes, and visual style of movies out there, it’s no wonder that film websites are just as varied.
Below are more than forty excellent examples of film websites, broken down by style, content, and features. We’ve also included some dos and don’ts for this type of site. If you have other favorite film websites, please share them in the comments below!
Sites Not Using Flash
At the moment, virtually all movie and film websites are using at least some Flash — either for video content or their entire UI. The lone exception we found is below. Of course, expect to see more non-Flash movie websites as HTML5 becomes more widely adopted, especially considering the lack of Flash support on iOS.
Red Hill
The Red Hill site uses no animation on the homepage, and the trailer page uses QuickTime rather than Flash:
Trailer-Only Sites
This is a particularly popular site style for upcoming films that don’t have much content yet. It’s not often seen on film sites once the film has been released.
True Grit
The True Grit website at first resembles a vintage, old-west poster. Click anywhere on the page, though, and a video window showing the two trailers pops up. It’s simple, but effective:
Rango
The Rango site is simple, with an animated background and what looks like a rustic, home-made movie screen, with the trailer video playing on top of it. It’s simple, but gives a good sense of the feel of the movie. If you close out of the trailer, there is some other interactive content, but it currently doesn’t do anything other than some animations and sound effects:
Gnomeo & Juliet
The Gnomeo & Juliet site starts with a brief Flash intro, and then the focus is squarely on the trailer. The only other content on the page is an option to share or like the page on Facebook:
Super 8
Leave it to J.J. Abrams to create a site that has minimal content (just a trailer and some sharing options) and yet can generate such interest for an upcoming film. It’s proof that film websites don’t need to be complicated to be effective:
Immersive Sites
Complete immersion in the world of the film is the ultimate goal of most of these sites. Some include interactive content taken right from the film itself, while others go so far as to link to sites that appear to belong to companies featured in the film itself.
Devil
The website for M.Night Shyamalan’s Devil is captivating. It puts you into the action of the movie in a way that’s engrossing and encourages you to spend more time on the site:
Skyline
The website for Skyline is visually beautiful and includes an interactive feature that lets visitors upload an image of themselves to see what they’d look like under alien control:
Accidents Happen
Having scenes from the film play in the background on the Accidents Happen site is something that isn’t often seen and really makes the site stand out:
Gamer
The Gamer website evokes the feel of the movie perfectly, and offers visitors the chance to control a slayer. The navigation takes a bit of getting used to, since the screen moves around dependent on your mouse movements:
Coraline
The Coraline site is wonderfully dark and has a great 3D effect. The look and feel of the site really evoke the movie:
Surrogates
Websites that really evoke the themes or elements of a film are way more engaging than their counterparts that only offer a trailer and some stills. The Surrogates website includes a link to Virtual Self Industries, giving the story a touch of added realism:
Iron Man 2
The Iron Man 2 website immerses visitors in the world of the film via graphics and interactivity that are reminiscent of elements within the movie:
Star Trek
The Star Trek site uses a 3D walk-through of the ship for navigation, with fantastic transparent elements and a style that’s reminiscent of the computer consoles in the film:
Daybreakers
The Daybreakers website plays clips from the movie in the background, immersing visitors in the look and feel of the film:
The Spiderwick Chronicles
Offering content straight out of the movie is a fantastic way to engage visitors, especially young ones. The Spiderwick Chronicles site lets visitors look at the Field Guide featured in the movie, which is a great way to draw users in, as is the “Create Your Own Field Guide” feature:
District 9
The District 9 website plays on the themes of the movie by looking like a map of the city, with the restricted area highlighted:
Sites With Extra Content
Extra content, like games, downloads, or music, are a great way to keep visitors coming back to your site. These sites all include bonus content, from interactive desktop downloads to interactive games.
Legend of the Guardians
The Legend of the Guardians website is perfectly suited to the target audience. The inclusion of an interactive game on the site increases the likelihood that visitors will spend more time on the site, and that they’ll come back in the future:
Alice in Wonderland
The website for Tim Burton’s version of Alice in Wonderland has a fantastic visual style that fits perfectly with the look of the movie. Plenty of extra features, including a gallery, downloads and music are all included:
Avatar
Avatar’s website is almost as spectacular, visually, as the film itself was. There’s tons of extra content here, including and Pandora Desktop app, immersive video, an app to turn yourself into an Avatar, and more. The layout of the site is simple, with a scrolling horizontal nav bar along the bottom and a slideshow of images from the movie in the background:
Cloudy with a Chance of Meatballs
The website for Cloudy with a Chance of Meatballs is fun and cheerful, just like the movie. It’s clearly aimed at kids, and includes games, downloads, music, and more:
Leap Year
The Leap Year website offers interactive content (a quiz), which is not often seen in this genre of film. The design of the site is simple, with emphasis on the film’s stars:
Sweeney Todd
The Sweeney Todd official site has a fantastic black and red color scheme and gritty look that evokes the feel of the film. The “Cut Your Own Trailer” feature is a great way to get fans involved:
Celebrity-Focused
If your film has big-name stars, it only makes sense to feature them prominently on your film’s website. That’s just the strategy these designers have taken.
Public Enemies
Putting your big-name stars front-and-center is a great way for a movie website to generate more interest, as the Public Enemies site does with Johnny Depp:
Inglourious Basterds
Inglourious Basterds is another site that puts their biggest star front-and-center, this time Brad Pitt. The subtle animations on the site are also a great touch:
Tropic Thunder
The Tropic Thunder site uses the characters as part of the navigation, and uses interactive content (like the Weapons Check game) to engage visitors with the site:
Prominent Award Placement
Winning or being nominated for a big award lends credibility to your film, so it makes sense to feature that information prominently on the film’s website. This is seen most often with Oscar winners and nominees.
Pan’s Labyrinth
Showcasing awards and distinctions prominently on the homepage is an excellent strategy for an independent movie site:
The Hurt Locker
The Hurt Locker is another site where awards are given prominence on the homepage. This is especially popular on sites that have won major awards, such as the Academy Award for Best Picture:
Mongol
The Mongol site is another that showcases award nominations on the homepage, alongside positive reviews. The rest of the site is very simple, with downloads, video content, and e-cards:
Other Film Sites
Some sites take a different approach entirely. Maybe they go a bit more minimalist, or fit more into what most would consider a “traditional” film website. But they all do an excellent job of representing the films they promote.
Four Lions
The Four Lions site is simple, with a crow animation and links to watch the trailers, find out more about the film (including where to watch it and reviews) and options to share it on Facebook or sign up for updates. Everything is displayed on the homepage, with sliders to show new content:
Sanctum
The site for Sanctum is fairly minimal, with a Flash interface and three pages: “Story”, “Video”, and “Gallery”. The UI is slick and works seamlessly, offering a great user experience. The only thing out of place here is the social media links in the upper left, which don’t really fit in with the aesthetics of the rest of the site:
Charlie and the Chocolate Factory
A movie website should always evoke the feel of the movie itself, and the site for Charlie and the Chocolate Factory does just that, with a whimsical design and color scheme:
Paper Man
The Paper Man website is very simple, with a comic-book look that fits with the feel and theme of the movie. They put the trailer link and reviews prominently on the home page:
My Girlfriend’s Boyfriend
Here’s a simple site that includes all the relevant information a film site needs. There’s a section for where the film is playing, you can watch the trailer, follow the stars on Twitter, and view information about the film on IMDB:
Beowulf
The Beowulf site is a bit different in that it uses horizontal scrolling rather than new pages or vertical scrolling:
The X-Files: I Want to Believe
The X-Files: I Want to Believe website is simpler than many film sites, with an animated background and links to the trailer and videos, downloads, and synopsis, and other content. Visually, it’s a very minimalist site, with clean typography and navigation:
Inkheart
The Inkheart website includes information about the movie, video content, a still gallery, downloads and more, all in a visual style that evokes the style of the film:
Robin Hood
The Robin Hood website is another that uses horizontal scrolling, with images from the movie serving as the background for different sections of the site:
Lord of the Rings
Sites for movie trilogies or series pose additional design problems, as it’s important not to give away plot points from the later movies in the imagery, while still representing all the films in the series. The Lord of the Rings site does this beautifully. They also include extras like an interactive desktop download and information about related video games:
Astro Boy
The Astro Boy website starts out with an animated intro and short trailer before the rest of the site’s content loads. There’s plenty of content, though, including downloads, photos and links to merchandise:
Cloverfield
The Cloverfield website puts the focus primarily on the trailer, though they do offer a widget you can put on your own site and links to purchase the DVD. The visual style meshes perfectly with the film:
Film Website Best Practices
Here are some guidelines to keep in mind when developing your own film websites. Feel free to offer more in the comments!
Do evoke the style and feel of the film being marketed.
Don’t forget to give visitors the option to turn the sound off on your site. Film sites are one of the few places you can get away with autoplaying sound, but it’s still important to give users control.
Don’t resize browser windows or automatically go into full-screen mode when visitors land on your site. Remember, your site might not be their primary focus at that time, and if you force it on them, they might just walk away.
Do provide extra content from the film to engage visitors. This is especially important for children’s films.
Do feature any big-name stars prominently on the site.
Don’t be afraid to try new or experimental UI ideas if they work well for the film. But make sure they’re relevant to the film and will add to the user experience.
Admittedly, Adobe Illustrator is often most certainly not the first choice that comes to mind when it comes to Web design. Fireworks and Photoshop are used much more often, and there are some good reasons for that. Still, although Illustrator has traditionally been used for drawing illustrations and logos, you can use it to design layouts and user interfaces, too.
In fact, in my opinion, you can utilize Illustrator to solve some regular design tasks better and more easily than you would do with other tools. With the techniques and tips I’d like to present in this article, I am certain that you will be able to build modular, flexible websites in less time and with less work.
Reasons To Use Illustrator For Web Design
Design Faster
Unlike the layers paradigm in Photoshop (i.e. first select the layer, and then work on it), Illustrator employs an “artboardâ€� paradigm: every object is selectable directly on the canvas. With just one click, you can manipulate any object on the artboard (by resizing, moving, rescaling, etc.) and make it pixel-precise with the Transform panel (available only in Illustrator CS5). It’s more intuitive and requires fewer mouse clicks, making your work more fluid.
You will also save time with two helpful functions that are unique in Illustrator:
Create modular Web designs with the Symbols panel and
Quickly format text with the Paragraph and Text Style panels.
Think Modular
Using the Symbols panel, you can create reusable components that will save you time when updating your designs or starting from scratch. This technique is especially useful for recurring elements, such as buttons, navigation bars, pagination elements, footers, etc.
How to create reusable components?:
Create a master component (a button, navigation bar, etc), and save it as a ‘Symbol’ in the Symbols panel.
Drag your newly created component from the Symbols panel and drop it into your design.
Now, when you modify your master button in the Symbols library, every linked occurrence of the symbol will update as well.
Quick Tool for Creating Wireframes
Illustrator is useful for wireframing, enabling you to quickly show the basic layout and navigation to clients. I usually begin by drawing a mock-up in black and white, using simple boxes, lines and typography. After I presented the wireframe to the client for approval, I create a more sophisticated design, with colors and effects based on the wireframe (we will cover this part in more detail later in the article).
Here are the advantages of preparing the wireframe in Illustrator:
Illustrator is fast for drawing wireframes because of its vector nature. You can create boxes, lines and text quickly and easily.
You can use libraries of commons elements, such as buttons and icons, and drop them easily into the wireframe.
Once the basic wireframe has been approved, you will save time creating the final design because the layout and content are already in place. Sometimes getting the final design is as easy as formatting text with style sheets and applying some graphic styles.
Format Text Quickly and Easily
If you use CSS or InDesign, then you will already be familiar with “Characterâ€� and “Paragraphâ€� styles and how powerful they are for quickly modifying and controlling the layout of text. You can do the same with Illustrator. The good thing is that Illustrator shares a lot of InDesign’s advanced typographic functionality.
For example, use a paragraph style for all of the body text on your website that you wish to style. Then, when you make a modification (say, change the font from Arial to Verdana), the body text on every page of your design will adjust right away.
In addition to Paragraph styles, you can use the Eyedropper tool to quickly apply text styles to various bits of text:
Select the text whose style you want to replicate and
Click on the text you want to style, and …Voila! The style is instantly applied.
Become an Agile Designer
Being able to quickly change your layout without a lot of effort is the key to designing in today’s rapidly evolving profession. After years of using Adobe’s Photoshop for Web design, I began to feel like a “pixel tailor,” using dull scissors and chalk.
I feel that the bitmap nature of the application is not optimized for performing basic Web design processes. For example, suppose I want to round a shape. I would need to follow these steps: select the area, use the “Round the selection� function, invert the selection and then cut the selected area so that the preserved area will appear rounded.
With Illustrator, I just apply a rounded effect to my selection. Additionally, I can save this graphic style and apply it to other elements. In this way Illustrator helps you respond quickly to your customer’s needs.
Focus on Simple, Clean Design
Illustrator offers simpler graphic options than Photoshop, which can help you to focus on sound design principles and stop wasting time on unnecessary effects and filters. Photoshop remains indisputably the best option if you want complex interfaces with a lot of graphic effects, such as textured backgrounds and complex lighting effects. But if your designs are simple and clean, then I am confident that you would complete your work faster and more efficiently with Illustrator. And if you really do need complex and texturized graphics, you can accomplish this with Illustrator, too, but it takes some know-how. Later on, we will discuss how to improve your designs by avoiding the overly clean “vector� look, as seen in the textured buttons below.
Work Lighter and Faster
Vector images are smaller than rasterized images. Thus, Illustrator will help you create designs that are lighter and less CPU-intensive than those made with Photoshop. This enables you to group a lot of interface screens into the same Illustrator file, avoiding the inconvenience of having to open multiple files when designing.
Over my career, I have designed up to 30 screens all within the same Illustrator file while keeping the size under 5 MB (excluding bitmap images). Because Illustrator is not as demanding on your CPU and requires less memory, you can keep several applications open at the same time without slowing down your computer. You also don’t need the most powerful (and thus more expensive) machine to create, adjust and export your designs.
How To Create Modular Designs
To make the discussion more interesting in terms of how exactly one can use Illustrator for regular design tasks, let’s look at the ultimate Illustrator technique for Web designers: creating a modular design with vector symbols.
Save Time With Symbols Libraries
The Symbols library enables you to reuse and modify elements across an entire website. Not only does it save you time, but it helps you build a library of items that can be used over and over again.
Illustrator previews all of your symbols in the Symbols panel, and you can create as many panels as you need. You can organize your work by creating panels specific to each kind of common GUI element: arrows, icons, buttons, etc. In this way, you simply browse through your symbols, select the one you want, and drop it into the design on your artboard.
Keep Your Design Consistent
Symbol components help you maintain the look of a design throughout the entire website. By centralizing component design with master symbols, you are able to view all of your elements at once and make sure that the style you are working towards is consistent. No more will you need to check every screen to see whether you have forgotten to update one element.
Build Up a Components Library for Future Projects
Because the components reside in the Symbols panel, they are separate from the design layout. By continually adding components to your library, you will build up a collection of items that can be reused or modified in other projects. The increase in efficiency quickly becomes exponential. This is the first step to building your own interface framework.
My humble advice to help you organize your work is to also use different panels for each group of GUI elements. Over the years, I found out that it’s better to have one panel for arrows, one for icons and one for basic GUI elements (buttons, forms elements, etc.). You can see an example of a GUI components library by downloading my free GUI design framework.
To create your own Symbols panel, first, add a vector shape to the Symbol panel by dropping it inside. Next, save this symbol library as an AI file by selecting “Save symbol library� in the Symbol panel options:
You can add as many Symbol panels to the artboard as you want by going to Window → Symbols Libraries.
Modular Design Limitations With Photoshop
Photoshop has the option “Customs shapes,� which are similar to the “Symbols� in Illustrator but has three major limitations:
You can’t define a precise size for the elements you create. Let’s say you draw an area for a custom shape without knowing the exact size you want. There is no editable field that allows you to adjust the dimensions to the exact size you require.
You cannot change the dimensions of the “custom shape� once it’s been created. This makes your designs inflexible and labor-intensive. These custom shapes behave more like a vector brush than reusable components for Web design.
There isn’t a specific panel to manage your custom shapes. Adding a custom shape to the repository requires many clicks every single time: click the custom shape icon, activate the drop-down panel to see the customs shapes, click to select the shape. Then finally, click on the layout and define the size of the shape by dragging it to the desired dimensions. That’s a tedious process. Illustrator’s definable Symbols panels is far easier to use and is the main reason why I sincerely believe Illustrator is the superior Web design tool.
Create Professional Designs
You can design professional, sophisticated interfaces with Illustrator. Look at the buttons below. Notice that they have a textured appearance and various visual effects (drop-shadow, inner glow, etc). With a little practice and a good eye, you can achieve the same graphic designs that you would with Photoshop. The clear advantage, however, is that these elements will be completely editable, resizable and reusable.
Add Visual Effects
Although it has fewer built-in graphic effects filters than Photoshop, Illustrator includes the most useful ones: drop-shadow, textures, noise, rounded corners, and inner and outer glow. By focusing your creativity on fewer effects, you will work more efficiently and spend less time playing around with effects.
All the filter settings are located in the Appearance panel and you can save every combination of effects as a graphic style, making it easy to reuse or to modify your designs. Remember, with Illustrator you have the power of modular design: when you update a graphic style, every occurrence of the element using that style gets updated as well.
Another powerful feature of Illustrator is the infinite number of outlines that can be placed around vector elements and the unlimited number of background fills that can be added to any object. Experiment with these, and you can create some complex layered styles.
Texturize Your Design
It’s usually better to avoid the sterile “vectorâ€� look in your designs by adding some texture to the elements in the layout.
Here are three main methods of texturizing in Illustrator:
Use seamless and repetitive bitmaps. For large backgrounds, import a texture by selecting File → Place, and then add it as a swatch in the Swatch panel. Then, you can use it to fill any shape.
Use the Stylize filters (Effects → Stylize) to add some noise or texture to a background.
Use the texture swatches included with Illustrator, and put them on top of a background fill. Change the texture fill to an Opacity mode such as Multiply, and adjust the opacity to somewhere between 15 and 20% to give it a subtle fused affect.
Again, you can save all of these texturing and noise effects as a graphic style and reuse or modify them later.
Create Perfect Gradients
The latest version of Illustrator (CS5) is packed with some sophisticated gradients, including opacity settings for each color point and elliptical gradients. You can click directly on a object to customize the filling gradient with different preferences: angle, location, colors sliders, focal point, origin, etc. The process is very efficient and is a bit superior to that of Photoshop, in which the workflow is hindered by an intermediate gradient editing window.
Currently, Illustrator still lacks some gradient dithering options (found in other applications such as Fireworks), which can sometimes lead to the “band effect.� An effective workaround is to add some texture and/or noise to your gradients, as explained in the previous section.
Notice that Fireworks offers more type of gradients. All versions (including CS3, CS4, CS5) have Linear, Radial, Rectangle, Cone, Contour, Ellipse, Bars, Ripples and some more gradient types. Fireworks has many more types of gradients, and those gradients are also “live editable� on the canvas, just like in the latest version of Illustrator.
Rounding Effects
Adding rounded corners to any shape, including typography, is very simple in Illustrator. Simply click any object on the artboard to select it. Then, choose Effect → Stylize → Rounded Corners from the main menu, and define the radius for the curve. Later on, you can modify the radius using the Appearance panel. Photoshop, on the other hand, allows you to add only rounded corners to rectangles, and once the radius is set, it cannot be altered.
Smart Resizing With “9 Slices� Scaling Tools
With Illustrator CS5, you can resize an object without distorting it. You define some zones to extend and some zones to preserve (rounded corners, for example). Save this object as a symbol, and you now have a reusable GUI component.
The 9-slice scaling feature is not new to the Adobe line of products. It first appeared in Adobe Fireworks CS3 (it applied to Symbols only in version CS3). In Fireworks CS4, the feature became a new “9-slice Scaling� tool, and now it can be used on any object on the canvas. Photoshop does not have this option at all.
Advanced Options for Text
In Illustrator, you can wrap text around images — the text will automatically adjust to changes in image size — and define outside margins, just as you would in full-strength text-layout programs such as InDesign and QuarkXPress.
Inserting Bitmap Pictures
Using photos in your layout, such as photos of products, illustrations or artwork, is as easy as dragging and dropping the image files onto the canvas. This works with PNG, GIF and JPG files. You can also paste directly from the clipboard.
If you need images that are transparent, use the “Place imageâ€� function to insert the image and then link to the source file (File → Place). As an bonus, every time you update the original file in another image editing program, the image in Illustrator will reflect these changes. This will increase your efficiency and save you the headache of having to re-import images.
You can also use a clipping mask with gradients for fading opacity, although Photoshop might win out on this one for ease of use. You can learn all these techniques with this useful tutorial by VectorTuts.
Gradients for Typography and Stroke
You can use gradients on editable text and strokes of all elements. You might want to check this tutorial for these gradients strokes to learn more about it. With a little practice, you will master this technique and be able to combine textures and effects.
What’s more, no matter how complex the typography and text in your designs become, they will always be editable in Illustrator. One thing to keep in mind, though, is that this method can be processor-intensive and should be reserved for titles and important elements.
Creating a Grid in Illustrator
In my opinion, it’s always a good idea to start your project by designing the grid and defining foundational design settings first. This will save time later and help you create a structured and consistent design.
How to create a grid in Illustrator?
Create an artboard that is either 950 or 960 pixels wide. These are the common grid sizes I use for building websites that fit the 1024-pixel–wide displays. Note: the artboard area is used for the layout of content. Feel free to design larger backgrounds if necessary.
Set the grid based on your artboard size. For example, with a 950-pixel artboard, you will have 19 blocks of 50 pixels each. Each of these blocks can be further sub-divided into 5 blocks, resulting in blocks that are 10 × 10 pixels in size. Or you could use the de facto standard 960 Grid System. Choose the grid size that you are most comfortable or familiar with.
From the main menu, select View → Snap to Grid. This makes the grid act like a magnet, forcing each element to lock precisely to one of the grid lines.
From the main menu, select Units → Preferences, and set the units to “Pixelsâ€� and the keyboard increment to 0.5 pixels (yes, 0.5 pixels, that’s a pixel-precise tip — please read the details below).
Adjust Illustrator to Fit Your Needs
Since you are using Illustrator for Web design, a few adjustments are required to keep your designs optimized for your workflow. You can change the default font setting from Myriad to the font used in your current project. Learn how to do it with this complete tutorial on changing the default font settings in Illustrator.
You can also define a few other preferences, such as text style sheets, default artboard size (950 pixels), graphic styles, and symbols to optimize your Illustrator environment for Web design.
Don’t Start From Scratch: Customize Your Templates
You don’t have to redo this process every time you start a new design. By creating and re-using templates you can increase your efficiency without much effort. You can create your own template by going to File → Save as Template. Set it up with a standard 950-pixel artboard width, your grid settings, customized preferences and your favorite symbols and graphic styles.
Create a Pixel-Precise Web Design
One of my pet peeves with previous versions of Illustrator was the “blurry effect� present in some line strokes or texts, as well as the absence of pixel-precise tools. You can avoid these problems with some of the new tools introduced in Illustrator CS5.
Property Inspector
Use the “Property Inspector� to quickly check and edit the exact position and dimension of objects right down to the pixel. This will help you reduce the time you spend positioning elements. In addition, by giving precise values to pixel dimensions, you avoid the blurry effect because the strokes will be aligned to the pixel grid.
Other useful tools in Illustrator CS5 are “Align to Pixel Gridâ€� and “Pixel Preview” (View → Pixel Preview), which helps to avoid the blurry effect.
There are two options to align to the pixel grid (only in Illustrator CS5):
When you create a new document, check the “Align to Pixel Grid� option at the bottom of the window.
In the Transform panel, check “Align to the Pixel Grid� at the bottom of the panel.
Use the Outline and Inside stroke default option, instead of the Center stroke.
Position elements with whole values, and give them whole dimensions. Avoid fractions (2 instead of 1.9, for example).
Move lines and strokes in 0.5-pixel increments when they are blurry.
Also turn on the “Snap to gridâ€� or “Snap to pixel“ option under the View menu, because it keeps the strokes locked to the nearest pixel and avoids the blurry anti-aliasing. The “Snap to pixelâ€� option appears only if you are in the Pixel Preview mode: View → Pixel Preview.
Two last tips:
To quickly position lines, set a 0.5-pixel keyboard increment in the Preferences (Preferences → General). This way, when lines are blurry, you can simply use the keyboard arrow keys to move them by 0.5-pixel increments until the blur disappears.
If you have tried everything and the element is still blurry, use a 0.999-pixel size for the stroke (hack courtesy of Benjamin McDonnell).
Why Not Fireworks?
Fireworks is supposed to be the Adobe CS suite’s dedicated application for Web design. It offers some powerful functions: Symbols library, Pages panel (I would love to have this in Illustrator), pixel-precise rendering, vector and bitmap editing, gradient dithering, etc. All the tools that any Web designer would want in a single package.
So, why don’t I use it? Well, I have tried Fireworks every time a new version is released. I still prefer Illustrator, and here are some reasons why:
First and foremost, it’s a question of taste. I find the Fireworks interface not as easy to use as Illustrator’s. Fireworks was originally developed by Macromedia (the same folks who brought Flash to the Web world), and its look and feel retain some of those roots.
Secondly, the modular design is not as well developed in Fireworks as it is in Illustrator. For example, the Fireworks’s Symbols panel allows you to preview only one item, making it difficult and time-consuming to find the symbol you want and to browse the symbols in your library.
In CS3 and earlier versions, I experienced a lot of bugs and crashes. CS4 was much improved but is still prone to some bugs. Admittedly, now these problems seem to be addressed: CS5 is one of the most stable versions of Fireworks to date, as Michel Bozgounov explains in “Adobe Fireworks: Is It Worth Switching to CS5?.� But if you are using an older version, you may still experience some crash problems.
Fireworks does not provide a way to format text by applying styles to paragraphs, which is a serious deficiency because Web design is to a large extent about typography.
Conclusion
The perfect tool for Web design does not yet exist. In my opinion, little has been done over the past few years to really meet the needs of Web designers. Still, I have developed a good working relationship with Illustrator. Over the years I have had developed some effective methods and tricks to optimize Illustrator for Web design. It’s the application that I find myself often recommending for modular design. I have developed my own User Interface Design Framework for Illustrator, resulting in improved productivity and consistency (via the Symbols libraries and vector GUI elements).
After more than 10 years of working as a Web designer, I’m no longer interested in producing the fanciest design. Experience has taught me to focus on productivity and flexibility. Work faster, and deliver the work on time: that is my priority. And Illustrator is a solid option for that. The next generation of Fireworks may wind up being closer to what I’m looking for in a Web design suite. Until then, I’m sticking with Illustrator.
Further Reading
Resources for Web design and wireframing in Illustrator:
User Interface Design framework My free Illustrator GUI framework, loaded with a ton of GUI elements (buttons, tabs, navigation elements, etc.), vector icons, graphic styles and swatches for Web designers.
Free Sketching and Wireframing Kit, by Janko A free set of elements for sketching and wireframing with form elements, icons, indicators, feedback messages, tooltips, navigation elements and more.
Sketchy Illustrator Wireframes, by Matthew Rea “In the past, I’ve dabbled with various tools to create screen mockups and designs; however, I keep coming back to Illustrator; partly because it’s what I’m most comfortable with, but it also fits well into my workflow.â€�
iPhone Sketch Elements AI, by Teehan + Lax A collection of common iPhone elements in a sketch–like style, allowing you to easily and quickly mock up custom wireframe screen flows. For their wireframing needs, they switched from Photoshop to Illustrator: the PSD version “proved a little too high-fidelity. For rapid prototyping we found we needed a more malleable approach. This is when we turned to the iPhone Sketch Elements AI.�
iPhone UI Vector Elements, by Rusty Mitchell A complete and well-crafted library of iPhone GUI elements.
iPad Vector GUI Elements, by Iconshock This set contains almost all of the iPad’s UI elements, including buttons, tabs, menus, keyboard and more.
Recommended websites for Illustrator tips and tutorials:
Vectips I learned a lot from the insights of Ryan Putnam.
Vector Tuts + Fresh tutorials and tips to improve your Illustrator skills.
BitBox Some interesting tutorials… unfortunately, just four new articles in 2010.
Why you might also use Fireworks instead of Photoshop for Web design:
No one can deny the importance of Adobe Photoshop and the role that this amazing software plays for the designing industry. For a graphic designer, PSD files can come very handy because they can easily edit, modify and customize these files according to their own taste and desire.
For this post, we’ve gathered an exclusive collection of a great number of high quality Photoshop PSD files which were created by the well-experienced and talented designers all around the world. You can easily download these files and use them for your inspiration, non-commercial use as well as for commercial use — make sure that you read the terms and conditions before using them!
In the expansive and dynamic field of web design and development, there are often times when we find ourselves working as part of a team, rather than on a more isolated, lone wolf kind of project. So when we find ourselves playing under these circumstances, then we need to be at our best to ensure that we are in fact being a good team player.
One that is contributing to the project and the work being done, instead of being a hindrance or somewhat of a hurdle that must be overcome to complete the task in an effective and timely manner. What we have to remember is that when we are working alone we are essentially the entire machine, but as a member of a team we are simply a cog in the machine that has to fit and work with the other cogs to make the machine function.
Each cog has to work together to make the team work.Image Credit
This means that we are dealing with sort of a different beast when we are assigned to a team, and that our approach should be adjusted accordingly. Now this is not always an easy adjustment for some of us to make, and so we end up playing less than spectacularly with others in these professional settings. Hopefully, that is where this post will come to help.
By highlighting and discussing the various ways that we can best work within a team environment, perhaps there will be areas in our own work that we will recognize where we have some room for improvements. Below we have done just that. But before we dive head first into the behavioral models for success, we are first going to make an important stop off at some warning signs that can spell trouble for your team.
Watch for the Warning Signs
Now before we figure out how to effectively integrate ourselves into a team environment, we want to be sure that we can identify some of the major warning signs that will let us know there is a problem developing within your team. Being able to read people or situations is an important skill in many professional landscapes, and this happens to be one of them.
When you are working on projects where you are more riding solo, then you know what bothers you and what issues that arise are ones that will prove problematic to your progress. However, when you are working on a team, you cannot so easily discern when there is a proverbial roadblock in your way. So you have to be able to read the situation and other players.
You have to keep a watch out for the proverbial roadblocks that can crop up in the way of your team.Image Credit
Through being able to read the other members of the team, you can get a sense for how each member is fitting in with the others through body language, tones, and attitudes. As the various members interact with one another, you can get a sense for how they are getting along and how this compatibility plays into the team’s progress.
Pay attention to the different tones and attitudes that are carried by each of the statements made between the members of the team, for they can be even more telling than the words being used. If certain members of the team are playful in nature with most other members of the team, but not with all, then there is potential for issue interference to rear its ugly head. These kinds of warning signs are not always indicators that a problem will arise, but it certainly has the groundwork laid for it.
There are also other warning signs that you can pick up on by reading the situations surrounding the team interactions and overall project progress. In fact, many of these markers in the road are strong indicators that some sort of corrective action is needed to guarantee a successful outcome for your project. The easiest of these indicators to identify, that should have alarms bells going off left and right, is an overall decline in productivity.
This is a major sign of trouble in your team ranks for sure. Also, as indicators go, picking up on a lack of communication or commitment from any member of the team, is also a signal that should not be ignored. These issues may seem minor at first, but they have the capacity to wreak all kinds of chaos within your team.
Speaking of a sense of lacking sending up a red flag or warning, if you begin to pick up on a lack of trust between members of your team, then troubled waters may lay ahead. In order for members of your team to be able to work together effectively, they have to trust one another, or at least trust that each member of the team is going to be able to hold up their end of the project as professionally and skillfully as everyone else.
Also, low morale among the members of the team can also weigh down your progress and cause further issues to rise within the team. So any morale drops should be addressed as soon as they are observed to prevent them from getting out of hand.
Low morale among the team is usually easy to spot and can stop your progress in its tracks. Image Credit
As warning signs go, another that can crop up from time to time and cause issues within your team ranks, is a resistance to compromise. Now this can be a major wrench thrown in to the works for sure. Just as everyone on the team needs to trust that each member will perform their part of the task at hand, each member needs to feel that there is a combined sense of teamwork underlying every step of the process.
That each member is willing to bend and compromise with the will of the group to do what works best for the project. This may also manifest itself in a more hostile light, which any sign of hostility is another warning sign that should never be ignored. Any disruption to the smooth team atmosphere is toxic in team settings and should never go unaddressed.
Summary of Things to Look Out For:
Pay attention to changes in body language.
Watch for alterations in attitudes.
Monitor tones of voice and messages for any hints of trouble.
Keep an eye out for drops in productivity.
Take note of declines in any team members commitment to the project.
Look for a lack of communication within the team.
Make sure that any lack of trust is noted and dealt with as well.
Also be on the look out for low morale in your team.
Pay attention to anyone on the team who is resistant to compromise, it could spell trouble.
Stay on top of the hostility level among the team, any spikes can mean difficult times ahead.
Behavioral Roadmaps
Now we come to the section of the post, where we examine some of the various behaviors to maintain and steps to take if you want to try and get the most out of all your team ventures. Now naturally, unless we are in the position of a team leader, then we might not be in a position to guarantee these things from each member of the team, but as long as we maintain the right course and attitude then others are likely to follow in suit. Besides, it is a well known fact that the only person we have full control over, is ourselves.
Therefore as long as we stick to these helpful hints, we know that our contributions to the team will always be useful pushes for progress. So now we take a look at each of the ways that we can impact the team, in order to discern the best ways to try and integrate ourselves into the team.
Communication
First and foremost we are going to look at the driving force of any team project, communication. Naturally, this is a vital element at play in any and every team environment you happen to be, and it requires that you not only strive to be as respectful as you can be when communicating with other members of your team, but you are also going to want to ensure the effectiveness and regularity of said communications as well.
If respect is not guiding each of our team interactions, then the more than likely, our team members are not going to want to interact with one another. This is completely detrimental to the outcome of the project and survival of the team!
Communication between the team members should always be respectful and should not be allowed to degrade into a shouting match. Image Credit
It is also important to bare in mind that teams cannot survive a project if the communication between team members is in any way hindered or unclear. So this is another area of your comms to keep in mind. Take the necessary time to formulate and completely organize your thoughts ahead of any scheduled team meetings, before you interact with the others to communicate your ideas.
This way you can be sure that any discussions are easy to follow, and this will help to keep the dialog on track as well. Also, remember to be as concise and to the point as possible, not allowing for multiple deviations so that the point gets lost in the wordplay.
In Short:
Ensure regular communication between team members to keep everyone on the same page.
Keep all communications between team members respectful.
Be as clear as you can when communicating ideas to others in the team.
Organize your thoughts before meetings to keep everything on track.
Be concise, and try not to stray from the point you are attempting to make.
Trust
Next up we are going to look at a different element that we must have in place and nurture so that we can ensure the most effective and productive atmosphere for our team to thrive in. This element is trust. Without which our team projects are less likely to run as smooth, and instead be littered with problematic potholes in the road ahead.
As previously touched on, if each member of the team cannot be trusted by the others to live up to the expectations set upon each them from the beginning, then your project is bound to be stalled a time or two because of this elemental imbalance. Making sure that everyone is on the same page as far as what is expected of them is important for establishing and building this trust.
Not only that, but we have to work to be able to trust the others in the team to honor the implicit non-disclosure teamwork clause that many like to adhere to when working on a new project. There is often an unspoken air of secrecy attached to a new project, wherein we tend to like to progress to a certain point, or even to the finish, before we begin revealing bits about it to the community.
This is not always the case, but sometimes, in order to ensure the originality of a concept we like to play it close to the chest, and we need to know that the others we are working with will do the same. Trust exercises can help with team building and management, but do not discount the contribution communication plays here as well.
In Short:
Foster an open environment in which team members can easily share with one another.
Make sure each team member knows what is expected of them.
Be sure that everyone on the team knows how guarded the concepts and project should be with regards to outsiders.
Use trust exercises if necessary to help build up this important aspect of teamwork.
Expertise
As we begin working within a team atmosphere, another important element to have firmly in place is everyone’s expertise. Naturally there is likely going to be some area of crossover, but all in all you want to be sure that each member of the team plays to their strengths and varying skillsets.
Each person that takes up a place on the team should be able to easily identify their strengths and weaknesses themselves, so that they can help ensure that they are being used in the most effective way possible. This is not something that should be left up to a team leader to completely suss out and assign. Instead, we should go into a team atmosphere knowing where we would find the most comfortable and productive fit, and let the others know this.
Each member of the team is their very own puzzle piece, and we need to know where we fit.Image Credit
Now while having some background in a particular area might qualify you to handle a few concerns in that vein, there is a big difference in having somewhat of a grip on something, and having expertise with regards to it. As much as possible, you want to keep your teammates playing to their areas of expertise to keep the team progressing nicely towards the outcome of the project, rather than having a few of them dragging down the rest by being assigned to tasks they are not completely tempered to take on. Teams tend to thrive more when each member is completely engaged and challenged by the task at hand. Usually the best way to ensure this engagement is to keep them working where they work the best.
In Short:
Know your own strengths and weaknesses, and how they relate to the rest of the team and the project.
This is not the time or place for exaggerating your skillsets…be honest about where you work best.
Assign the project tasks according to these expertise levels when you can.
Know the difference between subject knowledge and subject expertise.
Keep your team engaged and challenged, but not out of the reach of their levels of expertise.
Conflict Resolution
Another very important element of keeping your team on target and ensuring that you are able to consistently meet your project deadlines, is having a comprehensive conflict resolution system in place. With varying personality types and habits all coming together in one place, chances are, your team is going to experience an occasional bump in the road of harmony.
This is not a sign that your team is destined for failure, or that they are not going to be able to work side by side. It is merely a sign that each member of the team is human. Unfortunately, we all have our buttons that can be pressed which make us react less than reasonably, and in a team environment, you have to expect that one or two might get pushed.
Which is why it is not only vital to have a system in place, ready to handle these instances as they arise, but you also have to be sure you remain on top of them. If conflicts arise between members of the team, then the project will begin to suffer the longer these problems are allowed to persist. By keeping on top of any conflicts that may present themselves, you are not only doing what is best for the project, but also for the continuation of the team.
Get in there and get to the source of the problem immediately, without giving it time to root and grow larger. Causing further disruptions and distractions from the project and the endgame the whole team should be focused on.
In Short:
Have a conflict resolution system in place at all times.
Be aware of the various personality traits and types that you are working with to know better how to approach any rising conflicts.
Handle any conflicts that arise immediately before they have an opportunity to get worse.
Handle with care, and ensure that all parties involved are satisfied with the outcome.
Ego
Whenever you are working as part of a team, another aspect of your personality to keep an eye on and keep in check, is your ego. As delicate as these situations can be sometimes, egos coming into the equation can seriously upset the flow and functionality of your entire team.
As we said before, it is imperative to know your strengths and to be able to identify them to the other members of your team, but there is a way to this without egotistically alienating them. It should never be about personal boasting and how much the team needs a titan like you, but more about what you can bring to the table to help the team and project thrive.
This is not to say that you fall into some self-deprecating pit of despair and undersell yourself for fear of coming across as boastful. But most of us are able to distinguish between someone humbly explaining their level of skills and someone looking to simply impress those around them through their tireless tales of triumph.
Once again, we have to remember that we are here to serve the project and the team, not simply to serve ourselves or our own reputations. When we let our personal egos get in the way of that, we are seeking to make the project all about us, or worse, to reflect no one but us to the user through the outcome. Neither of which is usually a workable scenario for the team.
In Short:
Keep your ego in check when working in a team environment.
Do not make it about how badly the team needs you, make it about how well you can serve the project and team.
Remember that it is all about the project, not about any sort of personal victories.
No one person should stand out from the rest in the team.
Adaptation
Finally, the last area that we are going to cover when it comes to effectively functioning as part of a team deals with adaptation. Remembering that there are numerous areas to watch out for when you step into the team arena, adaptability is one of the most important.
Having any one member of the team be rigid when it comes to making the pieces fit together, is not going to make the experience a pleasant one for any of the people involved. So we want to bring the most adaptable version of ourselves to the table so that we are not the ones causing the team and the project unnecessary stress and delays.
Being able to compromise is key when it comes to working with others, so anytime one takes a position up as part of a team then they should expect this element to play a heavy role before the project is all said and done. Granted there are going to be concepts and ideas that you have for the project that are worth fighting for, but only to a point.
If the rest of the team does not see the same value and merit in working with you on this point, then after you have clearly made your case, it is time to compromise and let it go. Perhaps save it for another project at a later date. There is no sense in continuing to bog down your team efforts and keep the deadline on hold because you are too attached to that one particular idea.
In Short:
Be adaptable, not rigid when it comes to the project.
Allow for compromises to be made in the name of progress, rather than clinging to an idea the others disagree on.
Save ideas for future projects rather than holding up this project until everyone sees things your way.
Pick your battles, and know how long to push, without becoming pushy.
All in All
Working in a team environment can be hugely rewarding, or endlessly taxing depending on the way each member of the team integrates themselves into this atmosphere. You want to get out of the experience that which is equal to what you put into it, and in order for that to happen, you need each member of the team to come to the table ready and willing to work as a member of that team.
Hopefully the ideas discussed in this post have helped to put some of us on better ground to start from as we dive in. What areas or aspects do you think should have been included, or ideas that should have been discussed as well?
10 Harsh Truths About Corporate Websites is another useful post from Smashing’s past that has some good advice for any web teams tackling and maintaining corporate sites.
