Pixelresort.comhttp://www.pixelresort.com
Design By Michael FlarupMon, 01 Sep 2014 22:33:12 +0000en-UShourly1http://wordpress.org/?v=3.9.7Designing For Funhttp://www.pixelresort.com/blog/designing-for-fun/
http://www.pixelresort.com/blog/designing-for-fun/#commentsMon, 01 Sep 2014 22:11:15 +0000http://www.pixelresort.com/?p=853Continue reading →]]>Early 2014 I was contacted by Drew Wilson. He asked me if I wanted to come to Valio Con in San Diego to give a presentation. I talked about a topic that’s very dear to me; Fun.

Early 2014 I was contacted by Drew Wilson. He asked me if I wanted to come to Valio Con in San Diego to give a presentation. What an honor I thought, and looked at my very pregnant fiancé. Planning anything in the immediate future seemed risky, but we both agreed that it was simply too much fun to pass up.

Fast forward 5 months and I’m 4 months into being a parent, on a plane bound for San Diego. Short on sleep, I was enjoying the guilty freedom of having time for myself (spoiler: having babies is tough on free time). In the airport I was greeted by a driver with my name on a sign. Never tried that before.

I spoke as the last speaker on the first day of the conference and I talked about a topic that’s very dear to me; Fun. The presentation was gorgeously shot from multiple angles and I have finally managed to edit it down to an abridged 35 minute edition. View it below or directly on my Vimeo account.

So what is the talk about?

Looking back over my career it’s clear to me that fun has been a guiding pillar in many of the decisions I’ve made. In my talk I address a concern of mine that design, as an industry, isn’t only maturing but also becoming more serious. You don’t have to listen to many skeumorphic vs flat discussions to realize that many designers have become a lot more serious. We’re very concerned with trends and discussions about right and wrong and I fear that we might slowly be loosing some of the fun. So in my talk I try to put some fun on the table by telling 3 stories about three products I’ve helped create. A journey that spans instant coffee, embarrassing behind the scenes footage, a Jay Leno opening monologue, millions of digital thermometers and an epic Kickstarter adventure.

I end up by giving my take on how you can start to work with ‘fun’ as a concept when building products and how you make sure sure that you work on more fun projects.

It’s not form follows function after all,
it’s form follows fun.

Here’s a couple of screenshot from the presentation.

I’ve been doing more public speaking over the last year and I hope to continue the trend. I’ve always enjoyed telling stories and I believe that most of my creative work is an expression of that. It’s great to actually get out there and communicate these things in a more intimate and sincere way. I had a blast at Valio Con and I hope to return next year.

]]>http://www.pixelresort.com/blog/designing-for-fun/feed/0An interview about how it all started, design and business.http://www.pixelresort.com/blog/an-interview-about-how-it-all-started-design-and-business/
http://www.pixelresort.com/blog/an-interview-about-how-it-all-started-design-and-business/#commentsTue, 12 Nov 2013 23:27:14 +0000http://www.pixelresort.com/?p=837Continue reading →]]>I don’t usually post interviews here, well at least not unless theres an ulterior motive. However, Jeremy Olsen caught me while i was in San Francisco this summer and asked me if I wanted to do a video interview for his upcoming book. He has been so kind to make it publicly available, so I wanted to share it with you guys.

I don’t usually post interviews here, well at least not unless theres an ulterior motive. However, Jeremy Olsen caught me while i was in San Francisco this summer and asked me if I wanted to do a video interview for his upcoming book. He has been so kind to make it publicly available, so I wanted to share it with you guys.

Jeremy and Nathan just launched their newly revised edition of the App Design Handbook. As an addition to the book they made 9 video interviews with people who are all involved with apps and I had the humble pleasure of being part of that group of distinguished gentlemen.

As a teaser to the book, they decided to make my interview freely available! The interview is just shy of 40 minutes and we talk about how I got started with Robocat, what good app design is and what our design process looks like. This was recorded right after iOS7 was announced, so we obviously also touch on that sensitive subject. We discuss our launch rituals and some of our successes and failures. Why email is so important and how to get the media on your side. We also get into business and talk advice for people who are just starting out in the industry. All in all, it’s a casual talk about a whole range of topics that could probably each have taken up their own hour.

