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!
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. MessageIt.
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." Lumafit.
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. MuSeek.
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. TuneLoader.
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. Calendar App.
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… City Deals.
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. App Icons.
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! UI Kit.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Medical Disclaimer
The information on this site is not intended or implied to be a substitute for professional medical advice, diagnosis or treatment. All content, including text, graphics, images and information, contained on or available through this web site is for general information purposes only. Krobknea makes no representation and assumes no responsibility for the accuracy of information contained on or available through this web site, and such information is subject to change without notice. You are encouraged to confirm any information obtained from or through this web site with other sources, and review all information regarding any medical condition or treatment with your physician. NEVER DISREGARD PROFESSIONAL MEDICAL ADVICE OR DELAY SEEKING MEDICAL TREATMENT BECAUSE OF SOMETHING YOU HAVE READ ON OR ACCESSED THROUGH THIS WEB SITE.