Background

The premise of the Face-Jack Me app isn’t an original one – I’m sure the client won’t mind me saying that, and for that reason at the beginning of the project I had some doubts about it. Essentially you take a picture of yourself, or someone else, that photo is then broken up into 3 segments, and you swipe your finger left and right to shuffle through different face combinations. There are sample faces that come with the app, or you can take more photos of your friends or family and combine your face with theirs for some really quite funny outcomes.

Whilst doing some research it was clear that this idea had been done before. From looking at and playing around with some similar apps, I felt that the slick look and feel and simplistic ease of use of these existing offerings was missing and due to that there was a definite gap that this app could fill if done well. In short to make this iPhone app a success it had to be easier to use and better looking.

Planning / Wireframing

As always the first stage consisted of wireframing the main screens of the application. This was so important because it allowed myself, the client and also the developer (Kriss Bennett of Createful) to spot any shortcomings before we’d got to the design stage and beyond. It also allowed me to come up with a ‘process’ for ‘Face-Jacking’ a photo that I felt was much easier than how any of the other apps did it, with buttons in easy to notice places, ways to quickly take a step back in the photo capture/editing process, and a way of making the app social too.

Here are a few screenshots of the wireframes that were presented to the client:

Some key features were the ability to save your ordinary photos into one gallery and your ‘Face-Jacked’ photos into another gallery. We also wanted to let people share the funny faces they’d created on Twitter or Facebook.

The main thing though was coming up with a really easy to use process for taking and modifying a photo, and also making it immediately obvious how to get started as soon as the app loaded up. This process turned out to be refined and modified during the development as it became clear that we hadn’t quite accounted for everything. Kriss (the developer) released several test versions of the app on TestFlight to allow us to test it and see what was missing.

Icon Design

The icon design was something that I was a little nervous about initially. Usually for an iPhone app icon I’ll try and create a shape or simple illustration that gets across the premise of the app. See the Sea Urchin app icon I created. Here though the client also wanted to see a version using photos of faces. Having looked at a few other apps that used photos in their icons for inspiration, honestly I thought they looked like they’d been thrown together in five minutes.

With that in mind I set about creating some ideas:

The photo icon was starting to look good and the client really liked it. I wanted to combine several faces to get across what the app does and stagger them to show the user they’re adjustable. I then combined this with a simple ‘FJ’ combined to create something that I and the client really loved. Here’s the finished icon.

The App User Interface Design

The client had initially requested a red and black colour scheme, but after some experimentation during the icon design, I thought a blue would work well. Usually red and blue would be a colour combination I’d steer clear of, but somehow it works here. It feels fun and vibrant. The ‘feel’ from the icon needed to follow through into the design of the app as a whole.

The homescreen of the app had to be simple and just let the user get started straight away. I wanted the Face-Jack button to be clearly ‘pressable’ and also point the user right to the button with some kind of visual cue. It had to be really obvious how to get started.

From here the photo capture/editing process had to be designed. It had changed a little from the initial wireframe, and even during the development Kriss and I refined the process a little adding and taking away buttons to make sure the whole process was as easy to carry out as possible. We also wanted to keep the branding strong when a user plays around adjusting the segments, so we added a frame to the photo that included the Face-Jack Me logo.

Above you can also see the gallery where you can save your creations, and also some of the other screens.

Overall

The client was very happy with the finished outcome and so were myself and Kriss. We think the app is well worth 69p, so go over to iTunes and download a copy - it’s had some great reviews already. Honestly its really funny to take some pictures of your mates down the pub and start mixing them together.

Creating a great design is only part of a successful web design project. Once a site has launched it’s essential to install analytics so you can start to see how visitors are interacting with the website, and if you’re even getting the number of visits you or your client hoped for in the first place.

Having produced lots of designs for a leading conversion rate optimisation company, I’ve got a pretty good understanding of where to place calls to action and what to include in a design to give visitors confidence and trust to buy your product (if you’re selling something), or contact you regarding a service if your site is a lead generation tool. Sometimes though its difficult to predetermine how visitors are going to use your website. Your visitors are human and we’re all different after all. Out of 10 people to visit your site you can bet that 2 or 3 are going to pose a question you didn’t see coming if you sat next to them whilst they used it, or totally miss the phone number in the sidebar of the site that you thought was so bold it was going to slap them round the face!

