After more than a year in the making, i’m excited to welcome everyone to the fourth version of Pixelresort, a cleaner and more vibrant experience.

Lots of stuff has happened since i pushed out the 3rd iteration of pixelresort more than 2 years ago. My career has matured and i’m now running two companies that have survived past their two year-old birthdays. So i felt it was time for Pixelresort to reflect that change and in many ways better accommodate how i use this site.

A cleaner look

One of the main goals of this redesign was to create a cleaner more airy feel, i wanted to have a less contained site with more emphasiz on images and text. I feel that i’ve taken the Pixelresort brand in a new and exciting direction without completely throwing away the heritage from the 3 previous versions of the site. In many ways the new logo and the rest of the visual identity is an evolution of how i’ve always felt about the site but with a much sharper edge. Pixelresort is a one-man design company, and while i don’t think there’s ever a fear that it’s going to get too corporate, i wanted to make it easier for clients to see my work and get a hold of me.

The new portfolio

One of the most important things for a freelancing designer is to have a current portfolio thats reflecting your skills and ambitions wrapped up in projects that you’re proud to showcase. Alot can happen in a few years and to say that my old portfolio was outdated would be a severe understatement. That’s why one of the driving factors of this redesign was to create a place where i would have plenty of room to highlight selected projects and give potential clients an idea of what sort of work i deliver these days. My new portfolio does exactly that, and i’m happy to finally have a place i can refer people to.

Onwards and upwards

I’ve always had a ton of plans for Pixelresort, but over the years i’ve had to realize that with the amount of projects i’m involved in this will never be a site with weekly updates. Getting to terms with that and designing it so that it’s a perfect anchor point for my company, sharing resources, showcasing my work and giving people a way to reach me was a major part of this design. I’m hoping that i’ve created something that will carry this tiny one-man design company into the next couple of years and help me grow as a designer.

I hope you like the new surroundings. Please drop me an email if you have any comments.

Michael

Here’s a Safari icon set that explores new compass concepts for your favorite browser! After months in the making and with a ton of help from people on dribbble and twitter I’m finally releasing this set for everyone to enjoy.

Something that started out as a doodle on my iPad grew into a cascade of late nights studying compass concepts and exchanging ideas with designers and good-folk alike. Sometimes you just stumble upon a fun notion and you gotta run with it, in this case it was as simple as the idea of why the Safari icon always had to depict that one type of Compass. A few months later, and I’m finally wrapping up 10 fun new compass icons for you guys to put in your docks.

Played around with some early rough sketches

I’ve decided to show some more high res artwork and give some justice to the many hours spend by reflecting a bit on each icon below, but if you just want to skip that and get the download, head straight over to the Goodies section and download the set. If you like to look at big icons and read some more words, read on.

It all started out with a remake of the original Safari icon

The Compasses

First off, I owe a huge thanks to the community for giving me feedback and feeding me ideas for this project. My awesome followers over at twitter has directly inspired several of the icons in this set and sharing the progress over at dribbble was a tremendous motivational boost.

A more dated look for your browser.

So after initially just setting out to create a fresh take on the existing Safari icon, I quickly struck a rich creative vein – the idea that the concept of virtual navigation and browsing the internet didn’t have to be restricted to the representation of just one type of compass. We’ve used, and still use, an abundance of different compasses depending on our situation, so it was time to start browsing the web for compasses.

The concepts quickly became less about realistic objects, and more about creating a theme in each icon – here’s a professional black look, something I imagine a soldier carrying around. I have no idea what he would use a leveler for though.

As with all personal projects, the fun is that there’s only the limits that you set for yourself – which basically meant that if a compass idea started forming, it wasn’t as much about “would this compass exist in real life?”, but more “would this be a fun icon to do?”

Started moving away from the original template and playing around with new shapes.

As the low hanging creative fruit started to run out, people started suggesting other types of compasses that pushed the concept further.

A GPS-styled (hello Garmin?) navigation.

As if the hundreds of compass pictures that was clogging up my desktop wasn’t enough, I started getting deeper into maps and cartography, using them for backgrounds and getting inspiration. If you haven’t noticed before, mapmaking is such an elegant art, displaying a high level of information in a digestible format. I think most interface designers agree that it’s something we try to achieve every day.

