In this article I want to share my insights and some time saving techniques for use when designing data-heavy interfaces with Sketch.

Creating Pie & Donut Charts

One of the most common chart type used to illustrate numerical proportions is the pie chart. While simple in theory, it is sometimes a bit tricky to design, especially when real-life data needs to be used. I currently use two different techniques, each of which has its advantages.

Segmented Circles Plugin

The first technique requires the amazing Sketch Plugin “Segmented Circles” built by German Bauer. It is, by far, the most advanced plugin I have come across for generating different types of pie charts within seconds. Since all segment values are entered into a single text field, one can simply copy and paste real data directly, e.g., from Excel.

Abusing Angular Gradients

I have to admit that this technique is a bit messy – but it’s incredibly useful when you need many pie charts of the same style and want to change the values of the slices quickly without the need to redraw the entire chart.

Simply add a circle and apply an angular gradient as the background. Then add two hard color-stops for each segment and align them accordingly. This is great for quickly duplicating charts, as you can simply copy and paste the style onto each circle and then adjust the color stops.

Creating Line Charts

Line charts are involved in pretty much any analytics-related interface design, as they are one of the best available options for presenting a series of data points. They can, however, be beasts to design and maintain, as detailed line charts can easily grow to hundreds of layers and groups. In order to keep all these layers structured – including the line grid, legends, marker points and graphs – organization and simplification is key.

Use Numbers or Excel

This is amazing since it saves an enormous amount of time “faking“ a nice looking graph within Sketch and allows you to design with real data. Just use your favorite spreadsheet application to create a line chart and export it as a PDF. When opening the PDF with Sketch, you can select each individual element of the chart, since they are all exported as vector graphics and organized in layer groups.

If you don’t have a set of data ready to create a diagram within Numbers or Excel, simply generate a random set of numbers using the RANDBETWEEN function.

Create symbols for points and shared styles for lines

Since the most annoying part of customizing line charts has always been finding and selecting the correct layers to adjust, it’s a good idea to automize that step as much as possible by creating symbols for each variation of data point as well as shared styles for each colored line. In this way, you can update aspects like color and border width for all charts in the design simply by updating the symbol or shared style.

Make it resizable!

Since Sketch version 39, it has been possible to create actual responsive designs that scale up and down like magic, without distorted elements. Applying resizing rules to the elements of a line chart is a good idea when there’s a possibility that the dimensions of the parent container might some day change.

Distribute layers and vector points

When drawing a line chart manually, use the vertical and horizontal distribution function to distribute the data points, lines for the x-axis, and all the labels such that they have an even amount of space in between them.

Tables

Designing tables can often turn into a real nightmare, with the need to create and organize hundreds of text and vector layers for cell data, and row, column, and border styles. Whenever we need to add or remove a column, change the width of the table or of a specific column, or change cell data – it always affects all the other elements of the table and we spend way too much time fixing visuals after small changes… until now.

Since Sketch version 39, just like with graphs, we can now resize tables seamlessly by assigning resize rules to each cell and the containing elements. In addition, it makes sense to structure table rows in a specific way and heavily use shared styles to make updating and changing the content and visual styling easier and faster.

Organizing cells and rows

To make resize rules work correctly, all the containing elements, such as text, buttons, cell background and borders, need to be grouped together.

Cell backgrounds as well as the cell text layer should be set to “Resize object”, while elements (like sort indicator arrows) that need be pinned to the left or right border should be set to “Pin to corner”.

Reduce the amount of layers

The fewer layers we need to deal with the better. I usually try to limit them to two layers per table cell – one for the text and one for background and border effects. To create border lines between rows and columns, I use inner 1px shadows with Blur set to 0. This has two advantages: there’s no need to add additional layers to create borders, and you can use shared styles for all table cells, which allows you to change something like border color or cell background effects with one click for all the cells.

Generating Content

The most time-consuming task when designing a table is filling each row with individual data. With Craft, a Sketch integration by inVision, we can automate that task completely.

Fill cells with random data

To fill each cell with random data, create one row, select each text layer and assign one of the various data formats from the Craft Data panel. Then select the row group and open the Craft Duplicate panel and choose the amount of rows you want to create. Craft clones the row X times and inserts randomly generated but individual content.

Fill cells with real data from your API

When working on designs for, e.g., a web or iOS application that already has a database and an API that serves content via JSON, you can import real data through the Craft data panel.

If the API is public, you can simply import JSON by inserting the URL for an API call. If the API requires a key or authentication, you will need to download a JSON file and import it manually, since the Sketch integration does not yet support authentication.

After successfully importing the JSON data, select a text layer and then assign a JSON value from the data tree view. Repeat this for each cell and then proceed with duplicating the row as often as you need. When duplicating rows via the Duplicate panel, Craft will fill each table cell with real data from your API.

These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems.

This unofficial documentation will be updated and extended regularly.

Resolutions and Display Specifications

Difference between Points and Pixels

Pixels are the smallest physical element that we can control on a digital display. The more pixels can be fitted into a specific screen size, the higher the PPI (pixels-per-inch), and the clearer the rendered content becomes.

Points are a resolution-independent measurement. Depending on the screens pixel density, a point can contain multiple pixels (e.g., 1 pt contains 2 x 2 pixels on a regular retina display).

When you are designing for various display types, you should think in points, but design in pixels. This means you will still need to export all your assets in 3 different resolutions, no matter in which resolution you are designing your app.

Downsampling on the plus size iPhones

Rendered pixels and physical pixels are equal on all iOS devices, with one exception: the Retina HD screen of the iPhone 6-, 7-, 8-Plus and iPhone X, XS and XS Max. Because its screen has a lower pixel resolution than what would be a natural @3x resolution, the rendered content is automatically resized to approximately 87% of the original size (from 2208 x 1242 pixels to fit the display resolution of 1920 x 1080 pixels) for the regular Plus models.

The iPhone X safe area

The iPhone X requires some special attention from designers. Unlike all other iOS devices, it features a display with round corners and also has a cut-out at the top of the screen where you can find the front cameras, sensors and speaker. The width of the screen is the same as on the iPhone 6, 7 and 8, but it’s also 145pt taller. When designing apps for the iPhone X you have to be aware of the safe zone and layout margins to ensure your app user interface doesn’t get clipped by the device’s sensors or corners.

App Icons

Automatically applied effects

App icons assets are generally added to the application package as plain, squared PNG files in various dimensions. When rendered on a device, iOS applies various effects to app icons.

