ID: Apps Pod 02

Summary

This 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

00:00

📱 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.

05:01

🛠️ 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.

10:02

🤝 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.

15:03

📚 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.

20:05

🔄 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.

Keywords

💡Interactive Design

Interactive Design refers to the process of creating interfaces that allow users to interact with digital products, such as websites and apps. In the context of the video, it emphasizes the importance of designing for user engagement and interaction, moving away from traditional print design to digital mediums that require a more dynamic approach. The script discusses how the advent of the internet and devices like smartwatches have necessitated a shift in design paradigms to accommodate user interaction.

💡Design Patterns

Design Patterns in the video script represent common solutions to recurring design problems within a given context of use. They are templates for solving common interaction design issues and are part of the development process for apps. The script briefly mentions looking at design patterns, suggesting that they are an integral part of creating user-friendly and effective app interfaces.

💡User-Centered Design

User-Centered Design is a design approach that focuses on the user's needs, preferences, and limitations. The script highlights the importance of considering the user as a central figure in the design process, especially in the transition from print to digital media, where the user is no longer just a spectator but an active participant in the interaction with the medium.

💡Information Architecture

Information Architecture is the organization of information on websites or apps to make it easy to find and understand. The script discusses a significant shift in how content is structured, moving from a print-like hierarchy to a more user-focused hierarchy that funnels users directly to the content they seek, which is a core aspect of effective information architecture.

💡Mobile Design

Mobile Design pertains to the creation of user interfaces specifically tailored for mobile devices. The script emphasizes the importance of understanding mobile design conventions and the need to escape web structures when creating apps, ensuring that the design is optimized for touch interactions, screen sizes, and mobile usage contexts.

💡Native Apps

Native Apps are applications developed for specific platforms, like iOS or Android, and are built using the platform's software development kit (SDK). The script contrasts native apps with web apps, highlighting the importance of adhering to mobile design conventions and platform-specific user interface patterns to create a native-like experience.

💡Iterative Process

An Iterative Process in the context of the video refers to the continuous cycle of development, testing, and refinement that is characteristic of app design. The script mentions 'lean user experience cycles' as a way to describe how apps are never finished products but are constantly evolving through user feedback and updates.

💡Mobile First

Mobile First is a design approach where the design begins with the smallest screen size and then scales up. The script explains that this approach is beneficial because it forces designers to prioritize content and functionality, ensuring that the most important elements are突出 on the smallest screens, which will then scale effectively to larger screens.

💡Prototyping

Prototyping in the video script refers to creating preliminary models of the app to test and refine its functionality and user interface. It is a key part of the agile methodology in app design, allowing designers to understand how the app will work before fully developing it. The script also humorously mentions a historical example of a prototype made of wood for the Palm Pilot.

💡Cross-Platform Design

Cross-Platform Design involves creating apps that function and appear consistently across different operating systems and devices. The script discusses the importance of understanding and adhering to the design guidelines for different platforms, such as iOS and Android, to ensure that the app provides a consistent user experience regardless of the device.

💡Agile Methodology

Agile Methodology is a project management approach that emphasizes flexibility, collaboration, and customer feedback throughout the development process. In the script, it is mentioned in the context of app design, where the methodology requires constant iteration and user testing to ensure the app's usability and functionality.

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

Instagram

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

Instagram

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