Concepts even got a bit silly, like this pirate themed one. I have no idea how the sundial got there, but someone suggested it on twitter and I thought it was fun.

As the compass ideas kept flooding in, I tried to mesh and combine concepts that I thought would be a challenge to do, technically. Common for several of these icons is the attempt at modeling particular textures or obtaining a specific effect.

The challenge in this one was to create a larger depth and a higher level of realism in the reflections.

In one icon the challenge would be to create a realistic reflection, in another it was mimicking a particular material, like water in the, truly back to basics, floating needle compass:

I looked at countless of glasses of water to get the refracting light right

So as I progressed through the set, the reward became setting up a particular challenge, wether it was a texture or just conveying a “mood” and then trying to solve that in something resembling a compass.

For the basic textures I used a slew of Photoshop filters and for some of the more realistic stuff I scoured the web for pictures and references, warping, combining and editing them until I got the result I was looking for.

Never stop doing what you love

Even though this project often ended up being pushed aside for a ton of “real” work, I kept coming back to it – sneaking a night here and a few hours there. And it’s personal projects like these that remind me that we can’t loose sight of the things we like doing. Creating something, just for the fun of it, to test your skills and to challenge yourself to collaborate, take inspiration and breathe life into a concept is such a vital part of being a designer. Especially when freelancing or working on large multi-month projects, we tend to forget the thrill of just creating something, letting your ideas run free, safe from a budget restraint or a looming deadline. Cause let’s face it, most of us got into this for that feeling and sense of achievement you get from nurturing an idea, receiving creative input and the stamina to see it through to the end, wherever it takes you.

Go Download them!

Enough talk, I Hope you enjoy these icons just half as much as I enjoyed creating them. Head over to the Downloads section and download the set.

After more than 10k downloads of my old app icon template and countless of requests for an update, i’ve put together an app icon template that should make your icon endeavors on the iOS platform easier.

More than a year ago i posted an article called ‘iPhone app icon design: best practices” in which i supplied a very basic app template with a handful of textures for 57×57 pixel icons. Seeing that resource being downloaded more than 10k times and receiving a lot of mail from people asking me to update the resource urged me to create a new, updated template.

Why another resource?

There’s already a couple of great app icon resources out there, so to justify a new resource i felt that it needed some additions. This has steered the development of my own template, which i’ve used and refined over the past month. I’m happy to finally release this template for public use, royalty free in any project you like, personal or commercial.

How to use this template

Let me give you a walkthrough of the template, and in the same breath show you how it differs from existing resources.

You can download the template here, or by clicking the big-ass download image at the end of this post. When you open the template you’ll see an overview of the different sizes we’re aiming to create, it should look something like the picture at the beginning of this post.

Now in your layers window, in the 512px folder you’ll see a smart object with the educational title ‘EDIT THIS SMART OBJECT’. Go right ahead and do that.

Automation

See, one of the interesting ideas here is to use smart objects to automate the generation of all the icon sizes, theoretically making it possible only to create the largest icon size and see all other sizes scaled and adjusted. Now obviously this doesn’t give you the pixel perfection that we’re always looking for in the smaller sizes, but it does give you a way to quickly see how well a concept would work when scaled across the various sizes.

When we edit the above smart object we’ll get to the core of this template, the icon.pbs file. It should look something like this.

Everything is set up for you to create your icon in this single 512×512 file. Enabling the top most layer (titled ‘HIDE ME WHEN DONE’) will show you an overlay, estimating the rounded corners Apple will apply. But perhaps more interesting is the folders beneath, which brings us to the next feature of the template.

Textures

I think what made my previous app template popular, was the ready made textures bundled with the resource. So obviously an update to that template should include some textures that you can build off, get inspiration from or straight up just use.

As you can see above I’ve included a handful of textures that you can immediately apply to your icon. These are all 100% vector, feel free to use them in your project or alter them in any way.

All sizes in just a second

As soon as you hit save on your smart object and return to the template psd, you’ll see that all the sizes have been updated with your new icon, like this.