Rounded Corners

The old simple radii values for rounded corners are gone. Since iOS 7, app icons have been using the shape of a superellipse. When designing app icons for iOS, I recommend to use the official app icon templates provided by Apple.

The rounded corners should not be included in the final exported assets, but you might need them in your design process if you want to add effects, such as a stroke or shadows, that are aligned to the corner of the icon.

Border stroke (in some situations)

If the app icon you are using has a white background, a 1 pixel gray border stroke will be applied to make it easier to recognize the edges of the icon. This is only done in the settings app (if your application is listed there) and the AppStore.

Legacy effects (iOS 6 and previous versions)

On older iOS versions, these effects are applied automatically: rounded corners (not the same shape as iOS 7+ icons are using), drop shadows on the home screen and a gloss effect that can be disabled.

Grid system

Apple developed a golden ratio grid system that can be used to size and align elements on your icon correctly. Nevertheless, even Apple designers are not following the grid system very strictly with the native apps’ icons. Feel free to break the rules if your icon simply works better without aligning all elements strictly to the grid.

Typography

The default system font on all iOS versions previous iOS 9 is Helvetica Neue. With the release of iOS 9, Apple introduced a brand new font called San Francisco, which replaced Helvetica Neue as the default font. San Francisco comes in two shapes: „SF UI Display“ and „SF UI Text“, while „Display“ is primarly used for UI components, „Text“ features a wider letter spacing and should be used for longer texts. You can download the San Francisco fonts here if you are a member of Apple’s Developer program. In addition to the default font, many alternative font faces are available to use. You can find a complete list of pre-installed typefaces here.

Font Sizes

Custom Fonts

Technically, any True Type Font (.ttf) can be used within an iOS app, but be careful about licenses. It should be safe to use fonts that are completely free for commercial usage. App licenses for commercial fonts are rarely available, and if they are, securing them can turn out to be somewhat expensive. MyFonts currently offers the biggest collection of fonts that can be licensed for mobile app usage.

Color Palette

Since iOS 7, Apple has been using a vibrant color palette for the interface of the OS and pre-installed apps. While you can use the default iOS color palette listed above, you can also (and probably should, if you want to stand out) use your own colors.

Iconography

In iOS apps, icons have always been a great way to support text labels with a visual relationship to the performed action or to replace text completely (often for very common actions such as „New“, „Delete“, etc.). Usually, we are dealing with icons that are part of the Navigation Bar, Tool Bar or Tab Bar.

Bar Button Icons

Icons used in Navigation Bars and Toolbars should be in outlined style with a stroke width of 1 or 1.5pt. Since iOS 11 Apple recommends to use a new solid („glyph“) icon style for Tab Bar icons.

You should never include any additional effects such as a drop-shadow or inner shadows on button icons because these are relicts from previous iOS versions (before the iOS 7 redesign). Button icons should be drawn in one solid color on a transparent background—the shape of the icon is used as a mask, and the color will be applied programmatically.

SF Symbols Icons

With the release of iOS 13, Apple introduced their first version of the SF Symbols icon font. The font contains about 1,500 style consistent icons in 9 different stroke weights, as well as 3 different scales. The full set is available for download on the Apple Resources page.

Commonly used design elements

iOS offers a great collection of ready-to-use views and controls that allow app developers to quickly build interfaces. Some elements can be customized to a certain level, but other cannot and probably also should not be. When designing an application for iOS, you should know your set of tools and stick to them whenever possible. However, in some cases, it might be worthwhile to build a custom control because you need a more custom look or want to change the functionality of an already existing control (danger zone). Almost anything is possible,and sometimes it makes sense to break the rules, but always think twice before doing so.

Status Bar

The Status Bar contains basic system information such as the current carrier, time, battery status and more. It’s visually connected to the Navigation Bar and makes use of the same background fill. To match the style of your app and guarantee readability, the content of the status bar comes in two different styles: dark (black) and light (white).

On the iPhone X, the status bar is taller than on all other iOS devices. Due to the notch that cuts into the display area, the new status bar is split in two parts. On the iPad Pro with a liquid LCD display, the status bar is slightly taller than before.

It is possible to hide the Status Bar, but think twice before doing so. For example, users might be interested in knowing if they are connected to a WiFi network when the app regularly downloads web content or if Bluetooth is enabled when the app requires a Bluetooth link to third-party hardware. A valid reason to hide the Status Bar is when you want to remove all distractions from a single element, for example, when displaying full screen content such as an image gallery.

Navigation Bar

The navigation bar contains the controls for navigating through the applications views and optionally to manage the content of the current view. It will always appear at the top of the screen, right below the status bar. By default, the background is slightly translucent and blurs content underneath the bar. The background fill of the bar can be set to a solid color, a gradient or a custom bitmap-pattern.

With the release of iOS 11, Apple introduced a new navigation bar style: when the app content is at scroll position zero (at the top), the title is moved into a separate line underneath the original navigation bar area and is massively enlarged. Once the user starts scrolling down, the title slowly fades out and snaps back into it’s original size and position.

The elements should always follow a specific alignment pattern.

• Back button should always be aligned to the left side.
• Title of the current view should always be centered in the bar.
• Action buttons should always be aligned to the right side. If possible, there should never be more than one primary action to avoid missed clicks and to maintain simplicity.

Navigation Bar on iPad

With the release of iOS 12, Apple increased the height of the base navigation bar by 6 points on iPad devices only. Large titles continue to add a further 52 points to the height of the navigation bar.

Toolbar

A toolbar contains a set of actions for managing or manipulating the content of the current view. On the iPhone, it will always appear aligned at the bottom edge of the screen, while on the iPad, it can also be displayed aligned at the top of the screen.

Similarly to the navigation bar, the background fill of toolbars can be modified, is translucent and blurs the underlaying content by default.

Toolbars should be used when a specific view requires more than three primary actions that would hardly fit or would look messy in the navigation bar.

Alongside the Tab Bar, Apple increased the height of Toolbars by 6 points on all iPad devices since iOS 12.

Search Bar

Search bars come in two different styles by default: prominent and minimal. Both versions do have the same functionality.

• As long as no text was entered by the user, a placeholder text is shown inside the bar, and, optionally, a bookmarks icon that can be used to access recent or saved searches.
• Once a search term is entered, the placeholder disappears, and a clear button to delete the entered value appears on the right edge.