“You’re building an experience. Sometimes we get a little caught up in ways to do things ‘right’. We should be more focused on making things fun. “

If you sit through it all, I’d love to hear what you thought. Tweet me at @flarup and be sure to check out Jeremy & Nathan’s book, from what I’m hearing it’s doing very well.

As a bit of background bonus info, the video was recorded right after me and a few of the other Robocat guys had completed the last leg of our journey up the gold coast. We had just dropped off our rental in downtown San Francisco when I stormed up to meet Jeremy for the interview. The picture below was taken a few hours before.

]]>http://www.pixelresort.com/blog/an-interview-about-how-it-all-started-design-and-business/feed/0Start making iOS 7 Icons with the App Icon Template 3.0http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/
http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/#commentsThu, 20 Jun 2013 21:58:54 +0000http://www.pixelresort.com/?p=769Continue reading →]]>Not sure if you guys noticed, but Apple introduced a minor update to the look and feel of their upcoming mobile operating system last week. No? Well all controversy aside it looks like we’ve got a big job ahead of us, and obviously we need to have our tools in order! That’s why I’m glad to introduce the 3rd version of my App Icon Template, optimized and ready for iOS 7.

Not sure if you guys noticed, but Apple introduced a minor update to the look and feel of their upcoming mobile operating system last week. No? Well all controversy aside it looks like we’ve got a big job ahead of us, and obviously we need to have our tools in order! That’s why I’m glad to introduce the 3rd version of my App Icon Template, optimized and ready for iOS 7.

You can head right over to appicontemplate.com and download this thing if you’re impatient. If you want to know more about what’s new, superellipses and golden ratios, read on.

So whats new?

Other than a very different look, iOS 7 has some important icon changes in store for us. Here’s what’s new in this version:

★ Icons on the iPhone home screen have received a slight increase in size up from 114px and 57px to 120 px and 60px respectively
★ A new golden ratio grid has been introduced. (but so far people, including apple, seem to be taking it very casually)
★ A very bright new color scheme is included in the PSD
★ New iOS 7 app store and home screen preview generators
★ More flat
★ A new curved outline… Oh the elusive corner radius.

The hunt for the perfect curve

Arguably the largest change to our everyday working environment is the new icon corner radius. Gone is the old radii that we’ve all designed for in the past few years and here to stay is an entirely new and more complicated shape; The superellipse or, more precisely (and way cuter), the Squircle. Since the reveal there’s already been a dozen templates or so that have tried their hand at the new form and I have yet to see an exact representation. This is one of those things that seem very simple, but is actually quite hard to get exact. (until someone cracks it and we all laugh at how “easy” it was)

The formula for the superellipse as proposed by Marc Edwards

The last few days I’ve been collaborating and discussing this very topic with some very talented people on twitter. Marc Edwards, Photoshop guru, has put forward the above formula as the exact mathematical proportions of the new shape. Unfortunately we’ve been less than successful at converting that formula into an exact and usable vector shape in illustrator and photoshop. This is partly because the fidelity of the curve isn’t good enough when converted into a working vector file. As you can tell from the below experiments the sheer amount of points is less than ideal and the curve simply doesn’t seem to hit the exact outline of the iOS 7 icons when superimposed.

A lot of people have been trying to crack this over the past week or so, from the mundane attempts using round rectangles to the more adventurous attempts at hand editing an SVG file. To my knowledge, the exact outline used in iOS 7 icons haven’t been reproduced yet. We’ve had some very very close approximations, but not an *exact* outline.

Heres a selection of the templates that currently exists out there, look at that rainbow of variation. None of us have the right answer.

The golden ratio