I can’t stress enough how much of an estimation this is and how important it can be to actually go in and custom create the smaller sizes. In this template i’ve tried to take as many precautions and apply subtle effects to give you, at least some sharpening and detailing applied automatically. This includes darker borders and a different treatment of all the icons that will be displayed in spotlight or settings (as they will be presented on lighter backgrounds on the device)

If your icon has several straight lines or sharp contrast you might experience half (blurry) pixels when it’s automatically scaled down. In these cases it’s impossible to automate and you’ll have to get out your pixel tools and manually correct it. After you’re done, this template has one last trick up it’s sleeve.

Exporting made easy

Bundled with the template comes 2 photoshop actions that’ll make exporting your icons a breeze.

Import these actions into photoshop and use them with the template, they’ll spit out all the files you need, both in Squared (no transparency, how apple wants them delivered) and in rounded versions (for other design uses). The files are automatically named after the Apple HIG so they’ll be good to deliver instantly. Finally a good use for Slices in PS!

Making better icons

I hope that this template will help strike another blow agains bad icons in the app store. Automation of icon sizes, bundled textures and a nifty export script puts it apart from other templates and arms the designer with a couple of tricks that will make drafting ideas faster.

Download the PSD file and the Actions below

Should you find some errors or have any ideas for improvement please shoot me an email.

Have fun creating icons.

The new iTunes 10 icon got you feeling blue? Well, I’ve created 10 different styles for your favorite music player. I’ve also included another one of my speed drawings showing the process.

As many others I wasn’t too pleased with the new iTunes 10 icon introduced by Apple last week. If you don’t like something, it’s in your own power to change it, which is why I sat down and made a set of icons i felt resonated more with my idea and use of iTunes.

Making the Icons

I enjoy doing these speed drawings, showing the process of creating and detailing something like this. So here’s another video for you guys, complete with tea making as tradition dictates.

Download

These things come in both Round and Square versions. You can grab the set over at the downloads section. Hope you enjoy these, i had a lot of fun making them. Take care and keep having fun.

Michael

In the opening monologue of the Tonight show the 23rd of March, Jay Leno talks about having “Spring on his iPhone” in an app where he can see how the weather looks like Outside.

While he can’t say it directly, It’s quite obvious that he’s referring to Outside App, swiping gestures and all. We’ll obviously never know for sure but being mentioned, even by concept, on the Tonight Show is pretty amazing. It marks a milestone in achievements and tells us again that the idea and execution behind Outside was just right. No matter what this leads to, it’s a pad on the back from mainstream media.

Spread some Spring

We totally agree with Jay Leno that it’s ‘perfect’ and everyone should see spring on their iPhone so we’ve created a site to share that message. Head over to Getoutsideonyouriphone.com and check out Jay Leno talking about Outside. Please help spread the word on twitter, let’s get some Spring on those iPhones

Hopefully Spring will come quickly in Copenhagen. Happy Easter everyone.

I’m really psyched to cut the red ribbon on my brand new travel blog called Fly Sleepy. This is a place for me to share messages from the trail, dashes of inspiration and pictures from my camera.

I’m a pretty busy guy. Over the past year i’ve quit my day job, gone freelance, started two companies and worked high and low on expanding my career and generally just involving myself in all the things i love doing. Well, except for one thing.

Privileged Traveler

Ever since i was a little kid i’ve had the privilege of traveling all over the world. With parents in the Airline industry (the data sector, mind you) i’ve slept in Airports and boarded last call flights with chance tickets. I’ve traveled on jump seats and seen more beaches than most people my age.

Why a travel blog?

I wanted a place to share messages from the trail and pictures from my camera and so Fly Sleepy came about. It’s supposed to be a more casual & personal vein of updates than Pixelresort, a way to stay in contact with Family & Friends and the rest of the community when i’m on the road.

So if you’re up for a little more casual stream of updates, i’d love to share my travel experiences with you. Head over to Fly Sleepy, sign up for the RSS feed and get a dash of sunshine.