Search bars can make use of a prompt — a short sentence to introduce the functionality in the context of the search. For example, „Enter a city, zip code or airport.“

To provide even more control over a search query, it is possible to chain the search Bar with a scope bar. The scope bar will use the same style as the search bar and might be useful when there are clearly defined categories for the search results. For example, in a music app, the search results could be filtered again by interpreters, albums or songs.

Tab Bar

The tab bar is used to allow the user to quickly navigate through the separate views of an application, and it should only be used for this purpose. It always appears at the bottom edge of the screen. By default, its slightly translucent and uses the same system blur for underlaying content as the navigation bar.

A tab bar can only contain a fixed maximum number of tabs. Once there are more tabs than the maximum count, the last tab displayed will be replaced by a „More-tab“ that will lead to a list of hidden tabs, with an option to re-order the displayed tabs.

While the maximum amount of tabs displayed is five on iPhones, it’s possible to display up to seven tabs on the iPad while avoiding a more-tab.

To notify users about new information on a view, it sometimes makes sense to apply a badge count to a tab bar button. If a view is temporarily disabled, the related tab button should not be completely hidden; instead, it should be faded out to visually communicate the disabled state.

Tab Bar on the iPad

On the iPad, labels for tabs are rendered in a larger font size and next to the icon instead of below. Since iOS 12, the tab bar is also slightly taller, matching the increased height of toolbars (50pt).

Table View

Table views are used to display small to large amounts of list style information in a single or multiple columns and with the option to divide several rows into separate sections or to group them.

There are two basic table view types that should be used, depending on the type of data you are presenting.

Plain

A plain table contains a number of rows that can have a header on the top and a footer after the last row. It’s possible to display a vertical navigation on the right edge of the screen to navigate through the table, which makes sense when presenting a big data set that could be sorted in some way (e.g., alphabetically descending).

Grouped

A grouped table allows you to organize rows in groups. Each group can have a header (best used to describe the context for the group) as well as a footer (good for help text, etc.). A grouped table needs to contain at least one group, and each group needs to contain at least one row.

For both table view types, a few styles are available to present the data in a way that allows users to easily scan, read and probably modify it.

Default

A table row in default style has an optional image aligned on the left and a title.

With Subtitle

The subtitle table style enables a small subtitle text underneath the row title. It is useful for further explanations or short descriptions.

With Value

The value table style allows you to display a specific value that is related to the row title. Similar to the default style, each row can have an image and a title that are both aligned to the left. The title is followed by the right aligned label for the value, which is usually displayed in a slightly more subtle text color than the title.

Large Cells

When displaying subtitles in a table view you should consider using the larger table cell style. The amount of information and controls you can display with these is the same as with other table cell styles, but due to the increased paddings the table doesn’t look as busy.

Modals, Popovers and Alerts

iOS provides various styles of temporary views that can be used to display, edit and manipulate data in a way that fits best in a given situation. While each temporary view exists for a very specific purpose and each one looks different, all temporary views still have one thing in common: When displayed, it’s the highest index layer on the current view (they appear on top of everything else), and content underneath is overlayed by a translucent black background.

Activity View

An activity view is used to perform specific tasks. These tasks can be default system tasks such as share content via the available options, or they can be completely custom actions. When designing icons for custom task buttons, you should follow the same guidelines as for the active state of bar button icons — solid fill, no effects, on a transparent background.

Actions

Action Sheets are used to perform one single action from a list of available actions and to force the user of an app to confirm an action or cancel it.

In portrait mode (and on small landscape screen resolutions), actions are always displayed as a list of buttons sliding in and staying at the bottom edge of the screen. In this case, an action sheet should always have a cancel button to close the view and not perform any of the listed actions.

When there is enough space available (e.g., on iPad screens), action sheets visually transform into popovers. A button to close the view is not required anymore because tapping a target anywhere outside the popover will close it automatically.

Alerts

The purpose of alerts is to inform the user about critical information and optionally to force the user to make a decision about some action.

An alert view does always contain a title text, which should not be longer than one line and one (for pure informational alerts, e.g., „OK“) or two (for alerts that require a decision, e.g., „Send“ and „Cancel“) buttons.

Also, you can add a message text, if needed, as well as up to two text input fields, one of which can be a masked input field, which is appropriate for sensitive information like passwords or PINs.

Edit Menu

The Edit Menu allows users to perform actions such as Copy, Paste, Cut, etc., when an element is selected (text, images, others). While it is possible to control which operations the user can choose from, the visual appearance of edit menus is set and not configurable unless you build your own completely custom edit menu.

Popover

Popovers are useful when a specific action requires multiple user inputs before proceeding. A good example is adding an item, which has a few attributes that need to be set before the item can be created.

In a horizontal environment, popovers reveal underneath the related control (such as a button) with an arrow pointing to that control while opened. The background of a popover uses a slightly reduced opacity and blurs the content underneath, just as many other UI elements have done since iOS 7.

A popover is a powerful temporary view that can contain various objects such as its own navigation bar, table views, maps or web views. When a popover grows in size due to the number of contained elements and reaches the bottom edge of the viewport, it is possible to scroll within the popover.

Modals

Modals are a useful view for tasks that require multiple commands or inputs by the user. They appear on top of everything else, and, while open, block interaction with any other interactive elements underneath.

The typical modal usually provides:

• a title to describe the task;
• a button to close the modal without saving or performing any other actions;
• a button to save or submit any entered information; and
• various elements for user input in the modal body.

There are three different modal styles available:

1. Full screen: covers the entire screen.
2. Page sheet: In portrait mode, the modal covers the underlaying content only partially, leaving a small portion of the parent view visible underneath the translucent black background. In landscape mode, the page sheet modal acts just like a full screen modal.
3. Form sheet: In portrait mode, the modal appears in the center of the screen, keeping the surrounding content of the parent view visible underneath the translucent black background. The position of the modal adjusts automatically when a keyboard needs to be displayed. In landscape mode, the page sheet modal acts just like a full screen modal.

Controls

iOS provides a wide range of controls for basically any required input type you can think of. Listed below you will find the most important (commonly used), but for a full list of the available controls, you should look at the iOS Developer Library.

Buttons

Probably the most used control overall is the good old button. Since iOS 7, the default button design hasn't really looked like a button anymore, but rather more like a plain text link. The button control is highly customizable and allows you to style everything from text style, drop shadows and color to an icon that is either prepended or centered if there is no text label, as well as fully custom backgrounds.