A few people have been working on reverse engineering the new icon grid that was introduced with iOS 7 last week in the hopes that it would unveil some secrets. This grid is (supposedly) build on the golden ratio and people like Alexander Ustinov have put forward some of the more exact outlines based on this theory. After having tried my hand at every possible method out there I managed to build my own golden ratio grid that have yielded the most exact outline I’ve come across so far. This is the shape I’ve used for the App Icon Template 3.0.

The golden ratio grid that I’m using for my shape

Now it’s important to say right up front, that this shape is an approximation. As you can tell from the below gif it’s a close fit, but no cigar. Everybody seem to have build different grid systems and ended up with variations on the curve. On top of that, our only way of measuring correctness is by superimposing our meticulously calculated shapes on top of screenshots and png masks found in iOS 7 to see where the shapes overlap. Not exactly the best way of verifying!

It’s silly to think that something this simple (and vital for our design efforts) can be this hard to get exactly right. However, I feel the above shape is ‘close enough’ to be usable. If, or rather when, someone cracks this with an exact vector outline, I’ll obviously update the template. It might very well be that there’s a simple solution that we’ve just not found yet.

Graphic supplied by @marcedwards

Some of you are probably asking why all of this is important, seeing as Apple is the one rounding off the icons in the end. Well, having a solid and exact tool for creating icons have a very real world impact on what sort of designs we can create. If we have the exact rounded corner mask we’ll be able to create designs that utilize the edges of the icon. Essentially the more precise our guides are, the more control we have over the final result. Until the mathematically exact shape shows up, I hope you’ll find that the work put into this brings you close enough.

Head on over to appicontemplate.com to download the latest version of the app icon template. And be sure to let me know if you find any errors or have any suggestions for improvements. As always, have fun making icons!

UPDATE: The template has been updated to 3.1 with the new iPad sizes (76 & 152) and now uses Marc Edwards outline.

]]>http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/feed/0The Interview about flat design that wasn’t cool enough for the mediahttp://www.pixelresort.com/blog/the-interview-about-flat-design-that-wasnt-cool-enough-for-the-media/
http://www.pixelresort.com/blog/the-interview-about-flat-design-that-wasnt-cool-enough-for-the-media/#commentsTue, 04 Jun 2013 23:55:02 +0000http://www.pixelresort.com/?p=743Continue reading →]]>I think most designers these days are sick and tired of the term ‘Flat’ design, and yet it seems like everybody is talking about it. So when I was contacted by a journalist from Wired.com a few weeks back to give an interview on the subject I was a little hesitant. I was on vacation and this journalist needed the answers to her questions within 48 hours.

I think most designers these days are sick and tired of the term ‘Flat’ design, and yet it seems like everybody is talking about it. So when I was contacted by a journalist from Wired.com a few weeks back to give an interview on the subject I was a little hesitant. I was on vacation and this journalist needed the answers to her questions within 48 hours.

But I thought, hey, maybe I might be able to change the perception of the term or at least give a designers point of view. So I spend a few hours answering her questions to the best of my ability. Unfortunately I never heard back from her.

A few days later the article she was working on went live on Wired.com. It was called “If Your OS Isn’t Flat Yet, It’s in for a Radical Redesign”. It had none of my answers in them. Now that’s fine, I know how it goes and sometimes a piece might take a different direction or the editor will have the final say. However I was sad to see that the angle was the same as every other article I’ve read on the subject from mainstream tech media. This idea of flat design being the natural evolution of interfaces, and therefore superior. The very reason why I did the interview was to combat this one-sided notion.

I see now why my answers to the interview wasn’t compatible with the story Wired was trying to tell. I thought it might be interesting to post my interview here, if for no other reason than to show you what the media are *not* interested in pursuing. Below is the unedited interview:

Also designed Thermo which could be considered a very ‘Themed’ design

In your words as a designer, what is flat design?

Flat design has become a popular way to describe designs that strip away details and embellishments in favor of a cleaner 2-dimensional look.

Is flat design “making a comeback” like everyone has been saying? Why now? Or, has it be around all along?