If you have a travel blog or thoughts on this, please share them in the comments below. I’d love to start reading and sharing more experiences from the road, that way we always have a little excitement in our screen-ridden days. Here’s to more traveling and more sharing.

From a rustic bungalow in Krabi with shabby internet,

Michael Flarup

By popular demand, we’re launching a micro-store where we’ll be selling our limited edition Robocat vinyl stickers! Visit the site and order yours today!

A few weeks back we placed an order with the amazing stickerobot. We had them create a limited set of high quality die cut vinyl stickers with the lovable Robocat on them. After bragging about these amazingly detailed stickers on the interwebs, we received an uproar of requests from people who wanted to get their hands on the stickers!

So we’ve launched a microstore where we’ll be selling these bad boys. We’re selling them in packs of two with a flat-rate worldwide shipping fee included for 14.99 USD. All orders will be personally handled by our very own Sticker Monkey and Aspiring Physicist. He’ll take orders and hand-mail these all around the world, so hop on over to the Robocat Sticker site and get yours today.

As we slide into a new decade what better time is there to take stock of your career and set some goals for the coming year? Here’s a few of my New Year’s Resolutions. I feel they might be quite universal for many graphic designers out there.

Less freelance, more personal projects

Don’t get me wrong, freelance work is an important aspect of any designers career. Other than putting food on the table it provides you with a slew of fresh challenges and a healthy alertness to the industry. It will help you polish your creative skills as you lunge into new projects that you wouldn’t have thought up yourself.

That being said, there comes a point where you need to start setting personal goals and pursue some of your own creative projects. Some designers will go their entire career working for other people and get a kick out of that. I’m not that guy. In the new year i urge anyone with entrepreneurship in them (which is very abundant in this industry) to cut down on the freelancing and focus a percentage of your time on your own projects, your own product.

While this may mean a temporary setback in income, it will go a long way for your career, your sense of self and ultimately the path your career takes in the future.

I’m generally advocating you guys to work less for ‘da man’ and more for yourself. I know a lot of you have aspirations other than pleasing the next client that comes barging into your inbox. Some of you dream of opening a T-shirt store, some of you want to sell stock icons and quite a lot of you want to make iPhone apps. Whatever it is, seek it out more ferociously than you have ever done!

Work for yourself!

Working on your own project is not only a possible way to secure future stable income, it’s also a way to spark your passion – what fueled you to go into this industry in the first place? Slamming the launch button at 5′o’clock in the morning on your 11th cup of espresso feels great! The exhilaration comes from knowing that you just put something into this world that is solely your own idea and execution.

Your own project radiating awesomeness. Might even impress your mother.

Your own project is an excellent showcase of your talent and dedication, it will easily work as an ‘ambassador’ for your skills and might woo future clients or collaborating peers.

People have different ambitions, and while you may not be able to completely throw away your day job, find the hours to work on your own projects however small or big they may be. It will repay itself tenfold.

Blog and Share more

Never has it been more easy to share your world with people. As a design community we have become closer and more aware of eachother through twitter and the expanding blogosphere. Take your time out to share some of your work, share your process or share some knowledge. From maintaining an informative twitter stream to authoring blog posts, make an effort to give more – it will benefit us all and it will grow your own network.

Interact more

Twitter and your blog is not only a one-way communication channel. Make efforts to spark conversations and reply to people. Crowd source as much as you can, it’s never been easier to seek out your peer’s opinions.

You have a network, use it…

Get out more

If you’re an independent designer like me, try and get out more. Shake off the morning robe and meet people out in the wild. Go to one of those trendy coffee shops or cafés – bring your macbook and take a day working from another perspective. Sometimes a new environment will spark new ideas.

Get out of the house, see other people, drink expensive coffee.

Structure your resources

If you’re anything like me you collect everything that sparks interest: Design inspiration, a great font, an odd colorscheme or just a composition that moved you. These libraries of resources and inspiration have a tendency to get cluttered eventually rendering them quite useless. Do some spring cleaning and see if you can structure your resources so that they will actually work for you in 2010. There’s a lot of good programs out there but a good old folder structure might work just as well.

I like the good ol’ folder setup

Do more Collaborative work