Keep in mind that a button can have several states, which should be communicated with visual language: default, highlighted, selected and disabled.

Pickers

Pickers are used to select one value from a list of available values. The web equivalent would be a select box (which the picker control is also used for when touching a select in Safari). An extended version of picker is the datepicker, which allows the user to scroll through a list of dates and times and select values for (configurable) day, month and time.

Except for the background color, it is not possible to change the visual style or size (same as keyboard) of a picker control. Most often, they appear at the bottom of the screens, where keyboards appear as well, but it is possible to use them in other positions.

Segment Controls

A segment control contains a set of segments (at least two) that can be used for things like filtering content or to create tabs for clearly categorized content types.

Each segment can contain a text label or an image (icon), but never both. In addition, using a mixed set of segment types (text and images) in one segment control is not really recommended. The width of one segment changes automatically based on the number of segments (two segments: 50% of total control width, 5 segments: 20% of total control width).

Sliders

The slider control allows the user to choose one specific value from a range of allowed values. Since choosing a value works pretty smoothly and without any steps, sliders are recommended for selecting an estimated, but not exact, value. For example, a slider would be a good control for setting the sound volume, since the user can hear the difference and can see the difference between loud and very loud, but a text input to set an exact dB value would be impractical.

It is possible to set icons for the minimum and the maximum value, which are displayed on the start and end edge of the slider control, thereby allowing you to visually embrace the purpose of the slider.

Stepper

Steppers should be used when the user should enter an exact value from a limited range of possible values (e.g., 1-10). A stepper always contains two segmented buttons, one for lowering and one for raising the current value.

Visually, the stepper control is highly customizable:

• you can use your own icons for stepper buttons;
• when maintaining the native iOS look, you can customize the color of borders, background and icons by using a tint color, which automatically sets the color for each of these elements; and
• if you want to go further, you can use completely custom background images for the stepper buttons as well as for the separator.

Switch

A switch allows the user to quickly toggle between two possible states: on and off. It’s the checkbox for iOS apps. It is possible to customize the color for the on and off states, but the appearance of the toggle button and size of the switch are set and cannot be changed.

Keyboards

There are various keyboard types available to provide the best possible keyboard for a specific text input. While it is possible to build your own completely custom keyboard, default keyboards cannot be customized in style or size.

Further Reading and Resources

These guidelines only provide basic information to get you started with iOS design. Once you dig deeper, you might be interested in more details. These articles and resources should help you.

Please introduce yourself and how you got into design.

Hello, I’m Ivo, an interface designer from Germany who is currently living in Bangkok, Thailand. I’ve been running my own little design studio for the last three years, but since January 2015, I’ve worked full-time for everchron, designing a case management application for lawyers.

I started to design (really ugly) things at the age of 15, when I got my hands on Macromedia Fireworks. I’ve never received a formal education in design – I just learned it by doing.

Do you still use Adobe products or is Sketch your single weapon-of-choice?

I avoid Adobe products whenever possible, and I could actually uninstall the whole Creative Suite, but from time to time, someone sends me a PSD or Illustrator file that I need to open and then convert into SVG, if that's possible.

Which other tools do you use?

• Pen and paper whenever I need to sketch something really quickly
• Coda for anything code related
• framer.js for prototyping animations
• Slack to communicate with my team
• iA Writer Pro for writing longer texts in Markdown

What is your favorite part of Sketch?

It’s lightweight and truly native. Whenever I open Photoshop or Fireworks, it feels like I’m clicking myself through a jungle of buttons and sliders in an UI layer that was just stacked on top of another interface.

Sketch, on the other hand, just feels like a fast, native and well-thought-through OSX application.

Where does it fail?

For any project that is bitmap editing related—but that’s fine. Pixelmator fills that gap. I just wish there were better compatibility between these two great design applications.

Do you sometimes feel that the Sketch team should fix the bugs rather than working on new features?

I think the latest stable releases (3.1 and 3.2) fixed a lot of the old annoying bugs. Recently, I very rarely come across critical bugs. Besides that, who doesn’t love new features? I’m happy to see new functionality in future releases, as long as they are well tested and not introducing more bugs.

I wish they would do better testing and quality assurance before pushing out new versions to the public. I’ve noticed a few times that for a resolved bug, a new bug gets introduced. That’s totally fine for beta versions, but toxic for stable releases since designers need a reliable application that does the job.

If there was one thing you could change about Sketch, what would it be?

Nothing particularly about Sketch, but more in terms of customer support in general. I know that the people at Bohemian Coding are usually replying to questions via email, but apart from that, their whole support and community management approaches are rather obscure. Instead of a messy Facebook group, I would really prefer an official portal for bug reporting (and tracking!), feature requests, etc.

Did you come across any other app lately that could follow in Sketch’s footsteps?

Pixelmator and Affinity Photo are very interesting and much better for doing bitmap editing. Every few months, some interesting application pops up that's aimed to fill the gap that Fireworks left. For me, Sketch already provides the best possible (at the moment) solution for my design problems.

THANKS FOR THE INTERVIEW!

Why?

Because high-resolution displays are the future. Almost all up-to-date mobile phones and tablets on the market have one and desktop products are now following this trend. I’m sure we will see a lot of new devices with retina displays in the next two years. When launching a new web product these days you should totally optimize it for retina screens since more and more people will be able to enjoy your awesome sharp pixels and less people will be annoyed by your incredibly blurry interface, which caused eye infections before you optimized for retina.

Most people I’ve spoken with about this issue didn’t really understand why optimizing actually matters. Here is a screenshot of a start-up’s website which looks great but isn't optimized for retina:

Solutions for background images

Modern browsers support retina screens and are able to serve different assets depending on the device screen density. Basically, you need to know that everything except images are rendered in retina resolution automatically. If your site relies heavily on CSS effects such as gradients, box-shadows, and borders you don’t need to optimize too much at all, apart from the images.

Bitmap background images

If you are using bitmap graphics as background images, you should create versions of these images that have double the resolution of the original image. By using CSS media queries you can serve these high–resolution images automatically to retina devices.

Example

We have two images, one for normal display and one for high-definition displays. I recommend using the same file name for both, but adding “@2x” at the end for the retina assets (known from iOS development).

By adding a CSS media query that detects high-definition displays you can change the image path of the original background-image to the @2x image for those displays. Adding the background size property is important since it will tell the browser the dimensions of the original image (the size the image will actually appear).