User testing a prototype of your clients website is the best way to go to ensure that you cover those points listed above (and of course many more), but lets face it, not every client has the budget/time for their designer to produce a full on prototype of their site before designing and building it for real.

The next best step – and one that I always undertake – is to wireframe the site. Ideally if you have access to your client’s customers, then show those wireframes on paper to them – take their feedback on board and make changes based on what they say. In an ideal world it should be an agile process – quick iterations and changes based on feedback provided by the client’s users or people from the same demographic. However, even if you or your designer has gone to all those lengths you can’t sit back and leave you’re site. There are always improvements to be made once it’s out there.

One bit of kit I’ve been installing on my client’s websites of late is CrazyEgg. Its a web app that allows you to see an overlay of where people are clicking – literally anywhere on the site, even if its not a link – and you’ll be suprised to find some people clicking things that you think are obviously not links. There is also a scrollmap which shows how far people are scrolling down the page, which is particularly handy if you’ve got a long page with some calls to action or maybe a form further down the page.

There’s a few more useful features too, but even armed with the simple overlay its easy to make design improvements and minor modifications to a website to improve its success. Below you can see what the scrollmap looks like.

Take a site I’m working on at the moment. It launched a while back and its not quite getting the traffic that my client hoped for. We’re just starting an on-page SEO campaign to improve that, but out of interest I installed CrazyEgg on the homepage of their site to see how the visitors they were getting were interacting with the site. The homepage is literally where all of their visitors are landing from Google.

Now the homepage isn’t your typical homepage, in that there isn’t a main navigation as such – the client didn’t want that. There are just 3 logos to access the different divisions to their business, above that the logo and strapline and then under the 3 logos links to special offers and bookings. Once you get into the three main areas then the site becomes more typical and a main navigation bar appears.

What CrazyEgg revealed was that actually visitors didn’t seem interested in clicking to ‘enter’ the various divisions of the clients site, or seeing the special offers right away, they just wanted to read about my clients business and get their contact details. Those links were only accessible in the footer on the homepage. CrazyEgg showed me exactly the number of people clicking these links and proved that my initial concerns about excluding these links prominently on the homepage had been justified.

Based on that data I have been able to make suggestions to my client about how we can go about making some minor changes to make that information more easily accessible for their visitors. I’m literally about to make these changes in the next week or so, and I’m really excited to measure these changes to see if they out perform the previous version of the site.

So, thats a little insight into the final step in my 4 step process – Plan, Design, Build, Manage. Managing a completed site and improving the way it works is an essential part of the service I offer, but something I’m not sure ever web designer thinks about.

If you’re reading this and not a client of mine, then please feel free to get in touch and I’ll be happy to help you get started improving your website based on actual data of how your visitors are interacting with your website.

ATTENTION: This position has now been filled. Thank you for your interest.

About Authentic Style

Authentic Style is the web design and development company of freelancer Will Smith. Based in office space located in Shaftesbury, Dorset, Will has been freelancing successfully for 3 years and has built a reputation for creating beautifully designed websites, iPhone apps and email newsletter for his clients.

Prior to that Will worked at several agencies and has 7 years experience in the industry, having produced design work for clients such as Vodafone, Google, 888 and AOL as well as smaller businesses and start-up companies from London to as far away as Tokyo, and also many of the places in between. 

Responsibilities

As the first member of the Authentic Style design team, you will be expected to produce original web design concepts for current and new clients using Adobe Photoshop. You will also be responsible for turning these design concepts into fully functioning websites, built using semantic HTML5/CSS3 to W3C standards. You will also be responsible for producing iPhone application designs for new and existing clients.

You will be required to work enthusiastically with existing and new clients alike, and encouraged to have first hand contact with them, participating in meetings and phone calls.

You’ll be someone who enjoys managing their own time, is passionate about design for the web and iPhone, who is looking for an opportunity to join a very small company on the rise and is able to commute to an office located in Shaftesbury, Dorset UK.

Essential Skills / Traits:

