I recently had some time to chat with Alan Powers, 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!
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.
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."
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.
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.
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…
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.
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!
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.
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.