/*CSS for basic styling and non-retina image path:*/
.icon{
  width: 100px;
  height: 100px;
  background-image: url(icon.png);
}

/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-devicepixel-ratio: 1.5), 
only screen and (min-resolution: 1.5dppx) {
  .icon{
    background-image: url(icon@2x.png);
    background-size: 100px 100px;
  }
}

There is a different technique coming (already implemented in current webkit browsers), called image-sets. With this new CSS feature you won‘t need CSS media queries to overwrite your image path, you can simply serve two different assets and the browser will automatically decide which to download. However, since this is currently only working in webkit browsers I do not recommend using this in production yet.

.icon{
  width: 100px;
  height: 100px;
  background-image: -webkit-image-set( url(icon.png) 1x, url(icon@2x.png) 2x);
}

SVG background images

SVG is seriously awesome. As long as your graphics do not contain too many crazy filters and effects that you have stitched together in Photoshop, the chances that you can export your graphics to svg are high (note: does only work for vector graphics, not photos). You should take it even further and create a SVG sprite which contains all your graphics to reduce the amount of http requests. Just use these sprite graphics as you are used to. The amazing part of this technique is that there is absolutely nothing more required to make your graphics look sharp on retina displays.

Example

.icon{
  width: 100px;
  height: 100px;
  background: url(svgSprite.svg) 0 -200px no-repeat;
}

Unfortunately in the current version of Firefox (19, while I’m writing this), the browser doesn‘t renders SVG sprites in retina resolution – only single image SVG‘s. Hopefully Mozilla will fix this soon. Opera has some serious bugs when it comes to SVG sprites – these will probably be fixed automatically since they are switching to the webkit engine soon.

High-resolution image tags

Serving high-resolution assets for <img> tags works a bit differently. Since the image path isn’t set in the CSS but in HTML you can’t use media queries. Again, there are different approaches to serve sharp images to users with a retina device.

The easy but bandwidth-hungry way

By adding an @2x image by default and resizing it to the original size you are serving the same asset to non-retina and retina devices. This isn’t optimal since the file size of @2x assets is actually a lot bigger than for normal-resolution ones. This means non-retina users are unnecessarily loading the large file, however in some cases it might not matter that much because you are not loading a lot of images or the images are pretty small.

Example

<!-- The image itself is 640x240px. Scaling is done into HTML. -->
<img src="photo.jpg" width="320" height="120">

Pro Tip: use jpgs when possible and use a higher compression rate than you would do normally. The guys at Netvlies have proven that in some cases you can have a smaller file size and better quality.

The easy and even more bandwidth-hungry way

Retina.js is another easy way to serve high-resolution assets to retina devices. The pro is that you’re no longer serving big files to non-retina devices. The con is that with retina.js you are serving normal-sized and @2x images to retina devices, which dramatically increases the loading time of your site. In addition, if there is no @2x version of the image available the script will cause a 404 error which is never really nice. The script has a few issues with svg graphics as well – when using a svg image in the src of your <img> it will look for a @2x version which is of course not available since it is not required. I cannot recommend using retina.js if you care about a fast loading time and an empty error console.

The hard, server-side way

“Retina Images” is a pretty nice solution to serve high-resolution images automatically without double loading resources. It relies on javascript, enabled cookies, PHP, and a modified .htaccess file – if this isn’t a big problem for you it’s probably the best solution to offer your visitors the full retina experience. In case an @2x image isn’t available it will just revert back to the normal sized image. If you are using Wordpress, there is also a plugin available which makes the installation even easier.

A side note about icon fonts

In the last year, icon fonts were hyped pretty hard. Of course, they are a pretty useful way to include glyph icons in your website which can be scaled endlessly, and they are easy to modify by applying CSS. Since it’s a font these icons are retina optimized by default. Still, I can’t recommend using icon fonts when you care about pixel perfection. Almost every browser out there renders fonts in a different way than others, which makes it impossible to optimize icon fonts. Especially on non-retina screens you will often see blurry lines (known as half pixels) and due to different anti-aliasing settings on OSX and Windows, lines might look really bold on one system and thin on another one.

Instead use SVGs – they will appear as you’ve exported them and will not be harmed by browser or OS settings.

Retina-ready favicons

Favicons might be a small part of a website but they are also the part that represents a website link in bookmark bars, news readers, when pinned to a Windows task bar, and on “most visited” tabs in browsers. A blurry favicon next to high-resolution favicons in a bookmark bar will look pretty out of place on a retina display (Twitter and Quora users will know).

I can highly recommend x-icon editor for creating retina-ready favicons in .ico file format. Just upload one 64 x 64 sized image and you can export an .ico file which also includes downsized versions of your uploaded icon. If you need to fine-tune each of the four included icons (64, 32, 24, 16 pixels) you can also upload a single icon for each size separately.

Also, don’t forget to provide Apple touch icons which will be displayed when a website is added to the iPhone/iPad home screen.

Some sites that got it right

I hope this little guide helps designers and developers out there to produce better retina content. If you have any questions or know some other tricks to create a better retina web, please let me know in the comments!

When I was sick a few months ago, I went to the doctor and received an invoice for the first time since switching to a private insurance company when I started freelancing (Germans will know). The doctor had a flat hourly rate but added a multiplier to each task (I guess based on the instruments he had to use or the difficulty of the task). I was thinking about this model for a while and came to the conclusion that I could easily adapt it for my own business, in a slightly modified version.

Since I don’t feel like I’m working on tasks that are a lot harder than others (I put the same effort, knowledge and creativity into wireframing, designing and coding), I thought I could set the multiplier based on the client’s project and his financial situation.

The formula

After a detailed call with a new client, I know if I would enjoy working on his project (let’s be honest — there are these super-nice projects by fresh start-ups and there are these incredibly boring projects for bigger companies that don’t really care at all about the love in each detail). The first variable I'm putting into my formula is the "project fun factor" (p), which could have the following values:

• Great project. I share the vision of my client and I know I will have a lot of fun working with him, since he wants to build something great and he or his team are pretty cool dudes. Value = 1.0
• Average project. It might be fun sometimes, but there will probably be some hard times as well. While I’m building a nice product, it might be possible that I’ll need to do some stuff I don’t like (e.g. endless iteration rounds [not always a bad thing], silly pixel pushing that just needs to get done to proceed). Value = 1.25
• Not-fun-at-all project. There are these big companies that are willing to pay a lot of cash for your services. Unfortunately, the communication with these clients is often really hard; they are often not really willing to try out something new, which could have a great impact, and the product itself might be pretty boring or you might need to continue working on something that isn’t good at all (you know, these sites that are based on techniques from the 1990s, and need IE6 support because the clients of the client are not able to update their damn browsers). Value = 2.5