• Designing website concepts in Adobe Photoshop
• Coding these designs using HTML5/CSS3 that is valid and semantic.
• Experience using WordPress to build content managed websites.
• Willingness to keep up to date with the latest goings on – reading blogs, articles etc
• The ability to manage your own time and prioritise.
• Being able to cost up jobs from briefs (written or verbal) from a client.
• Confidence talking to clients over the phone and in face to face meetings.
• Most of all – raw design talent and a passion to learn.

Nice to haves…

• Using jQuery to enrich user experience
• Experience working with PHP.
• Print design experience using Adobe InDesign
• Experience designing for iPhone.
• Knowledge of mobile web design/dev best practises
• Email Newsletter design experience.

Salary: Negotiable based on experience.

Perks

• A new iMac to work on.
• An office Spotify account for inspirational tunes whilst working
• A relaxed and friendly working environment with no strict dress code.
• The chance to potentially work on some in house web design / iPhone app projects as well as client work

Want to Apply?

Great! Please send an email to will[at]authenticstyle.co.uk, with examples of your work and a link to your online portfolio. I look forward to hearing from you!

Nannies Like Us (NLU) contacted me to design and develop a simple static website that would enable them to start taking inquires and help generate some new business for them. Here’s a quick snapshot of the homepage (click the image to visit the site)

Starting out with a meeting…

Initially we started with a meeting and spent some time discussing what pages the site should have and what kind of content would be displayed on these pages. Everything needed to be kept pretty simple to keep within the clients budget, but I wanted to try and add a few touches that gave a slick, professional look to the site, while at the same time having a slightly playful feel as after all this site was about nannies looking after and caring for children.

Simple Logo

Before I was able to start wireframing the homepage of the site we had a slight set back as the original name for the company had been taken by another company who had seemingly cropped up over night. This mean’t a new logo needed to be created – just something simple and colourful. My client sent me over a sketch of a typographic logo arranged in a circle, which I then recreated and tidied up in Illustrator. It was nothing groundbreaking in terms of design (I’m sure they won’t mind me saying that!), but we all felt it was playful in colour and would work well on the website and in print.

I think its important to understand that not all companies/businesses need to spend a fortune on branding, and although usually I like to spend slightly over a day producing a variety of logo concepts and then more time developing those further, that isn’t necessarily the right solution for everyone. Sometimes something much more straight forward will fulfill the client’s needs.

Wireframes

Once the logo was finalised I quickly moved on to producing a wireframe for the homepage and internal pages of the site. As the logo was circular I saw this as a perfect opportunity to place the logo in the middle of the page and have the navigation options arranged either side of it. My client immediately liked the idea and signed off the wireframes with next to no amendments.

During our meeting I’d determined that NLU offered a free one hour consultation – a pretty good selling point I thought. With that in mind I wanted to include this on all the pages of the site.

The main purpose of the site was for people to get in touch so we needed the contact details to be easily accessible. The only issue was that with the logo being positioned in the centre with the navigation options either side, a telephone number above this (the typical place for these details to be found, as opposed to being listed on a contact page) needed to be balanced out equally with something else the other side. That didn’t quite work, so I opted for a phone icon positioned flush to the top of the browser window, that when clicked would slide down to reveal the contact details.

NLU were also going to rely on social media to find candidates for jobs so it was essential to include Facebook and Twitter links on the homepage of the site.

Design

Here’s a quick look at the design of some of the elements mentioned above.

Below is the idea for the logo and navigation layout, along with the telephone icon that when clicked would slide down to reveal the contact details.

Below you can see the design for the “What We Offer” and “Free Consultation” boxes on the homepage. I decided to make the headers have a slightly slanted top edge to further reinforce the subtle child like nature of the site. I was sure to add the “Free Consultation” box to the internal pages of the site too.

Here’s a partial look at one of the internal pages. I wanted to frame the main body content on white and have the peach coloured background fill the entire page.

Overall the client was very happy with the look and feel of the site. They showed it around and the general consensus was very good.

Development

The site was built using HTML5 and some subtle CSS3 enhancements.

If your browser allows you’ll notice the main navigation links fade down when hovered over with the mouse. Here’s the code (highlighted in bold) that does that for each link;

