This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.
I recently had some time to chat with Alan Power, a mobile interface designer, and Tuts+ author, that is based in Dublin, Ireland. In our conversation, we talked a bit about how he got his start in the industry, what pushed him to become a better designer, as well as what tools he could not live without. Let's take a look!
Hi Alan, thanks so much for taking the time to chat with me today. Can you begin by telling us a bit about your background? Where are you from? How did you get your start in the design industry?
Hey, hows it going? Well, I'm a user interface designer based in Dublin, Ireland with about 10 years of experience in the industry. I'm currently working in-house as user interface design manager for Paddy Power, one of Europe's fastest growing businesses in the betting and gaming industry.
I suppose I have always had a keen interest in art and I pretty much grew up in front of a computer screen playing games, so it seemed like a fairly natural progression to combine the two. Saying that, when I was about 17 years old, my art teacher told me that I should try stay away from art and design as a career, as she felt I wasn’t strong enough at it. Because of that, I studied "Business in Computers" in college. I kept up my interest in design though, by doing a short web design course, where I was introduced to Photoshop. In a strange way, my art teacher’s advice probably spurred me on to try prove her wrong.
Aside from the short web design course that you mentioned, you said that you are almost entirely self-taught. What did you learn in that original web design course, that introduced you to Photoshop, that allowed you to make a career out of creating interfaces?
The course gave me an opportunity to develop skills in an area that I loved. When I realised what could be done using Photoshop and (back then) Flash, it opened a new door for me. I was straight off doing brochure sites or flash banners for small businesses, and it was from those small sites, that I got my first job as an in-house designer in a small property company. Even to this day, I'm still taking on side projects. I think it’s so important for any designer to be constantly trying to improve. Without that desire to learn, you will be left behind in such fast moving industry.
I feel very lucky that I have such passion for something that pays the bills. I can't imagine what I’d be doing now if it was not for design. Like that quote says, "Choose a job you love, and you will never have to work a day in your life."
In your opinion, what are 3 Photoshop tools that every designer should master before attempting to design an interface?
I don’t really think there are any three specific tools needed to master interface design. There are certain aspects of Photoshop that you should understand. Understanding how to group your layers properly is really important, as it's not just you that will be looking at the files you create. Developers will be going through your PSD too, so it's important you have a structure in place from the start. Also, understanding how smart objects work will save a lot of time as the project goes on. A great new tool available in Photoshop CC allows you to link Smart Objects across various several PSD files! This comes in so handy when you are working on a number of PSDs for the same project. If you have 10 PSDs almost signed off, and then a request comes in to change one element that exists in each PSD, the new "Linked Smart Object" feature allows you to change it in one place, and it will change throughout all your PSDs! It really does save so much time!
Knowing the basics of Photoshop should be enough to get you started in interface design. It's all about balance and how different elements in the design sit together. Once you understand the basics, you will grow to learn other small tips that will help you perfect your design.
You mentioned that you got your start in the industry by building web interfaces. In your opinion, how do web and mobile interfaces differ? How do you approach these two types of projects differently??
Obviously, the main difference is the dimensions, on the web. You have a lot more room to work with. For mobile, you are constrained to specific dimensions depending on what device you are designing for. I believe, though, that you should never try water down the mobile experience due to real estate restrictions. It’s up to us as designers to offer the user the same experience on mobile as on desktop, which isn’t always easy.
There has also been a big shift to designing sites responsively. As more and more screen sizes become available, it's basically impossible to know what device your user will be using, so designers have been creating designs that work across all screen resolutions. It makes sense to try covering all bases with one solution.
Due to the lack of space on mobile interfaces, the user experience becomes extremely important to make sure the user knows where they are within the app, and that they don't get lost in endless taps and swipes. That’s why you carefully plan the overall flow of their journey, right from the start.
Another thing to bear in mind is that although mobile has a smaller screen size, there are so many more possibilities with transitions and animations, that will allow your design come to life, much more than a web interface. Obviously, you can do similar transitions on desktop but the fact that you are touching a mobile screen really takes your design to another level of interactivity.
You mentioned that you learned how to design interfaces in Photoshop. Why do you prefer Photoshop over other design applications such as Illustrator?
I have always leaned towards Photoshop. Initially, it was because Photoshop allowed me to build up a design quicker with gradients and specific effects, using layer styles on buttons, etc., but now as skeuomorphic design is a thing of the past, they’re less relevant. So I suppose its just a force of habit. I just feel more comfortable in Photoshop. I know what my limitations are so can get to the end result quicker than in the likes of illustrator. Saying that, I still like playing around in Illustrator on various small projects from time to time.
In recent years, Adobe has made some significant improvements to Photoshop as a design application. What new features can you not live without?
As I mentioned before, the Linked Smart Objects tool is really handy. I'm still getting my head around it to be honest, as I have worked for so long without it. It feels like a luxury. The great thing about Adobe is that they are constantly enhancing their products, just small touches here and there that you probably wouldn’t realise, but if you had to move back a few of versions from CC to, say, CS4 you might really struggle!
Even the recent release of the Adobe Creative Cloud shows how Adobe is constantly working to improve their products. Saying that, I’d love a version of Photoshop that allowed me to design properly from my tablet. Someday soon I’m sure…
Can you take us through the process of designing a mobile interface? How does the design go from an idea to a final product?
It depends on what is needed. It would usually start with having a look at what competitors within the industry are doing, then having a look around to gather ideas and inspiration from sites such as Behance and Dribbble. We sometimes take for granted the amount of resources we have out there to gather information and inspiration, its great.
Once I have the requirements of what’s needed for the project, I would create a user flow for the overall project and then would start to sketch out a basic wireframe within Photoshop, just to get an idea of what exactly is needed. I don’t like to spend too long on wireframing, to be honest, as I seem to get a better feel for the project when I start concepting the designs in Photoshop, early on. This is probably not everyone's way of working, but it allows the client and myself to get a better idea of what the final outcome may look like.
What do you do with your mobile interface design once it is complete? How does the design go from Photoshop mockup, to a functional application that some one can use on their mobile device?
Once I’ve gotten final sign off from the client, I will go back and make sure all the PSD's layers are grouped properly and tidy. Once I'm 100% with the designs, I will get them over to the developer. It’s very important that there is clear communication from the very start with the development team.
Making sure the front-end development is executed properly is just as important as how well you have designed your interface. If the product has been poorly developed, having a prefect design is irrelevant. It's up to the designer to follow the project through to the end and ensure that the development team does your designs the justice they deserve.
Once the product has been built and properly tested, then it’s time to release it to the public and wait to see if it sinks or swims!
Thanks for taking the time to chat with me today. Do you have some closing thoughts for our readers?
I suppose the main point I’d like people to take away would be to keep learning and practicing as much as possible. It might not be easy to put so much time in, but it has to be done if you want to grow in the industry. Keep on top of current trends and don’t be afraid to try out new things.
Also, don’t be afraid to show your work off. When I was starting out, I got some really harsh criticism online about my work, but in the long run I feel it has helped me learn that my stuff mightn’t be the greatest in the world but if I keep working at it I can always improve.