The next variable I’m adding to my formula is the financial situation of the client. Important to know is that I would never accept a not-fun-at-all project from a client that isn’t willing to pay a lot. Again, there are three different values for this variable (c):

• Bootstrapped start-up with a limited budget or other freelancers that don’t have an unlimited budget. Value = 1.0
• Well-funded start-ups and design agencies. Those guys are able to pay you well for the work you get done. Value = 1.5
• Big companies (like 100+ employees and a minimum yearly revenue of €10M). Value = 2.0

Finding out the financial situation and size of a company is pretty easy in most cases. First of all, I’m talking with the client — in most cases, they tell me about this even before I’ve asked, since it’s in their own interests. Moreover, I’m doing some research — the most funded start-ups love to gain some attention on tech blogs whenever they succeed on a funding round, and there are some databases out there (e.g. Crunchbase) that you can check out when looking for previous funding rounds of a specific company. The big ones won’t need to tell you they have money — either you know the name already or you can find out more about them through a simple Google search.

The last variable I’m putting into my formula is a basic hourly rate (R) which will be multiplied. I’m setting it at €65.00.

This is what the final formula looks like:

Hourly rate ≈ R * ((p + c)/2)

• R = Hourly Rate
• p = Project Fun Factor
• c = Clients Financials

Some examples

Let’s calculate some examples based on this formula:

1. Let’s assume I’ve been asked to work on a pretty innovative product (p = 1.0) and will be working for a bootstrapped start-up (c = 1.0). My hourly rate will be set at €65.00, which means the chances are high that the client can afford it and that I will have a lot of fun working with him on an exciting project. Win-win situation.
2. Let’s assume I’ve been hired to design a standard corporate website for a design agency that is currently too busy to have their in-house designers work on it (c = 1.5). In my eyes the project might not be that exciting, so I set p at 1.25. Based on my formula, my hourly rate would be €90.00. Most funded start-ups and agencies would be able to (and probably will) afford this price for good work.
3. Let’s assume a big group wants to hire me to fix and improve their (in my eyes) boring Customer-Relationship-Management System. Since I'm pretty sure this won't be much of a fun time, I set p = 2.5 and c = 2.0 which will result in a hourly rate of €150.00.

The problem with freelancers' rates

I think putting a price tag on your time is incredibly hard as a freelancer. It’s a balancing act between being affordable for the clients you want to attract, not being too cheap to cover your living costs, and building a healthy financial buffer zone. In addition, it’s pretty hard to estimate what skills, creativity and experience might be worth.

For some reason, only a very small amount of freelance designers I know are talking openly about their rates with other designers, which makes it even harder for the individual to compare with others and find a suitable rate for himself. From my experience the standard rate for a good UI designer is somewhere between €50.00 and €100.00. Some designers are charging more, and some less. Someone was even charging $1,000 per hour a while ago. There is no such thing as the perfect rate and it takes time to find one that fits your needs.

If you are interested in reading more business related articles for freelancers, you should really read Being a freelance designer.

Making the cut

Being a full time employee at a company might sound fine at first - safe income, set working hours (this is both good and bad), paid vacations and, in some cases, some kind of a bonus at Christmas. I enjoyed being an employee, but I wanted to achieve something more, not just build boring stuff for mostly boring clients. I wanted to earn more, I wanted to set my own working hours, I wanted to have more free time and I wanted to relocate to a location where I felt more at home. Considering all these aspects, it wasn’t such a big step to just make the cut - which I did.

The financial aspects

Being a freelancer is like running a business and you need to be aware of this fact. One of the most important keys to a successful business is having an eye on your finances and calculating how much money you will need on which dates.

Savings

Having savings before you become a full- time freelancer is a must, especially if you have no existing clients. Personally, I saved around 25k € before I went freelance and that was a pretty good idea. Luckily I never needed to touch this money, but it‘s good for your psyche when you know that you have something to live on even if you don‘t have any paid gigs. I think that how much you should save before going freelance really depends on whether you already know some people who might be in need of your services or if you at least know where to find these people. However, I think saving enough money to live on for around 6 months, without additional income, should be the minimum.

Revenue

I started freelancing with three existing long term clients, which is the best that you could ever hope for when starting a new business. Since I‘ve been freelancing, I have earned around twice as much (including taxes, healthcare and pension) than I earned when I was an employee. If you are able to aquire new clients and, more importantly, keep them, it is a sure thing that you will earn much more than an average employee at an average agency.

Accounting

This is a damn important part - it sucks pretty bad, but you need to do it. Personally, I hired an accountant right from the beginning and that was a really smart decision. I‘m happily paying my accountant around 200,00 € per month for keeping my books clean and letting me focus on what I really want to do: design stuff. By the way, I am still looking for a great money management application, unfortunately mint.com doesn‘t support European banks. If you know any tool that works with major European and German banks, please let me know!

Invoicing

I‘ve been working with the App „On the Job“ since I started freelancing and it‘s ok. It has great time tracking abilities, but lacks support for advanced invoicing. Also, it doesn‘t have any sync or cloud abilities, which makes it really hard to work on different machines sometimes. I might do the switch to the new version of Ballpark soon.

The daily routine

To be honest, I don‘t have a routine. I sleep when I‘m sleepy and I wake up when I feel rested. I work whenever work needs to get done or when I am in a creative mood. My day/night cycle switches for around 12 hours every two weeks, which feels a little bit strange. I discovered that I should do a minimum of one off-day per week to keep myself motivated. I work around 7 hours a day, but there are some days when I‘m really motivated and keep working (often on personal projects) for around 15 hours a day.

Health

When I started freelancing (and also when I was working as an employee) I was mostly eating a lot of unhealthy stuff, especially fast food. However, I didn‘t weigh myself for years and was kinda shocked when I stepped onto a weighing-machine a few months ago which showed around 95kg. To live a bit healthier than before, I started jogging around 30 minutes every day and cooked food on my own instead of ordering out or putting instant food into the microwave. That worked really well and I lost around 15kg within 3 months. By doing a little workout every day and eating more vegetables it seems like I can easily maintain my weight now.

Organizing yourself