li.nannies a {
text-indent: -3000em;
background:url(../images/nav/nannies.png) no-repeat left top;
width: 67px;
height: 21px;
display: block;
overflow: hidden;
float:left;
margin-left: 35px;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

I also used the jQuery bgFade plugin to create a nice fade effect on the logo and telephone icons when you hover over them. All pretty subtle things but details that I think are really important enhancements to add to a website.

Summary & Client’s Comments

My client was really pleased with the work and I believe the site has been getting a fair amount of visits already. The next step is going to be to start on an SEO campaign to try and boost the sites rankings for a select number of key phrases.

It all looks great Will. Thank you. I love the colours and the layout.

What HTML Email Designer Offers

I wanted to create a website geared specifically towards offering HTML email newsletter design and development services, with the ability for clients to easily be able to manage their own newsletter content each month, and also send out campaigns with complete ease.

Email marketing is a great way for clients to keep contact with existing customers and also promote special offers and latest news, and I still feel that too many small businesses are passing up a great opportunity here. So that’s why I decided to create HTML Email Designer. A place for small businesses to start out on the road of email marketing at (hopefully) quite affordable prices.

The services I’ll offer are pretty simple

1. I design an email newsletter for you, provide you with the PSD and you develop it. Perfect for developers who need a bit of design flair or companies who have an in-house development team.
2. I develop your newsletter based on a design you provide. Perfect for a busy designer who doesn’t want to waste time testing their design in Hotmail, Outlook etc.
3. The complete package – I design, develop and integrate an HTML email newsletter with Campaign Monitor or MailChimp allowing you to manage your newsletters content, access some great analytics and send out your campaign each month without the hassle of having to pay a designer/developer to do so for you.

Campaign Monitor & MailChimp

Both these solutions in my opinion are fantastic for sending out email newsletters. They let clients update the content of their newsletter with ease, and also provide some very interesting statistics enabling you to see how many people opened the email, what links they clicked and much more. There are also some cool ways to integrate social media into your campaigns these days. In terms of developing newsletters for each platform, yes there are some differences, but I believe offering both as options is the best way to go as each have good and bad points.

The decision to use Campaign Monitor or MailChimp for a certain project will definitely depend on the clients needs and also the frequency with which they intend to send out their campaigns as the pricing does vary with both.

Thoughts behind the HTML Email Designer design

Initially I set out designing a site that was much more in depth and I even started developing it. Client work took a front seat and I put the development on the back burner. When I came to get started again I knew I’d bitten off more than I could chew trying to develop a reasonably large site in between client work. With that I started from scratch and tried to simplify.

I wanted to create something really clean and easy to use, with a focus on typography and also past email newsletter designs I’d created. At the time Typekit has just announced the release of Futura on its platform, so that was the perfect excuse to use that for many of the headings you see on the site. Unfortunately the condensed version of Futura isn’t available on Typekit, so I had to use image replacement there.

In the ‘hire’ section at the bottom of the page I also wanted to spell out the process for the client, letting them know exactly what to expect.

Behind the scenes

I built the site using HTML5 (as I do for all client sites now) and also used some subtle CSS3 to further enhance the experience. Mainly on the email client logos, using subtle CSS3 gradients and box-shadow transitions when you hover over them with the mouse.

To conclude…

Overall the site came together pretty quickly and I’ve had some good feedback so far.

I think its going to be an interesting little project because now I need to promote the site (cue this blog post!) and get some visitors to it. I’ll definitely be pointing my clients to the site once I finish working on their website projects. After all having an email newsletter to match your brand new website is the perfect partner in my opinion!

Before I begin, the images here were taken with my iPhone, so please excuse that the quality isn’t top notch.

Last Wednesday I was finally able to move into the new Authentic Style HQ, conveniently situated in the Wincombe Business Centre, just 1.5 miles from my house in Shaftesbury. What wasn’t so convenient however was the time it took BT to set up my broadband. Having had an engineer come out the previous Tuesday and tell the business centre manager that the installation of both my broadband and phone line was successful, I moved all my stuff in and tried to get online. Needless to say, you guessed it, no internet connection had been set up, and I only found out after paying for a networking guy to help me get online and him suggesting I call BT just to double check they’d installed everything. Anyhow, a week later I was in the office and online.

So why move out from the home office and spend money renting a room somewhere else?

After working from home for just over 2 years I felt like it was time for a change. Authentic Style has been doing great over the last two years and turnover this year is up on last year by 23% if my calculations are correct. Whilst working from home does have its perks, it also has some downsides which I felt were getting to me a little after 2 years of doing it.

My main reason for getting some office space was that I don’t want to be a solo freelancer the rest of my career. I want to eventually take on staff and try and build Authentic Style into a small design and development outfit, so why not take the leap now and take on the extra overhead whilst its just me, continue to build the business and then look at maybe taking someone on in the next year.

The second big reason was having a place to leave the laptop, and work in general behind for the evening and also the weekend. When you work from home you have to be so disciplined to stop work at 6pm and not just sneak back to respond to that email or tweak that design later that evening. Whilst its convinient and nice in the beginning to be able to do that, after a while I was finding it increasingly hard to switch off. I’ve only been in the new office for about a week now, but I’m already enjoying being able to leave work behind in the evenings and having a place to go each day. After all I’ve still got my iPhone if I really need to check my mails or respond to an inquiry quickly after hours.

The room I’m renting is a good size and would definitely accommodate another desk and possibly a third at a push (there’s more space to the right of this shot). There is also a lovely meeting room available for use at the business centre and I can’t wait to use it for the first time next week with a potential new prospect.

For now its time to continue working hard and seeing where that takes me in my third year freelancing!

As a quick side note, the development of this application was handled by Kriss Bennett of Createful. Thanks Kriss, great job! Now on to the case study…

Application Overview

The Sea Urchin iPhone application was really pretty straight forward. In essence it lets people who are interested in chartering Sea Urchin (a boat captained by my client Mick) find out a little more about exactly what’s involved in the day, costs, videos, availability, weather forecasts and tidal information. You can download the app from the iTunes store to take a look for yourself.

Stage 1: Information Architecture

The first step was to organize the information on the homescreen of the application.

Mick told me the sections he wanted the app to have, so I sat down with a pen and paper and started to think about how these could be best organized to allow users to quickly access each section of the app from the homescreen.

After a quick bit of sketching I decided that there were too many areas to simply list in one menu without the user having to scroll to see all of them. Ideally all the areas needed to be visible to the user without any need for scrolling. With that in mind I decided to break the navigation up into two sections. One for the ‘Availability’, ‘Weather’ and ‘Tides’ information and another for the more text heavy based pages. I used the conventional black bar at the bottom of the app (which many other apps use) to house the ‘Availability’, ‘Weather and ‘Tides’ icons, and then settled on a simple button style navigation for the links to the other sections.

Prior to starting the wireframes Mick had also sent me a few images of his boat and also some happy customers snapped with their biggest catch of the day. I felt it was pretty important to include some of these images, so there needed to be a space devoted to that on the homescreen too. My idea here was for the images to fade in and out in a nice smooth cycle.

Once I’d settled on a layout for the homepage I opened up my wireframing tool of choice (Omnigraffle) and reproduced the sketch to then present to Mick. I also produced wireframes for the ‘Prices’ and ‘About’ screens of the app to show Mick how the ‘content style’ screens would look.

The ‘Prices’ page was a crucial one to wireframe in my opinion. The content Mick had sent across for me to work with included all the right information, but it was buried away amongst a mass of text, so actually finding all the different price options was pretty tricky. I solved this problem by clearly highlighting the prices and costs for chartering the whole boat in their own clearly defined blocks.

Stage 2: Icon & Application Design

With the wireframes signed off I started work on the icon design. Initially I went with an all blue theme, but after some input from the client I worked in an orange tone to match the clients existing website.

The icon itself went through several iterations until we reached the fishing hook and waves which was immediately chosen by Mick. First off I went down the route of having a boat in the icon, then tried a couple of approaches with a fish silhouette and rod, but I knew we were on to a winner with the hook and waves combination.

With the design of the homescreen of the application I wanted to keep things really simple and focus on the navigation and images of the boat and past customers. Since this screen was really only a means of navigating around all the content, that had to be immediately obvious.

I was also keep to use some nice iconography to draw the users eye to the more key parts of the app – the availability calendar, weather and tide info.

Here’s a look at the designs for some of the screens:

Stage 3: Development

Once we’d signed the designs off (which happened very quickly might I add!) it was time to save out all the images for iPhone 3 and iPhone 4 retina display and then send them off to Kriss at Createful to develop.

Prior to the development we’d discuss the best way of integrating the Sea Urchin availability calender along with the weather and tides info.

A mini version of Mick’s availability calendar was able to be linked to from within the app itself, there for not interrupting the user journey by closing the app and opening Safari instead. We also included a button to enable users to switch to the more detailed view of the calendar as well.

For the weather we were able to display the Whitby weather forecast straight from the Met Office website within the application.. Obviously this updates on the fly so is always the latest forecast – something thats very handy for a fisherman!

Unfortunately with the tide information there was no API which we could tie in with the app. Because of that we had to resort to linking to the relevant section of the National Oceanography Centre website.

Finally for the videos we were able to link to the mobile version of Youtube and pull in all the Sea Urchin videos enabling users to view them within the app.

Conclusion

Overall I think both Kriss and I produced a great looking app that provides everything that someone who is interested in chartering the Sea Urchin boat would need to know. I’d love to hear what you think of the design and/or the process in general in the comments below.

Client Testimonial

Many thanks to you both, the app looks awesome. The end product is very professional to match your working practices. I would recommend your services to anyone.

Related Post

• iChampi iPhone Application Design

The difference between iPhone 3Gs and iPhone 4

The old iPhone 3 and new iPhone 4 have different resolution screens. Basically the iPhone 4 retina display has double the pixels of its counterpart, which means double the detail horizontally and double the detail vertically. Consequently this creates a little more work for us UI designers.

Here are the specifics:

• iPhone 3Gs – 320 x 480 screen size
• iPhone 4 – 640 x 960 screen size

If you use much of Apple’s pre-built interface library for your app then you don’t need to worry about these differences, as much of the work is already done – the default Apple UI buttons, labels etc work fine for both resolutions. The slight headache comes however if your iPhone app design is highly custom – e.g. it includes lots of custom made images, graphics, icons, menus etc. If that’s the case then you need to create versions for both iPhone 3 and iPhone 4 so that you can export two sets of images at those different resolutions.

So does that mean I need to create my app designs twice?

Thankfully, no! It’s all about using solid color, pattern or gradient layers with vector masks and in Photoshop to ensure that you can design first at the iPhone 3 resolution (320 x 480), and then scale that design up to the iPhone 4 resolution (640 x 960) without loosing any of the detail. You have to use vectors instead of bitmaps as bitmap images blur terribly when you scale them up.

Here is a list of 6 tips that will help you to create iPhone app designs that work for both platforms in Photoshop:

1) Start out designing at the lowest resolution