Flat design has been around for a long time and can be tracked back to early printmaking and through the “Swiss Style” design aesthetics of people like Paul Rand. But I think one of the big reasons why it’s becoming increasingly popular now, is because of the amount and complexity of information we need to display and digest. With more advanced interfaces and a larger volume of content comes the desire to “clean up” the interface. There’s several build-in advantages to this style that web designers have utilized for ages, which is (among other things) easier responsive implementation and a more multi platform friendly construction.

From your perspective, does flat design equate minimalism?

There’s certainly something ‘minimalistic’ about stripping away details, but I don’t believe that flat design inherently equates minimalism. There’s plenty of cluttered ‘flat’ interfaces and people need to be wary that this style isn’t mistaken for a silver bullet.

Why do you think companies like Google have started switching to flat design OS/UI?

The flat design ties in wonderfully with some of the trends currently going on. Increasingly advanced interfaces, a larger volume of content, the need for responsiveness and multi platform support. All of this driven by the touch-based mobile devices makes it a solid direction for a company like google.

What does a flat UI/OS design need to be successful?

In my opinion a great flat design is a clear visual hierarchy with a minimum amount of clutter. In mobile interfaces it’s important that a flat design understands the restrictions it’s working under and compensates correctly. One example is that with no “depth” available, contrast between elements, especially controls, needs to be given the right amount of attention and it becomes more of a challenge to communicate what you can interact with and what you can’t.

Will the battle between skeuomorphism and flat design ever end? Does it need to end, or should the struggle continue because it forces people to reinvent and produce better designs? And as a designer, are you sick of the battle?

There probably couldn’t be a more misconstrued word in the current design terminology than ‘skeuomorphism’. I could write a long rant about the so called ‘battle’ but better writers than me have already done so.

This idea that skeuomorphism is the opposite of flat design has chalked up the lines in this bizarre and (in my opinion) completely misunderstood struggle. It has somehow slipped into the general tech consciousness that any sort of theme, skin or use of texture, depth or lighting in an interface should be considered ‘skeuomorphism’. The delusion is furthered by believing that the absence of these things should be considered flat, creating this odd one dimensional terminology scale where something is either skeu (as the cool kids call it) or flat.

I think I speak for a sizable amount of the design community when I say that we’re all a bit tired of this debate. One isn’t better than the other, no more than a hammer is better than a screwdriver. A flat minimalistic design, and a rich ‘themed’ design are both tools in a designers toolbox. They are different approaches and they each come with their own pros and cons. Both can work fantastically in the right context. We need to stop thinking about these styles as an evolution of one another and start thinking about what gives the best experience for the user in the specific use case we’re creating. Design would be a very boring discipline if that answer was the same every time.

Does flat design create apps/UIs/Oss that are inherently easier to understand (because they tend to not have as many embellishments as other designs)?

I don’t think so. One of the things you loose when you strip away details from a design is context. Most of the cutting edge flat design iOS apps like Clear or Haze needs to rely on welcome tutorials that describe how to use the app. This isn’t necessarily a bad thing, and one could argue that it’s simply the cost of trying out something new – but it does highlight the challenge that designers face when designing these kinds of experiences. Removing details does not necessarily imply that something is easier to understand.

What would you like to see from the new flat designed UIs/Oss? What could make flat design better?

I’m not sure there’s one thing that would make flat design ‘better’. It is in itself a direction taken to the extreme.
I’m absolutely sure, however, that we’ll be seeing variations that will make the existing terminology outdated. What are we going to call a design that places itself in between flat and ‘themed’? A subtle design? Hopefully we’ll be able to end this silly dichotomy of interface design and appreciate the various approaches for their strengths and weaknesses.

How is the switch to flat design affecting, or how will it affect, UI/OS design in the future?

I think partly what we’re seeing now is a counter-reaction to the very ‘themed’ early days of mobile interface design. There’s certainly a rush to clean up and minimize the footprint of the interface. That being said, I don’t see flat design as the end-all direction. Design is a pendulum that has been swinging to the tune of society for a long time and I hope that we’ll continue to explore new ways of delighting users.

