ID: Apps Pod 02
Summary
TLDRThis interactive design apps lecture delves into app-specific design and the evolution of web design paradigms, from print to interactive media. It highlights the importance of user interaction and the shift in content hierarchy in modern websites compared to early web design. The lecture emphasizes the distinction between web and app design, the need for iterative development, and the significance of mobile-first design. Designers are urged to adapt their thinking, understand mobile design conventions, and work closely with developers, using tools like XD for prototyping and adhering to platform-specific guidelines.
Takeaways
- 🌐 The evolution of design has been significantly influenced by new devices and the shift from print to interactive media like the internet, which has made the user a central participant rather than just a spectator.
- 📚 Early web design was heavily influenced by print media, with websites resembling digital versions of books or magazines, but this has evolved to a more user-centric approach.
- 🔄 The importance of understanding the unique characteristics of each platform when designing for mobile, as simply translating web designs to mobile can lead to issues with usability and user experience.
- 🛠️ The necessity for designers to adapt to a fast-paced development cycle for apps, which often involves iterative design and quick releases based on user feedback.
- 📱 The concept of 'mobile first' design, which emphasizes starting the design process with the smallest screen size to ensure a focused and efficient user experience that scales up.
- 🤝 The collaborative relationship between designers and developers in the app development process, with both roles contributing to the success of the app through an iterative process.
- 🛑 The need for designers to be familiar with the design guidelines for different operating systems to ensure that apps are intuitive and consistent with user expectations.
- 📚 The value of using development tools like Adobe XD to create screens that can be quickly and accurately transferred to developers, facilitating better communication and collaboration.
- 🔍 The emphasis on prototyping as a crucial part of the app design process, allowing designers to test and refine the functionality and user experience before finalizing the design.
- 🔄 The understanding that apps are never truly 'finished', but rather are subject to ongoing updates and improvements in response to user feedback and changes in technology.
- 🌟 The importance of considering the distinct nature of different devices, such as smartphones, tablets, and smartwatches, and designing apps that are optimized for each specific platform.
Q & A
What is the main focus of the 'Interactive Design Apps' podcast?
-The podcast focuses on app-specific design and the development process for apps, including the evolution of design paradigms and the importance of understanding user interaction in app design.
How has the advent of new devices like smartwatches impacted the field of design?
-New devices like smartwatches have forced designers to learn new design paradigms and adapt to the unique constraints and opportunities these devices present.
What was a significant shift in design thinking that occurred with the advent of the internet?
-The significant shift was the transition from print-focused design to designing for an interactive medium, which required learning how to create content that was more engaging and user-centric.
How did early websites resemble traditional print media, according to the script?
-Early websites often had design elements similar to print media, such as tables of contents, sidebars, and banner ads, reflecting a direct translation of print design principles to the web.
What is the difference in design hierarchy between the 1997 Apple website and the modern Apple website?
-The modern Apple website has a clear hierarchy that directs users to key content areas, like the MacBook Air or iPhone 13, whereas the 1997 design was more of a 'slab of text' with hyperlinks, lacking a clear hierarchy.
Why is it important to escape the web structure when designing for mobile?
-Escaping the web structure is important for mobile design because it allows designers to fully leverage the unique capabilities of mobile devices and create more appropriate and satisfying user experiences.
What does the term 'mobile first' mean in the context of design?
-'Mobile first' is a design approach where developers start by creating designs for mobile or small screens first, ensuring that the user interface is effective on these devices before scaling up.
How does the development process for apps differ from traditional web development?
-App development is characterized by a compressed time frame, rapid releases, and an iterative process that relies heavily on user feedback for continuous improvement.
What is the significance of understanding both design and development processes in app creation?
-Understanding both design and development processes is crucial for effective collaboration between designers and developers, leading to a higher quality outcome and shorter iterations.
Why is it necessary for designers to use and understand various mobile platforms when creating apps?
-Designers need to use and understand various mobile platforms to ensure their designs are adaptable and effective across different operating systems, taking into account the unique design conventions and user interface patterns of each platform.
What role do prototypes play in the app design process?
-Prototypes are essential in the app design process as they allow designers to test and evaluate the functionality and usability of the app before finalizing the design, which is a key aspect of the agile methodology.
Outlines
📱 Evolution of App Design Paradigms
The script discusses the evolution of app design, starting from the early days of the internet when designers transitioned from print to interactive media. It highlights the significant shift in design thinking with the introduction of new devices like smartwatches and the importance of learning new paradigms. The speaker uses the example of early Apple websites to illustrate the transition from print-like designs to more user-centric, interactive layouts. The summary emphasizes the importance of understanding the user's role in app design and the need to move away from traditional print design approaches.
🛠️ Adapting to App Design Strategies
This paragraph focuses on the strategies required for app design beyond traditional web design knowledge. It emphasizes the need for designers to challenge their thinking and adapt to a fast-paced development cycle with iterative updates based on user feedback. The speaker introduces the concept of 'lean user experience cycles' and the importance of starting with wireframes and basic designs before moving on to more detailed design stages. The summary underscores the necessity of a mobile-first approach to design, beginning with small screens and scaling up, and the importance of understanding the development process to achieve a successful app outcome.
🤝 Collaboration in App Development
The script discusses the collaborative nature of app development, where designers and developers work closely in an iterative process to achieve a high level of outcome. It stresses the importance of using development tools to create screens that can be quickly and accurately transferred to developers, and the need for designers to have a basic understanding of app development processes. The summary highlights the use of tools like XD for design and communication, the importance of using the same terminology as the development team, and the need for designers to experience different platforms to understand the nuances of design across iOS, Android, and other operating systems.
📚 Understanding Design Guidelines for Apps
This paragraph emphasizes the importance of adhering to platform-specific design guidelines for both Android and iOS. It mentions the need for designers to familiarize themselves with resources like Material Design for Android and Apple's design resources for iOS to ensure their apps conform to the respective platform's user interface conventions. The summary points out the necessity of testing on actual devices and keeping up-to-date with the latest design trends and guidelines, as well as the importance of using resources like 'patterns' for common UI solutions.
🔄 The Iterative Nature of App Design
The script highlights the iterative process of app design, where apps are never truly finished and are constantly evolving with updates and changes in design conventions. It stresses the importance of testing on physical devices to understand how the interface will function and the need for designers to embrace change as an opportunity for improvement. The summary underscores the continuous nature of app development, the importance of prototyping, and the idea that app design is a never-ending process of refinement and adaptation.
Mindmap
Keywords
💡Interactive Design
💡Design Patterns
💡User-Centered Design
💡Information Architecture
💡Mobile Design
💡Native Apps
💡Iterative Process
💡Mobile First
💡Prototyping
💡Cross-Platform Design
💡Agile Methodology
Highlights
The necessity for designers to adapt to new devices like smartwatches and the evolution of design paradigms.
The historical shift from print to interactive web design, emphasizing the user's role in the design process.
Early web design's resemblance to print media, with tables of contents and sidebars, and the transition to a more user-centered approach.
The importance of understanding the unique characteristics of web and app design, including the use of hypertext links and content hierarchy.
The distinction between web and app design, with examples of how apps can mimic websites but fail to adhere to mobile design conventions.
The iterative nature of app development, with a focus on rapid prototyping and user feedback to inform design.
The concept of 'mobile first' design approach and its significance in creating efficient and scalable user interfaces.
The importance of working closely with developers in the app design process to achieve a high level of outcome.
The use of development tools like Adobe XD to streamline the design-to-development process in app creation.
The need for designers to understand and utilize platform-specific design guidelines for both iOS and Android.
The differentiation in design patterns and user interface conventions across different operating systems.
The importance of prototyping in app design, including the use of physical objects to test interface concepts.
The continuous evolution of app design, emphasizing that apps are never truly finished and require ongoing updates and improvements.
The practical workflow from design to prototype using industry-standard software like Photoshop, Illustrator, and XD.
The challenge of ensuring that the design works effectively across various screen sizes and devices in mobile app development.
The role of user testing in the agile methodology of app design, highlighting its importance in evaluating usability.
The need for designers to adapt their thinking and embrace the unique challenges and opportunities of designing for mobile devices.
Transcripts
foreign
welcome back to interactive design apps
this is the second pod and this pod
pretty much follows on from the week one
pod we're going to continue looking at
what app specific design might be and to
look very briefly at design patterns as
part of the development process for apps
but let's
let's start
by looking at
um
what the device is so new devices things
like smart watches Force us as designers
to constantly learn new design paradigms
and you can see how I've just put some
apple watches there and of course this
big change in design thinking came
nearly 20 years ago now with ubiquitous
or 30 years maybe with ubiquitous
internet access and the desktop which I
should in the first websites before then
like most designers and myself included
we were focused on print and the arrival
of the internet required us to learn how
to design for an interactive medium
which is what we're trying to do in this
unit or this subject the user
has become you know far more important
than just a spectator
they're now interacted in more
sophisticated way than they ever did
with the print magazine or a book in
this transition lots of early websites
looks like signs with buttons on them
and as designers we didn't immediately
understand the characteristics of this
new medium
now if we look here I've found from the
Wayback machine an early Apple website a
lot of the design paradigms
that we began web design with
um started from print as we can see in
this website from I think it's 1997.
you can see to the left there's a table
of contents in what we now call the
sidebar
it's like a book in that way there's an
applicable advertisement and you know
banner ads that sort of thing is still
with us and there's a use of hypertext
links which was quite revolutionary in
the early days of web design it created
a whole lot of excitement that we could
link to anything without having to turn
pages now if we compare that to the site
today I'd say my quicksquiz we can see
there's a huge amount of design shift
there for Apple you can see there's
still the standard top nav menu which
has come from the sidebar up to there
and we can see that there's two key
content areas that we open up with the
MacBook Air or the iPhone 13. they're
featured in the center there so we can
guess that these are the items that
Apple think we want to see first or they
want to push us to see first
um
and you can see the hierarchy is really
now about
what is most useful for Apple to show us
or what is most what they think is most
useful for you to want to view first so
we don't just start at the start and
then go through a table of contents like
a a print medium wood but you can see
that we're now being funneled directly
to the content that we want
um so if we think back to the original
1997 design the hierarchy
really wasn't there there was just a
long slab of text with hyperlinks inside
it and it required you know you as a
user to read through at length to find
what you're looking for so that is a big
shift in how we think about designing
content and information architecture
generally for devices now
now we're going to move to you know
these distinctions are becoming clear
between web and app design which is the
theme again of this week's pod if we
look at the apps by the BBC left and
hurts right they look
kind of like websites they don't really
look like native apps and we know native
zaps are from last week and they emit
some really basic mobile design
conventions
um the same thing is happening today
with apps one you will often come across
applications that look like many
websites they're constructed as web
pages they're just translated for
smartphones and in turn I would say that
they fail with contrast
font size touch targets and gestures and
we touched on these things last week
they also missed the mark with who will
be using the app where and when on what
devices
so when designing for mobile escaping a
web structure is really important we
have to face projects with a different
mental approach to fully understand
mobile design in order to take full
advantage of what phones offer and how
to deliver you know so more appropriate
and satisfying experiences so what do
you need to do in order to be a web an
app designer other than that rather than
a web designer beyond the knowledge and
tools I would say that you need to
challenge the way you think and I'm
going to go through in a little bit of a
listy way again some of the strategies
for adapting to this world about design
so first of all you will
change the way that you work
hundreds of apps as we know are entering
the App Store and development from the
idea to the launch is a very compressed
time frame for apps as opposed to web
development we can't spend months on
detailed fancy designs before launching
I need to realize that other apps have
come in earlier and solve the problem
locally in a similar way you'll notice
in the app development process that
things get released really quickly and
then they rely on user feedback to
update you know to provide you know a
next release and the next release I
don't know if you've ever had an app
said oh there's a new one updated and
it's almost weekly that there's an
update provided for the app and that's
part of
um I guess it's endemic to apps that we
let them loose on users before having
them completely fully fledged and
they've they're never finished anyway
okay so in terms of production cycle
um there's a thing called lean user
experience cycles and we can see a chart
here and this means that there's a
constant iterative process for apps
there's always something being developed
and iterated on keeping you know in the
middle of your mind the single Focus
that you know it will need to be
improved again at some some point it's
never ending
so app design can't really begin with
just interface design in Photoshop or
illustrator or any of those normal
production Pathways that we're used to
working with it has to start before that
with wireframes and basic designs to
kind of get those things right before
even
moving along into developing the
Prototype that is a faster or more lean
way to develop things so in this diagram
let's just go through it we've got think
make and check and if we have a little
look under those we think there's some
generative research there's an ideation
that happens there's mental models
behavioral models there's test results
or competitive analysis or what any of
those research things that would
normally enter into a development of an
app there's the making and we can see
here the prototyping the wireframes the
unique value proposition which we
touched on in IDM things like the
landing page hyper comps or deployed
code so comps we just mean the screen
compositions and then there's checking
and user testing is a big thing so a b
testing any analytics usability testing
any of those funnel testing sign ups all
of that sort of stuff and then going
back to the think part again and so it's
this iteration circle is pretty normal
for apps and it's pretty fast
for app design generally
okay
so the next point we wanted to make was
that mobile first is has been a buzz
word in the screen design sector for
quite some time now it simply means that
it is very good practice whenever you're
you know you're charged with developing
uh
screen materials for a company or a
client that you actually begin with
mobile or small screens first so mobile
first because a lot of that user
interaction has to be quite nuanced and
the patterns of user interface will then
give you a better website in the end so
mobile first is a great way to design
because it looks good on a small screen
it will definitely scale but not vice
versa
okay so it's I guess the big best
analogy here to kind of bring this point
home is this idea of traveling with
luggage if you've got a small bag you
know you'll only bring certain amount of
stuff but if you were given a large bag
and or like a website you generally fill
it to take it on on
your trip with you so if you you know
it's best to start with that small bag
so you've already edited your contents
down to make it this your trip the most
efficient that it could be I guess okay
so that's why we've got small screens or
mobile first is the buzz thing that I'm
trying to get you to pay attention to
right here okay so the next step is to
actually understand the development
and the success of your app depends on
both your designer and your developer so
a developer is the person that will go
ahead and code your project you do need
to work together not at the end like as
part of this iterative process
um to achieve a high level of outcome
so you can shorter iterations by working
in parallel and then kind of
intersecting quite often so you will
find in the real world whatever that
might be that you will be designing and
prototyping at the same stage as it
being produced by your developer so it's
good good to have a basic understanding
of app development processes as well as
just the design phase
okay so the next thing
um one way to be ahead of that is to use
development tools
um
to build your screens that can be
transferred quickly and Faithfully to
your developer and that's why we'll be
using XD this semester while accurately
sort of communicating the design intent
we'll be doing this by using XT so
you'll need to use the same terminology
as your rest of your team so that
everyone speaking the same language for
your designs
designers developers often refer to the
same thing but with different words
which makes understanding different
parties more difficult but we'll try to
get a handle on that as we unfold in the
semester
um next point is that when you're
developing or designing either one a
mobile app
you can't just use your phone for
reference I mean you will for your
project for this semester because you
don't have a whole range of phones out
there but if your target is a global
mobile market
um you've got to at least be able to
access some Android some iOS devices
maybe even a Windows phone and be using
them constantly in order to fully
understand how to resolve the different
design scenarios and patterns for each
platform I have a draw full of a whole
range of phones
um but the truth is that the world
doesn't begin and end with the iPhone so
many designers so some designers do
limit themselves to iOS
um and so their designs don't really
translate to from the original map so if
we look here
just basically uh three screens so
simple navigation resources like Tabs
are used in different ways on iOS to
Android and to the Windows phone and we
can see them there
uh iPhones using them at the bottom
Android's at the top there although this
is changing and then there's a a Windows
Phone set up there so the interaction
patterns so the established solutions to
design problems of user interface are
different on each operating system and
I'll get at those a little bit later
so as such as a designer it's kind of
good to you know flip between the two in
order to be you know on top of what they
actually are and be able to use them
correctly in your design work
um so a few examples are the location of
your tabs how to show menus when to and
how to display primary and secondary
navigation they all they differ between
the two two main platforms there of the
IOS and Android
um
so yeah I just thought I would point
point that differentiation out okay if
we look here here's a concrete example
of it and this is an older version of
um we can see that it looks suspiciously
similar on both devices so we going from
last week's put a okay I know now that
they've probably
um designed it as a hybrid app so it's a
HTML5 implementation of their website at
this stage of their development they've
changed the way they work now in
so you can see you know
we can see in the Android implementation
that you know it hasn't paid attention
to the Bottom bar nav ideas and it's
just sort of hasn't ported particularly
well and I think this kind of
illustrates that we also have you know
different tabs showing up as defaults so
I was yeah okay so next
um
I just wanted to point out how do you
deal with this as a designer
so you you can have the phones or you
can also alongside having the phones is
reference the design guidelines that
they both publish regularly up and
regularly update depending on the
operating system comes out so material
design is for the Android number three
has just come out and I've got a link
there I'll put these Links at the bottom
of the Pod as well in today's session
um but if you're wanting to conform or I
think that you probably will want to
perform because I will ask you to to the
user interface conventions and the
device specific things for Android you
will definitely need to take a squiz
through material design three
um
and then if you were designing for the
iOS you'll see here that Apple also puts
out developer resources for designers
and developers
um to look at and you can see here I've
just taken the screen grab from the
website there again I'll put the link at
the bottom but you can see they've got
design templates for XD and production
templates for XD Photoshop or sketch
sketches are popular program for app
development but we're using XD this
semester but you can see you can
download them from the get go to make
sure they're conforming to Apple's
fairly strict guidelines and in fact if
they do not conform to their strict
patterns of user interface design they
don't get accepted into the App Store so
you'll be knocked back and asked to
remedy things or they'll just knock it
back and won't tell you why Okay so
whether you're doing it for Android and
I'm pretty sure you haven't decided yet
or iPhone and it'll probably be the
device that you actually have in your
hand or your pocket right now make sure
you're familiar with the material design
for Android or the iOS design patterns
and guidelines that there
okay there is another site that I
thought I'd alert you to it's in your
links and again I'll put it there it's
called patterns it does go through
common patterns for all sorts of page
layouts and user interface issues that
you might have we can see some
onboarding patterns there and different
splash screen patterns so that is
another resource that would be useful
for everybody doing app design to have a
a little look at
okay so another thing that you'd need to
do with that production in the flow is
to prototype everything all the time so
an agile methodology which is what we
call app design requires us
understanding how something will work
and function before you make it and
before you go through and put your fonts
in and your colors and all the normal
things that you would do as a designer
do need to get that um the functionality
right you know
likewise all prototypes help us
evaluating and again via user testing
the app's usability and that's a key
thing for app design particularly as
part of an agile methodology so we don't
have to wait very long before building
our prototype so as a result of that oh
let me just look at some prototyping
things I thought I would put in as one
of the funniest prototypes I've seen
which actually worked and they did use
it it's a
it's a piece of wood with with a piece
of paper on it it's one of the early
prototypes for the Palm Pilots before we
kind of had mobile phone
usage um and it's from the Computer
History Museum
so you might not remember that you won't
remember the Palm Pilot but it's one of
the first prototypes for you know this
thing to help us organize our life
before the mobile phone came in and they
prototyped it in wood to see if it fits
in people's pockets and if it actually
felt useful to people in the size and
weight actually worked and I guess other
than just the historical fun of putting
in a piece of wood with a piece of paper
and a pen you can see the pen part there
too
um you can see you know it's kind
industrial design or you know the look
and feel of products is important to
prototype as well
um Okay so
let's move on okay so in terms of our
production Pathways
um you can see here clear workflow going
from design in Photoshop and illustrator
into a prototype in XD and then a
shareable
you know blink NXT as well I mean we
could complicate this more with the user
testing
um Cycles but this is the basic uh
workflow for us you can actually design
an XD but I imagine most of you
will probably kind of go oh actually I
want to have more control than the tools
that XD provides me but this is a basic
production workflow that you'll go
through and they're the softwares that
we'll be using this semester which are
fairly industry standard
that you use out of uni and into work
okay there are many prototyping tools
out there so even though you're using XD
you've probably you might have touched
on Envision sketches the other popular
one so sketch XD and envision are the
most common prototyping tools out there
okay next next rule is what you see is
not always what you get when you um
start from a draft design as you work so
when you're designing for the web it's
possible to watch a live draft but with
apps you don't really know how the
interface will look and function unless
you test it on all of those devices as I
said before so such test testing on
actual physical devices is really
important in Mobile
app develop development
okay there's so many different screen
sizes next thing is that apps are never
finished and I keep I said that at the
start it's an iterative process
um but you're never creating anything
that you just launch and say hey my
app's finished I've launched an app
um problems always occur
um
different releases of material design
might come out or iOS 16 is coming out
later this year halfway through your
project project probably
um so it's it's impossible to always you
can't just make a an app design and
think that that's finished
um detecting problems and changes in
conventions is not a bad thing it's an
opportunity to learn and kind of improve
as you go so
you know keep that in your mind whenever
you're developing an app never think the
hey in assessment too when you do your
design document this thing's finished no
way you have to kind of use it and go
through a whole range of cycles of
prototyping to get a new release ready
put it that way
okay so let's end where yeah let's end
where we we started sort of finish up
um I guess from this pod you need to
come away with the core idea that
designing apps requires a bit of a
change in thinking uh it's time to leave
web design for computer screens and to
understand that smartphones and tablets
and even watches are separate and
distinct devices and need you to
consider them as such so thanks for
listening and I will see you in class
Посмотреть больше похожих видео
Web Dev vs Web Design Explained with Rus Anderson
What Is Wireframing? (A UI Design Tutorial)
Designers Are Leaving Webflow... Here's Why
Color Contrast, Bad contrast, Good Contrast in UI/UX | Design Fundamental.
Top 10 Web-Design Mistakes
0001 Complete Web Mobile Design Zero to Mastery | Introduction to Course | UI/UX Design Course
5.0 / 5 (0 votes)