Start out designing for the iPhone 3 which uses the lower resolution. I won’t go into the specifics but after a quick experiment in Photoshop, vector masks and shape layers seem to scale up better than they scale down.

2) Make sure ALL layers are made from shapes with layer styles for effects

Get in the habit of using layer styles, shapes and vector masks. Bitmaps should not be used in iPhone app design because they’ll cause you headaches when you scale your design up. Shapes created with the rectangle / rounded rectangle tool will be your best friend as they easily scale up and down. One quick tip is to avoid using the ellipse tool for creating circles – for some reason it won’t snap to pixel properly. Instead use the rounded rectangle tool with a large radius to achieve a circle shape. Also, if you want to use textures, you first need to define that texture as a pattern, which you can then use as a ‘Pattern Overlay’ in the layer style options.

3) Enable the ‘Snap to Pixel’ setting when drawing with the shape tool

To make sure this is enabled select the shape tool, then cast your eye to the top of Photoshop where all the options for the tool you’ve just selected appear (see image above). Next click the down arrow to the right of the Custom Shape icon (labelled Geometry Options on hover) and then tick the ‘Snap to Pixels’ checkbox.

4) Icons must be vectors pasted into Photoshop as ‘Shape Layers’

If you use bitmap icons they’ll just blur when you scale your design up; you need to use icons that are in vector format. That may mean recreating some of your icons in Illustrator and then adding layer styles to them in Photoshop (Gradient Overlay, Stroke etc). Be careful when you copy and paste these from Illustrator into Photoshop though – you need to paste them into Photoshop as ‘Shape Layers’ (see image above).