It’s 2010 and it’s never been easier to find talented people around you. Reach out and create partnerships. Find someone who’s good at all the things you’re not and bring something new and exciting into the world.

I think we could all get better at some of these things, including myself.

Pictograms are quickly becoming an iconic fad, but they’ve been around since the dawn of time. What are they? What are they good for? Why are they so trendy and should we be worried? All this and more, in what i suspect will be the longest article on icons you’ll read today.

What’s a Pictogram?

A pictogram, or a pictograph is an ideogram that conveys it’s meaning through it’s pictorial resemblance to a physical object. Today we use the term casually for a broad sweep of icons. I personally use it as a reference to the flat-styled, often uni-colored, simplistic portrayal of ideas and objects.

The classic standardized ISO 7001 DOT Pictograms

A history in pictures

While lately popularized by handheld interfaces like the iPhones tab control, Pictograms have never been out of style. Infact, some of the earliest written languages where based on the idea of conveying meaning through simple pictures.

This blog post is not an attempt at a history lesson, but there are some very interesting lines stretching all the way back from the earliest mesopotamian language of Cuneiform and Egyptian Hieroglyphs, through the coats of arms in the middle ages and all the way up to the invention of the printing press. All contributing to the idea of icons and pictograms.

Today we use pictograms in all sorts of situations. Looking for the toilet in the Airport? Or are you following laundry instructions? We interpret any number of pictograms every day.

Pictograms are everywhere around us.

The International Standard

A set of pictograms was defined in the international standard ISO 7001, championed by Roger Cook and Don Shanosky in the seventies with their ‘Department of Transportation’ sanctioned (DOT) pictogram set of fifty universally acknowledged icons. Other known and recognized sets of pictograms include laundry instructions and chemical hazard labels. Many of the well established pictograms are hailed for being universally understandable, crossing language and culture boundaries.

But other than the fact that even people from rural China understands the international symbol for ‘toilet’, what other qualities (and pitfalls) does pictograms hold?

So what are they good for?

Pictograms are in many ways the core of icons. They strive to communicate as clearly as possible by removing details and focusing on the simplicity of the likeness between a physical object and how they are most easily recognized.

This makes pictograms incredibly potent at delivering clear messages as long as the receiver understands the simplified representation. For the average designer, this means that if you’re looking for the most direct route to communicate a known convention – pictograms could be the right tool for the job.

Pictogram-styled icons are all about peeling away layers of details until the simplest recognizable shape remains.

Understanding Context

Pictograms have flourished in the physical world where the context of the message is obvious. Holding your sweater in your hand, the laundry instructions on the inside seems that bit more tangible. That little box with a circle inside crossed out, is fairly easily deciphered as being a warning that you can’t dry tumble this specific clothing item. The box with the circle obviously being a domestic appliance that dries your clothes through centrifugation. See, it’s all about context – the situation you are in helps you interpret the pictograms and their intended meaning. This becomes slightly more fuzzy when taken out of the physical world, which brings us to some of the pitfalls of pictograms.

With Context we can more easily decode the pictograms.

The spawn of a million pictograms

What we need to consider when opting for these simplistic solutions is how well the message will be carried in this style. While the established conventions for pictograms are easily identified in the physical world, the new age of digital conventions are constantly evolving and becoming more numerous. Designers and developers are finding new situations and functionalities where this style of communication is being applied. This basically means that we’ve gone from a few universally understood and recognized pictograms to hundreds of thousands of icons employing the same simple visual vocabulary.

We’re absolutely swimming in these today

In mobile and desktop interfaces as well as corporate branding we see these stylish flat icons reaching for new and fresh ways to illustrate a much wider range of concepts. This isn’t merely confined to the physical representation of objects interacting like many of the older pictograms. This new wave of simplistic icons embraces abstract concepts and multi layered conventions, covering everything from e-commerce to cloud computing. The fact remains that the sheer amount of icons in this style has severely diversified something that used to be very clear and easy to read.

We’ve moved away from the universally understood to much more complex conventions and abstractions.

When to be careful