Before I started freelancing I was pretty sure that calendars and GTD applications took more time than they saved. However, when you have to deal with more than 2 clients at the same time these tools (especially a good organized calendar) are pure lifesavers. I couldn‘t tell you how many meetings and deadlines I would have accidentially missed if I didn’t care about organization.

Clients

Luckily I have never had to find clients, since they have always found me and, on average, I‘ve more work enquiries than I can accept. I really have to mention that Dribbble is the most valuable tool for finding clients, as it seems like tons of clients (especially from the Bay Area) are looking for designers on Dribbble. Another really nice resource is Folyo, a kind of job board for designers - as a registered designer you will receive around two or three emails per month with some really great opportunities.

Keeping clients

Much more important than finding new clients is keeping them. Once you have built a solid client base of returning or long term clients, you will never again have to check out a job board or write emails to possible opportunities.

Keeping clients is actually not that hard - do your work in on time and do it well. Just invest a bit of time for talking to them about their ideas and visions and maybe some work unrelated stuff. If possible, meet eye-to-eye and drink some beers.

Summary

I‘m enjoying freelancing more than anything I‘ve ever done before. It‘s a great feeling to have the freedom to choose the people you want to work with and also to choose the projects you want to work on. Making more money is a nice bonus.

If you are freelance, I‘m very interested to hear about your experiences, so please just share your thoughts in the comments if you want. Also, if you are interested in similar articles you should read "A different approach to charging clients as a freelancer".

Create smooth glow effects using feathered edge

When you have an object in your design that you want to emphasize for some reason, making it shine is a great way of grabbing the attention of your users, and also of keeping the interface eye-catchy. In Adobe Fireworks, there are three main ways how to create a glow/shadow, but the result is also different for each method.

Fireworks Glow Effect

This is the standard glow effect provided by Fireworks. The effect can be added to any object via adding the Filter, “Glow“.

In this example I’ve used a glow distance of 0 pixels and an opacity of 50% while I’ve set the blur to 14px. This should generate a wide glow without any distance to the light source.

The problems can be seen in the image above; if you use this effect for a decent (around 0-30% opacity) glow, the glow won‘t be totally smooth and you can detect the corners in the glow – something that should never happen. The glow filter can be easily used for hard glows or glows with a very small blur (max. 6px), but you should avoid using this filter for a big glow with a low opacity.

Glow via Photoshop-Live Effect

Since Fireworks allows you to use Photoshop Layerstyles, you can also create a glow via the Photoshop-Live effect, “Outer Glow“.

The Photoshop-Live Effect offers a few more attributes then the Fireworks glow effect. In this example I’ve tried to achieve the same result like generated by the Fireworks effect.

The PS-Live effect works very similar to the Fireworks filter. The main difference between the Fireworks filter and the PS-Live effect is the blend mode of the applied glow. The PS-Live effect uses negative multiply as its default blend mode, which cannot be changed, while the Fireworks filter uses the normal blend mode as its default. The difference is minimal and, personally, I don‘t see any difference. The problem remains the same; you can also see the corners of the glow.

Glow using a second shape with feathered edge applied

This method requires a second shape, which is slightly bigger than the shape you want to apply the glow to. It should have the same attributes, like your original shape (e.g. color, other effects), and you have to place it behind the original shape. When you change the edge-mode to “Feather“ for this shape, you can achieve a very smooth glow effect.

Since this method generates the smoothest result, I recommend always using this way for decent and extremely wide glows. You can only use this effect if you‘re working 100% with vector shapes. If you want to use this method for text, you have to convert your text to a path first, because text doesn‘t let you change the edge-mode.

Another way to generate a glow effect is using the Filter, “Gaussian Blur“. However, it seems like this filter is using the same algorithm to render blur, like the “Glow“ Filter. What this means is that you are confronted with the same problem described above, when choosing to use gaussian blur to create a glow.

When to dither your gradients

Since the Creative Suite 5 update, gradients can be “dithered“. Basically, this means that the colors of the gradient are mixed a little bit on a subpixel level. This results in a very decent grain, which blurs the color gradations.

The Dither tool is a great feature, which allows you to create smooth gradients with a small amount of colors between the different color stops. While this is the main purpose, you shouldn‘t use dither for any gradient. On smaller gradients with enough colors between two stops (which means ideally one color per pixel), there is no need to dither. If dither is used on such gradients, it will interrupt the natural flow of the gradient because the position of the color stops will be manipulated.

Get the most out of your text

While font rendering isn‘t the thing Fireworks does best, you can do a lot with custom anti-aliasing settings, in order to get your text looking right. Of course, there isn‘t one rule you can apply to all your text but if you use standard sans-serif fonts, such as Helvetica, Arial or Verdana, these settings should work effectively:

For serif and script fonts, it can be a bit tricky producing decent results because the little serifs are often rendered too hard or too soft. Just try and find the middleway here, through dragging the sliders of sharpness and strength.

When you create very large headlines (around 56px or larger), for example, for a huge title in a website‘s header, which uses sans-serif or pixel fonts, I recommend to always convert the text into paths. If you can detect some half-transparent misplaced pixel then just use snap to pixel to achieve a sharp, yet smooth and anti-aliased text.

These were just a few tips I wanted to share with the pure pixel fetishists out there; I will share some more via Twitter or maybe on another blog post in the future. Please also let me know what you think about these little details and if you know any more tricks in getting the pixels right.

Since I launched the website FireworksLab (a free resource page for Adobe Fireworks files) some weeks ago, I have received various mails from people looking for a reason why they should use Fireworks instead of Photoshop. I have never answered any of these mails due of a lack of time but now I’m going to tell you why I use Fireworks instead of Photoshop for interface design and why you could do too – or why you should continue to use Photoshop. In addition I will show you why most of these “Fireworks vs. Photshop” posts are completely taken out of context and what I think about the Pros and Cons of both Adobe products.

The right tool for the job

Fireworks was made to build and export web graphics in an elegant way. Following the popularity of mobile devices like the Apple iPhone it is now often used to mock up and design user interfaces for apps.

While inDesign was made only for print, Fireworks was made only for Web. Each attempt to build something for print (like a flyer or a poster) will fail from the beginning – by default (this limitation can be bypassed) your documents cannot have a higher resolution than 6000×6000 pixels and after adding some objects to your canvas, Fireworks will become slower and slower until eventually, Fireworks will crash, of course. This is one of numerous reasons why you should never use Fireworks for print (I’ve tried it more than once).