5) Scale up as you go to check your work

As you’re designing its best to keep checking your work by scaling it up 200%. This way you’ll notice any things that need correcting/adjusting as you go. At the bottom of this article is a link to a very handy Photoshop action that lets you do this in a single click.

6) Export your images

This isn’t something I’ve had to do myself as I provide all my iPhone app designs to developers who export the images and then develop the app. I should really start to learn Objective-C, but the time escapes me at the moment. Anyway, I know that the whole exporting process can be a little tedious.

According to this great article on Smashing Magazine (Designing for iPhone 4 Retina Display: Techniques and Workflow), the best export method seems to be:

…enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

I’d advise checking out that article, especially the exporting section for more info, and also the incredibly useful Photoshop actions that can be found at the bottom of that same article. Also, this article may be of some use too: ‘Designing for iPhone 4′s Retina Display: What I’ve Learned’.

Helpful Resources

I hope some of you found this article useful. Below are a few links to some handy resources I regularly use for my designs.

• iPhone 3 GUI Design Kit
• iPhone 4 GUI Design Kit
• iPhone / iPad Icon Kit

Also If you have any iPhone app design tips to share yourself, I’d love to hear them!

This blog post is about to be removed, sorry for the inconvinience. Please head back to the main blog to view more articles.

In this post I’ll outline my policy and also some ways I avoid the problem altogether.