There you have it. I tried contacting the journalist a few times, but still haven’t heard back, so rather than letting it go to waste I figured I might as well post it here. The media doesn’t seem to be interested in this angle, and I completely understand why: Reporting on a trend of the evolved interface is an appealing story and using simplified terminology (flat vs. skeu) makes it easy to understand – it’s just that I don’t know a lot of designers that feel like it’s the world they work in. Anyways, maybe this will just be another article in the sea of flat-design or maybe it’ll inspire some conversation. Let me know how you feel about all this on twitter @flarup.

]]>http://www.pixelresort.com/blog/the-interview-about-flat-design-that-wasnt-cool-enough-for-the-media/feed/0Portfolio Updatehttp://www.pixelresort.com/blog/portfolio-update/
http://www.pixelresort.com/blog/portfolio-update/#commentsFri, 04 Jan 2013 00:17:11 +0000http://www.pixelresort.com/?p=737Continue reading →]]>If you’d only watched the Pixelresort website this past year, you’d be inclined to think that 2012 had been a slow year. Nothing could be further from the truth. Infact, 2012 was so exciting that i completely neglected to create content, or more importantly, update the portfolio. Let’s rectify that.

If you’d only watched the Pixelresort website this past year, you’d be inclined to think that 2012 was a slow year. Nothing could be further from the truth. Infact, 2012 was so exciting that i completely neglected to create content, or more importantly, update the portfolio. Let’s rectify that.

So i sat down today and did what any industrious designer ought to do from time to time; updated my portfolio. If you take a glance through the portfolio section I’m sure you’ll find a couple of new things in there. It’s by no means an extensive library of all my work, and it probably never will be. I’ve removed a few things, brushed up a couple of outdated items and added in a good handful of projects that I’ve worked on in 2012. All in all i believe the new portfolio now better illustrates a slice of my current work and the direction i want to take in 2013.

Places like dribbble gives a pretty good insight into current projects I’m working on, and it’s easy to think that those sites can replace the notion of a seperate portfolio. I do however think, that it’s important to keep a place where you control the entire experience and where you get to present your work in an environment of your construction. There’s something about a well crafted portfolio that, to a much larger extent, allows you to present a consistent style – imbuing your viewers with a better understanding of your craft.

No, 2012 has been all but slow. Hopefully 2013 will offer just as many interesting projects and challenges, and with a newly updated portfolio i feel more ready than ever to take it on.

]]>http://www.pixelresort.com/blog/portfolio-update/feed/0New App Icon Templatehttp://www.pixelresort.com/blog/new-app-icon-template/
http://www.pixelresort.com/blog/new-app-icon-template/#commentsThu, 22 Mar 2012 21:40:40 +0000http://www.pixelresort.com/?p=723Continue reading →]]>Ever since the new iPad launch people have been asking me to update my aging smart object based app icon template. They want the new Retina sizes they say. Well here’s the new version 2.0 with more than they asked for. It even got it’s own little website.

Ever since the new iPad launch people have been asking me to update my aging smart object based app icon template. They want the new Retina sizes they say. Well here’s the new version 2.0 with more than they asked for. It even got it’s own little website.

For people unfamiliar with my original template, this is what it does in bullet point format:

★ Quickly render all sizes by editing a single Smart Object
★ Includes vector textures that you can build on
★ Exporting made easy with the bundled actions
★ Shows you a mockup of how the icon will look in the store and on your home screen

If you still have questions, I urge you to read my article accompanying the original app icon template, as it explains all of this in more detail – or just head over to appicontemplate.com where I’ve included a short ‘How-to’ and FAQ.

A new sleeker layout, easier to understand, easier to work with.

Like with my old template, a raised finger of caution for those who feel tempted to automate the entire process. This resource makes it easy to quickly render a concept across all the various sizes, and while i’ve spend hours on getting it as precise as possible, you probably want to customize the smaller sizes yourself to get that pixel perfection we’re always looking for. There’s a couple of things that go on ‘behind the scenes’ like a masked sharpening of the smaller sizes. This might not be a good idea for every design. It does make your average icon slightly more crisp, but can also breed some antialiasing issues – if you find yourself having issues, just switch off the smart filters for the affected icons.