Photoshop works kinda different – you can work with CMYK-Colours, high resolutions and file sizes bigger than 2GB (the biggest Fireworks *.png I’ve ever seen was 50MB) but with Photoshop this is not a problem.

You can guess what Photoshop was made for. Correct, Photoshop was primarily built to correct and manipulate photography. While Photoshop offers many ways to manipulate photos, it has a lot of built in features that can be used for web/interface design. You can use Photoshop to produce screen graphics but also for advanced print stuff.

Photoshop became popular as a big, mighty tool for creating and manipulating digital artworks over time. Everyone knows you can do anything with Photoshop. I guess that’s the reason why so many web designers decided to learn Photoshop instead of another design application – good marketing Adobe!

The little big differences

Vectors or Bitmaps

When you create an object in Fireworks (whatever it is), this object is basically a vector object. This means that when you scale up or down you won’t loose any quality. This is great but even more awesome is that when you’ve applied an effect (e.g. a drop shadow) to that object and you scale the object up, the effect will scale too. Fireworks will not just change the dimensions, it will also change the attributes from the applied effects. This feature can be a huge advantage when you are designing Apps for iOS.

Photshop generally works with bitmaps, not vectors. Sure, you can create vector objects, but Photoshop is always less intuitive than Fireworks when it comes to this job. Effects in Photoshop will always stick to their attributes and won’t change their dynamic when you scale up something.

Font Rendering

This is one of the big disadvantages of Fireworks – as a graphic design software made for the web it’s unable to render fonts as they would look in real web browsers. The default anti-aliasing settings which can also be seen on Photoshop (sharp, strong, smooth) are nearly unusable and you have to set up your own custom settings for font rendering for different fonts and different sizes.

While you can create and modify objects like rectangles or circles faster with Fireworks than with Photoshop, you end up having to play around for a long time with font rendering settings if you are working on something with many different fonts (and font sizes) and you care about how the fonts look on your design.

Image Compression

There have already been some comparisons on the web between the image compression capabilites of Fireworks compared to Photoshop. The result: Fireworks does a better job on saving flat png files at higher quality but lower file size.

Personally, I totally don’t get the point of those comparisons – when you export graphics from your primary design software for use on websites or apps you should not care about the file size. The reason behind this: there are tools which do a much, much better job when it comes to compressing graphics for the web than any Adobe software out there! While Fireworks has a good image compression technique, tools like ImageOptim or the web service PunyPNG will still beat it.

Updates, Patches and Features

When reading changelogs of major releases of Fireworks you will (if you’re just a common web designer) find around three or four cool things you are happy about. In addition you will read that Adobe has added some new super ugly templates which no one uses as well as more Web 2.0 glossy gradient styles, some Flex-Export-Thingy (that the majority of users never need) and enhanced (but still not usable) CSS-Export.

Here are some examples of what could be really useful features for the common Fireworks user:

• Mac Trackpad Support
• Insert layer styles directly as CSS3, export Layer styles directly as CSS3
• Folders for Pages
• Improved Layer styles and/or better integration of Photoshop Live-Filters
• Bugfixes!

I get jealous when I see which new features Photoshop-designers implement with every new major release of Photoshop – cool things like content aware fill, smooth edge detection or live colour comparisons.

Stability & Bugs

Fireworks definitely crashes more of often than Photoshop but actually I can see the light at the end of the tunnel. Since the release of Creative Suite 5, Fireworks chrashes less than in previous versions. I’ve also noticed the Mac version is way more stable than Fireworks for Windows.

Regarding the Bugs… you fill find a lot of them in Fireworks, they are simply part of the product. You have to learn how to avoid them and how to fix your document when they destroy parts of your design. After some time you will be familiar with most of them and you will know how to bypass them.

Photoshop also contains some bugs but it’s way more bug free than Fireworks.

Developer-friendliness

A big advantage of Fireworks is it’s simplcity and how it handles selection of layers. Photoshop files can become very messy when you want to design fast. If you don’t clean up your files at the end of your work it will be really hard for the developer to find the correct layers and groups to export.

I have worked with several web and app developers and all of them learned the basics of Adobe Fireworks (in general that’s selecting, dragging and exporting) in less than ten minutes. Trying to explain to a total newbie (and non-designer) how to handle layers and countless masks in Photoshop can become a day job.

User Interface and User Experience

While Fireworks looks like an Adobe product, it still feels like something made by Macromedia. The overall style of the UI is the same in PS and FW since CS4 but the way the user interacts with the app feels totally different.

Overall, both Fireworks and Photoshop have the common elements every graphic design software has: tools, layers and a lot of windows/panels for colours, gradients, vector tools and much more. In my eyes there are only two huge differences between both apps: the way they to apply effects to objects/layers and how they work with gradients.

Effects

In Photoshop there is one common way to apply effects to a layer: you click the Add effects in Photoshop-symbol and a window pops up which allows you to apply and change all the effects for the layer. You can apply one effect once to one layer.

In Fireworks there is a totally different way to work with effects. You can apply them via the properties panel in the effects section which you always open. To add an effect, click the “+” and choose your effect. Adjust all the settings for the effect and be happy. No extra windows or dialog boxes. I think the way that Fireworks handles this is much more intuitive than the way Photoshop does. More great things: you can apply the same effect as often as you want and you can’t just delete your effects.

Gradients

In Photoshop, gradients are handled as simple effects. You can apply them like all other effects via clicking “fx“. There you have the settings and you can play around with these to achieve your desired result.

In Fireworks gradients are not applied as effects but as gradients! There is a main section dedicated to gradient settings. After you’ve applied a gradient to an object you can drag, cut, rotate and squeeze gradients via the gradient handler – a special control that is used only in Fireworks.

Finally, should I switch?

If you have worked your whole life with Photoshop then lot of things will look unfamiliar to you in Fireworks. The same is true for Fireworks power users who try to use Photoshop for the first time.

In terms of user interface design, I think Fireworks is just the right tool for the job. If you have never worked with Fireworks before, just give it a try, watch some tutorial videos and try out some simple stuff. If you still think you can achieve better results faster with Photoshop, then just stick to Photoshop.

This advice also applies to actual users of Fireworks: you shouldn’t think that Fireworks is the best piece of software and that there will never be a better tool to get the job done. Personally I love to use Fireworks for Web and UI Design but when it comes to illustrations, icons or something to print I think it’s better to drop your good ol’ friend and start learning something new.