A Necessary Evil

Like the saying goes, you need to plan for every eventuality at the beginning of a new project so your client knows what happens should the worst happen and they not be satisfied with the design work you produce.

Its so important to do this as a designer because even if you’ve never had this situation arise (thankfully I’m yet to experience it!) you need to have a clear policy for handling it outlined in your contact should it happen to you.

Put your feet in the shoes of a client who is parting with their cash – they’ll want to know what happens should the designs you produce not be immediately to their liking, e.g. how many hours of revisions do you allow for per design concept.

Sometimes as a designer you can produce something that you think looks great but it doesn’t quite tick all the boxes for your client – after all design is so subjective. The planning process helps eliminate this, but more on that later. I’d even go as far to say that making amendments to a design doesn’t mean its a bad design in the first place.

Quite often its very valuable to work with the client to refine and improve on the initial design concept you produced to find the best possible solution. As long as both parties are clear on how this works in the very beginning and the client is happy to pay for refinement time above and beyond the designers usual policy then this is fine.

In my design contract I typically include the following;

6. Client Amends
Designer prides itself in providing excellent customer service. That is the spirit of our agreement and the spirit of the Designer’s business. To that end, we encourage input from the Client during the design process. However, amends totaling more than 2 hours of time per design concept will be added to the total invoice. Amendments made to the design once it has been ‘signed off’ will be billed at the normal agreed hourly rate.

This clause is in my contract just to make sure both myself and my client know that we have to ‘sign-off’ on the design at some point. Its not profitable for either parties to be making iterations and amendments to a design for weeks after the first version has been produced.

Combining this kind of statement in a design contract along with clearly defined milestones for each stage of the project makes sure that my client knows exactly what to expect.

Avoiding the situation altogether

Ask questions and plan – simple!

If you ask the right questions at the beginning of a project and make sure you plan (as I’ve mentioned before, wireframing is my preferred method) then you’ll very rarely have a situation arise where the client doesn’t like the any aspects of the design you’ve created.

Creating a wireframe before you start a design allows the client to see what direction you’re planning on going in terms of layout. Its much easier to make changes at this stage than once you’ve spent time creating the design in Photoshop.

Collecting examples of websites that your client likes is also a really helpful exercise. A few times I’ve been going through a completed design questionnaire I send out to new clients and when I open up the example sites they’ve provided links to, I get a slight surprise. I always think it’s better to get that suprise at the planning stage rather than in an email from the client when they’re reviewing the homepage design you’ve just spent a day working on.

Your Experiences?

I hope that as a fellow designer you found this article useful and even as a potential client reading through my blog, I hope this helped inform you about how I handle design amendments.

I’d be really interested to hear from other designers about how they handle amendments with their clients. I’d also be interested in hearing from anyone who reads this blog who isn’t a web designer. What questions would you have about working with a freelance web designer? I’ll be looking to write more of these kind of posts in the future.