With all these new and budding pictograms, the landscape has changed. The viewer will need to get familiar with a much wider range of pictograms and flat-styled conventions. This means that unless you’re communicating something within the very obvious digital conventions, you could end up confusing some of your users – especially if you’re trying to communicate something that’s out of the ordinary.

What makes pictograms so powerful is also what makes them so fragile. If you don’t recognize the image being depicted, the convention being communicated or the context it’s being presented in, the icon leaves you very little in terms of contextual hints. All it’s fidelity and details have been shaved away to make it streamlined to deliver a certain message. If the message fails, you’re pretty much screwed.

Why so popular?

Pictograms have seen a surge of popularity in modern interfaces, perhaps partly because our interfaces have grown more advanced and intricate. The simple shapes and subdued colors feel right at home in an interface that might otherwise be filled with content boxes, panes, rows of data and other control elements.

Notice the use of pictograms in modern interfaces. I bet there’s some in your browser right now.

In many ways, pictograms are incredibly easy to work with. You can add them to your existing design without causing too much of a disturbance. Often they are to the point and doesn’t attract attention away from the rest of your design. They certainly cater to the ‘helvetica generation’ of designers that enjoy clean lines and a balanced approach to visual hierarchy.

So what should you take away from this?

It’s not a new trend or a very surprising one. I’m sure one could argue that these icons aren’t even within the confines of ‘pictograms’ any longer, as most of them have moved beyond the universally understood. My point is not to stir debate on the naming conventions. I only ask you to consider the pro’s and con’s when choosing the best vessel for your communication. In some cases higher fidelity icons will do a better job of portraying a more abstract or out-of-the-ordinary convention due to the amount of contextual information build into the detail. Sometimes a clean and neutral pictogram will be the optimal route to deliver a well known message.

During my research i kept bumping into the official ISO 7001 DOT pictogram set. Below i’ve collected the authorized 67 pictograms from the standardized DOT pictogram set. I’ve gathered them in a single illustrator (and svg) file – they are under an open license so anyone can benefit from these. Click the picture below or here to download and use the conventions we all know and love.

If you made it all this way through this long article, why not tweet about it?

My own, very first iPhone app just got on the App store! Outside combines current weather and local forecasts with custom push notifications. It’s reinventing the weather forecast!

Check out outsideapp.com or get it now (♫ itunes link)

Click this image to go to the Outside website

Since early last year i’ve been working with legendary developer @williwu on creating our very own iPhone development studio under the rocking brand of
Robocat. Outside is our first ambitious app, and it’s available now!

As some of you might now, these past 8 months we’ve been hard at work on Outside, a new spin on the weather forecasting app that hopefully will blow your mind. I think you can tell that we’ve had high ambitions from the get-go. There’s some long nights and a lot of caffeine intake involved in the development of what we believe to be the best and most fun to use weather application out there. As of early this morning, Outside finally hit app stores worldwide – and we can’t wait for you to try it out.

Push Notifications

Not only is Outside a pretty weather forecasting app, it has a powerful custom push notification build right into it. You can setup and receive alerts when the temperature drops below or above a certain point – there’s rain notifications for when you need to remember that umbrella, and UV notifications for Sunscreen.

The notifications engine really adds a whole new custom level to the idea of weather forecasting, and we’ve gone to great extends to make the whole experience as smooth and enjoyable as possible.

Outside has an awesome custom notification engine build right in!

Unique Interface

I’ve drawn up a huge collection of weather situations, that all comes to life through the window in Outside. This really makes looking at the forecast or current weather a fun discovery, as you swipe through the misty fogs, snowy days and bright sparkling sunshine.

Alot of care went into making outside visually pleasing and exciting.

Check out the promo video we did, to get an idea of the app in action:

At a later date i’m going to go more in-depth with the whole design process and give you some fun behind-the-scenes looks, but for now just know that Outside is available in the App store. You can read a lot more about it over at outsideapp.com and also swing by robocatapps.com to see our brand new company website.

Thank you!

Your support, comments and anticipation of this app has really motivated us from the early days. Thanks a lot! If you buy Outside, tell a friend or tweet it to your followers. Also remember to rate and review the app as it means a lot to us.