A group for app icons

I thought it would be fun to create a group with shots of app icons made with the template – if enough people chip in, we could have a pool of inspiring images, heck we could even print a book one day. So if you’ve used this template please don’t be shy and add your pictures to this flickr group.

Add your icons to this flickr group!

Go forth and kick ass

So head over to appicontemplate.com and get the updated app icon template. Hopefully it’ll make your life drafting and rendering icons a little easier.

]]>http://www.pixelresort.com/blog/new-app-icon-template/feed/0Prints for Salehttp://www.pixelresort.com/blog/printsforsale/
http://www.pixelresort.com/blog/printsforsale/#commentsThu, 23 Feb 2012 16:03:36 +0000http://www.pixelresort.com/?p=704Continue reading →]]>A few weeks back i made a poster for my office based on the classic WW2-propaganda-phrase-turned-meme “Keep Calm & Carry On“. I’ve really been enjoying it and i thought that maybe someone else would too – so i’ve opened up a small print shop.

A few weeks back i made a poster for my office based on the classic WW2-propaganda-phrase-turned-meme “Keep Calm & Carry On”. I’ve really been enjoying it and i thought that maybe someone else would too – so i’ve opened up a small print shop.

Marble of Doom, Beachball, Pizza Wheel, Rainbow Ball of Death, now you can hang it on your wall

Print is not my strong suit, but that’s what makes it exciting. There’s something about the tangibility of a real physical product that’s so far removed from the sort of stuff most of us ‘screen designers’ do everyday. That makes this a wonderfully unexplored territory, and one that comes with the spoils of actually getting a real life product that you can hang on your wall.

Shortly after putting the Beachball variant of the Keep Calm poster up for sale, i had a few iOS developers ask me if i could do an Xcode themed version. So i set out to recreate my own version of the Xcode icon and a week later i had two posters in the tiny store.

Developers demanded their own version of the poster

Society6 has made it super easy for people like me to open up a store and sell actual physical products, that’s really empowering for a single creative who might not have time to take care of the logistics of printing and shipping these items worldwide.

A close up shot of my interpretation of the Xcode icon

Lately i’ve been buying designer prints left and right, there’s simply so much great art out there by reallytalentedpeople. I’m frankly humbled that someone might have something I created hanging on their wall.

]]>http://www.pixelresort.com/blog/printsforsale/feed/0Welcome to Pixelresort V4http://www.pixelresort.com/blog/welcome-to-pixelresort-v4/
http://www.pixelresort.com/blog/welcome-to-pixelresort-v4/#commentsThu, 21 Jul 2011 15:34:52 +0000http://www.pixelresort.com/?p=695Continue reading →]]>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.

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

]]>http://www.pixelresort.com/blog/welcome-to-pixelresort-v4/feed/0The Safari icon Sethttp://www.pixelresort.com/blog/the-safari-icon-set/
http://www.pixelresort.com/blog/the-safari-icon-set/#commentsThu, 18 Nov 2010 01:54:34 +0000http://pixelresort.com/?p=513Continue reading →]]>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.

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!

]]>http://www.pixelresort.com/blog/the-safari-icon-set/feed/55App Icon Templatehttp://www.pixelresort.com/blog/app-icon-template/
http://www.pixelresort.com/blog/app-icon-template/#commentsThu, 21 Oct 2010 16:43:55 +0000http://pixelresort.com/?p=502Continue reading →]]>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.

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.

Notice: My App Icon Template has been updated since i wrote this article. Most of what’s described here is still relevant for the new template, but you could also just go right ahead and read about that here.

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. 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

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.

NOTICE: This template has been updated!

Download the new version 2.0 from appicontemplate.com. Most of this article is still relevant, just know that the new template is based on the same idea but with more awesomeness.

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