Design Beautiful Apps: iOS App Design (UX) | Sarah Mick | Skillshare

Design Beautiful Apps: iOS App Design (UX)

Sarah Mick, Designer, Illustrator & Photographer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (51m)
    • 1. Class Briefing

      6:10
    • 2. Sketching and the Grid

      15:33
    • 3. Picking the Best Navigation

      18:54
    • 4. Design Diversity and Our Designs

      10:34

About This Class

This class is for anyone who wants to learn more about designing beautiful and simple iOS apps. Whether you’re an app designer and are curious about how we do things from the ground up or you’ve never designed an app before, you’re sure to take something away from this course.

7de8aaf9

UPDATE: This class is based on the iOS 6 standards - if you're looking for newer, cutting edge updates, this may not be what you want. This focuses more on basics.

What You'll Learn

  • Intro and Downloading Assets. We've compiled a list of assets for you to download and get familiar with to prep for your project.
  • Skecthingg and Working the Grid. We'll go from initial sketching to working on the computer and understanding the Apple suggested grid.
  • Choosing Navigation. We'll discuss the importance of intuitive navigation design and uncover best practices.
  • Designing the App. We'll walk you through our final designs and explain how both our functional and design choices work together.

8bd51297

Student Ben Hsu's project.

What You'll Make

We’ll start with a downloadable toolbox of goodies to work with and expand that into the PSD elements necessary to skin a functional app. You’ll get access to the resources and standards we use, and most importantly, you’ll be able to use these assets and standards to style your own custom app screens and complete a simple 2-3 screen app mockup.

Transcripts

1. Class Briefing: - Hi, - everybody. - Hi, - everyone. - Thanks for taking our skill share class. - I'm Sarah Mick, - and I'm Chris Kuczynski, - and we're going to be teaching you guys how to design a weather app. - So there's a lot of a lot of existing precedents on how weather absurd. - Look, - Apple designed a weather app. - It's always on your phone. - A lot of dribble designers have designed weather APS, - and it's really up for interpretation. - Yeah, - you can kind of get as complicated as Apple's, - whether app, - which has a forecast of later on in the day and it also has a forecast of later on in the - week and you can add many cities and they have illustrations at the top and wind and - everything like that. - The fun part about this is it's a singular function, - and there's a lot of different ways that you can choose to display the information right. - So compared to Apple's, - which I'm pointing out up here, - you can also get a simple is just saying it's fucking raining right now, - which we really like this this little app here, - and, - uh, - and if you actually just search on dribble, - if you're familiar, - dribble dot com um, - just search weather app, - and there's pages and pages of examples. - And so so if you're really, - really new to designing, - this has a lot of sort of freedom for you to interpret the concept of whether you can go a - simple as having something like plain text with an icon. - Or if you're not so new to design, - you can get really creative and add in a lot of you I and eso. - We thought this was kind of wood kind of span, - the realm of designers who are taking the course. - And so we've decided that we are going to name the app that we're going to be working on - temp, - and we want to give you guys a lot of room and creativity within. - But we've decided to give you a little toolbox to work on, - um, - to start out with. - So we thought the branding temp was kind of fun as being in its the temperature, - and it's kind of a temporary up. - It's it's ah, - fun, - little explanation on what we're doing. - So what we've done is kind of defined, - uh, - the primary color, - some secondary colors on, - Of course, - the typography Helvetica, - neue is a system font, - which is great. - Um, - it always makes it easier for developers. - And also, - we've included Gotham goes really nice with Helvetica and it's it's gonna be our title fun - . - Yeah, - and you don't necessarily have to use these colors, - in fact, - and what we're about to show you next, - which is a little preview of what we worked on we didn't end up Using the colors is just a - suggestion and a starting off point for some people who may not be so new or who may be a - little bit more new to designing. - Our only suggestion is that you do go ahead and use this logo, - um, - in your app design. - And so we have some continuity and some similarity between everyone's final turn in, - and this is our app that we designed. - So I just want to give you a little teaser about what we came up with will go into depth - later in the course and explain interactions are choices, - navigation, - typography, - all that kind of stuff. - But this is just a quick overview of the way we interpreted what a weather app should look - like, - right. - And we talked in our description for this course that we would be designing and teaching - you how to design 2 to 3 screens, - and we want you to feel comfortable in this. - So if you're quite new, - you can feel like that. - If you are only comfortable designing two screens, - that's fine. - And if you are a little bit more developed in your design and app skills, - then you can want to go ahead and design this money, - screens or even more. - That's also fine. - So, - um, - just just know that if you only want to do to or you want to do five that anything kind of - in between there is totally fine. - And now it's homework time. - You'll notice that we have, - ah, - link of a bunch of links, - actually, - of resource is on the skill share page for you guys to download. - Some of them are the Apple Human Interface guidelines, - as well as just links Teoh icons, - screen caps of common APS for you to look at. - There is just a real wealth of knowledge on the Internet, - especially of existing APS going through the APP store, - just looking at other people's interpretations and getting a feel for what kind of design - elements you'd like to put in Europe. - How other people are using typography and hierarchy some other Greek systems people are - working with and using and how all those things fit into the native experience of using in - Iowa. - Yeah, - and so kind of the best thing that you can do between now and the next class is to download - all of the downloads that we suggested in the resource is section We set you up with just a - couple of things that we've created that will start working with next class and to read. - All of the resource is that we've linked Teoh. - And then, - most importantly, - just start looking at the APS that are on your phone and your favorite APS that you use - less from a user standpoint and maybe more from a design standpoint. - Start thinking of them in terms off. - Why did they do this? - And why would I? - Why would I do this? - And how would I do it differently as a designer, - even if you're an experienced designer, - some of these links are helpful. - Some of these things I didn't come across till, - like, - way later in my designing career. - Eso It's always good to at least go back and just give yourself a refresher. - So, - um, - don't don't pass him over. - Even if even if you're a seasoned designer Yep. - And, - um, - that's pretty much it. - So just make sure that you guys have checked over everything, - And if you want to go ahead and start sketching And if you have some ideas of what you - would like your weather app to look like, - um, - feel free to grab out a pen and paper and, - um, - start sketching up what you want. - And if you want to post those in the project section before the next class, - feel free to do so and will be on their commenting and leaving feedback for everybody and - for the next class will be presenting our sketches and how we're starting to approach our - project. - Yep. - And will also be working with the grid, - which is one of the files that we have for you guys to download in. - The resource is section for this class. - So we will see you next time. - Happy homework. - Yep. - Let's see you guys later. 2. Sketching and the Grid: - Hi, - everybody. - Welcome back to lecture number two and thanks for taking our skill share class. - And today we're gonna be talking about working with the grid and moving from your sketches - and your thoughts on what you have been working on with your weather app and the ideas - you've been having to working with the grid and moving on to the screen. - And still, - I'm gonna pull up some of our preliminary sketches thes they're just a couple that we - pulled up. - And we have this available for you guys to download in. - The resource is section um on. - This is just kind of an example of what kind of the stage that you should yet right now or - that you should be at after this this lecture after you listen to what we have to say thes - air. - Just some of our ideas that we had after looking at weather APS and thinking about the - kinds of things that we wanted to dio And, - um what? - I included a pdf for you guys to check out that you should kind of download and look at - back and forth while you're listening to this lecture that, - um, - it lists that basically that kind of the steps that you should take when you're thinking - about designing it up. - And so it's It talks about creating a list of once and then also a list of things that you - don't want to include in your app. - And so here, - Chris kind of laid out things that he wanted to include. - So at least a three day forecasts. - Do you want to talk about that crest? - Yes. - So So we kind of have our wish list of, - like what we wanted The app. - Um we decided to include it with at least the three day forecasts with chance of, - like, - five day forecast cause that's usually what is available. - T consume. - Uh, - we wanted to always have, - like, - an ever present temperature view, - air temperature, - reading a day in time. - We thought about getting rid of the status bar because the time would be duplicated. - Andi thought it might give us a little more immersive of experience, - and also we contemplated using riel imagery versus like vector art or iconography. - Eso in the sketches, - we were just gonna trying to flesh out the overall feel of what we wanted the navigation to - be and some of the interactions And if you can go to the first. - So we we started looking at ways that we can visualize this data and what we wanted to have - on screen at all times. - So initially, - we we thought there might be, - like a like a a tab, - not a tad, - but like in the now bar, - we'd have a Nikon representing more navigation that's hidden. - Um, - maybe, - like a swipe herbal left to right view of, - like, - different cities, - different locations, - temperature and whether, - um and we just started fleshing out ideas a little further down on the page of, - like, - different ways to represent, - um, - that navigation. - And as we further thought about it, - certain things became obvious. - Like, - Well, - this this is gonna work. - We don't have enough to fill this or our needs are a little different. - Um, - so then it was as we move through, - we start flushing out a little bit more of we have a clear idea of what we want to - represent. - And as our needs kind of expand, - we decide to flush out the navigation based on those needs. - Yeah, - and so basically, - at this point, - you don't have to exactly know what you want to be doing. - The point here is just to sketch everything that you have in mind. - Um, - some of the and sketches that we have here, - the circular, - um, - What we're calling our scrubber with the little dot this is this represents the topical - area where you'll take your finger and eventually you'll seal scan into the future and see - the future time. - This is our our final design that we decided on. - But we started at something completely different started with the kind of traditional what - you think of, - like, - icon with the temperature. - And these were just sort of a couple of pulled designs that we grabbed out of out of the - other ones that we worked on. - But but you just kind of want to keep in mind just kind of sketchy everything that you have - in mind and keep your list of needs and also things that you want to exclude. - I think that's really important to make sure that you have stuff that you want to keep in - and stuff that you don't. - So keep in mind, - do you want to have a really simple app where Do you wanna have a really robust and really - multi featured app? - So another big part of this sketching phase is to get out all those initial ideas and any - kind of visual cliches? - Because usually your first idea is good, - but it it needs more like explanation. - So it's ask Flourish exploration. - That's good. - So it like our initial from our initial design. - We figured out like, - Well, - we want we want to tell a little bit of a different story with with our interactions. - Um, - so it's it's good to flesh out those ideas, - and you might stumble upon something that you never would have thought of in the beginning - . - Unless you can really visualize your ideas on paper. - Okay. - And so So this is just kind of an example of what you guys should be working on right now. - And to help facilitate you working on this, - we have gone Teoh and you guys should all do this to Teoh the iTunes App store. - And you should just go Teoh app storm and then go Teoh the category section good in here to - weather and you will find that there so, - so so many weather, - APS and um, - if if this overwhelms you, - maybe you shouldn't look at them. - Uh, - it overwhelms me, - but some of these a really gorgeous and it might help you to avoid some of the cliches You - could see lots of sons, - lots of, - um blue, - lots of clouds, - lots of cloud and sun icons, - that sort of thing. - Not to say that these air bad. - I think there's tons of amazing design here, - obviously. - But if you want to kind of avoid some of these cliches, - then you want to do something really creative. - You can kind of think to yourself like Okay, - draw that cloud and draw that son, - get it out of your system and then say, - I'm gonna move beyond that and I'm gonna do something totally different. - And keep in mind that you can do something where you know he's really cool, - creative backgrounds, - where it's it's imagery. - Or you can do something with just iconography, - which I think is also really awesome. - And once you're kind of past the sketching phase and mind, - mind you, - this doesn't have to be like today or tomorrow, - kind of the next day or the day after that. - Spend some time working on the sketching you will be moving on Teoh taking these sketches - and starting toe work on the computer. - And then you will be working within the grid that we handed out. - And this is a file called Starter Underscore Grid PSD file that we handed out. - And, - um, - when you turn on the grid lines here for you, - and, - uh, - this is just a really simple file where we included the status bar up at the top with great - background and that included the logo at around about the size that you would want for, - um, - if you want to include, - like, - over here, - a nab are up at the top. - Um And then if you want to take any of the elements, - you can just take it out of your T ham lacks file and just drag anything native over to - here. - Or you can kind of exclude the native stuff or alter the native stuff. - And just start working on designing based on your sketches and using the using Photoshopped - to design it in. - Did you inform so a little bit about the grid? - Uh, - Apple? - Apple's standard is what's called a 44 pixel rhythm on that's broken down into increments - of 11 picks is, - um there are some things that break this. - Like the status bar is only 20 pixels. - Um, - bottom tab are would be the bottom top bar is going down. - It's 49 4 cells. - Yes. - So there's lots of and also the buttons right here that I'm pointing out. - So they're there 29 pixels. - So there are some exceptions. - I'm actually this is Ah, - this is ah, - link. - That is also included in your resource. - Is that kind of brings into question whether or not this 44 pixel rhythm is a great way to - design, - But, - uh, - as of currently, - this is kind of the way all APS are built. - Um, - and so we have included for you guys this Christmas placed this this grid every 22. - What you did 20 pixels, - sometimes 11 11 pixels is good for, - uh, - spacing and such. - But you're not gonna make any, - actually, - elements generally 11 pixels. - All right. - Just good to keep in mind. - Multiples of 11. - Multiple. - Yeah. - And, - um, - I've also added in some, - uh, - vertical. - Yeah, - just some columns here. - Just you can You can break this up or delete these, - quite frankly, - if you want Teoh, - but just to help you keep in mind, - like here's the center point and stuff like that and feel free to work on an altar, - this grid. - But the main thing you want to keep in mind is that the standard minimum tap herbal area is - 44 by 44 pixels. - But that was on the original iPhone. - So now that we're working in retina displays, - that is 88 by 88 pixels, - so we can call him, - uh, - the minimum button area would be 29 points, - like a resolution. - Independent points? - Yeah, - exactly. - So, - um yeah, - and what you'll find easily is if you just If you want to do this, - the easy way is go over to your GeoEye, - um, - palette that we provided and take, - like, - your menu bar and just, - like, - drag it over and drop it in here. - And then you already got this, - like, - set up and you can be like, - OK, - cool. - Hey, - I've got these buttons now. - And if you just want to base your new buttons, - if you want to redraw buttons, - just based them off the sizes. - Um, - that's kind of an easier way to do it on. - And then if you want to do extra reading, - I've also included for you guys, - uh, - links to the book Tap worthy by Josh Clark. - This isn't unfortunately, - not a free download. - This is a book that you would have to buy off of Amazon, - but it's definitely suggested reading. - It's something that a lot of app designers have read. - Um, - and it was written about three years ago now, - but it's kind of the foundation, - um, - on which a lot of stuff is built. - And even though stuff is being updated and everything is changing, - an apse are changing, - and the iPhone itself is changing. - It's all being changed upon that foundation, - so it's still a really good read. - And in addition, - I have a link to this great article, - which was written this year on February, - which talks kind of explains a lot. - What's in tak worthy about the pixel rhythm and how to design on the grid and then also - calls into question a lot of things that are a little bit strange about it, - like why is why is the tap are 49 pixels when it's not, - it's kind of breaking the grid that Apple sets up things like that. - So definitely go into the resource is section and download everything that we have there - because that will help. - You were working with the grid and, - um, - one other good pointer that we have is if you find an app that you really like and you're - wondering about what their choices were one working with their navigation or placement of - buttons or just kind of like how they worked with the grid is to actually go in and take - this screens from that. - And, - um, - just take a screenshot from your computer and, - uh, - take it into Photoshopped like take one of these screens, - open it up in photo shop and, - like, - start gritting it off like turn on your rulers and start greening everything off and look - at how they did it. - And you'll see that there probably following ah, - similar system. - As you can see here like this is skin differently. - But it's following a pretty similar kind of apple. - Uh, - yeah, - like a style you can. - A lot of people will make cell sizes like custom, - but for the most part, - you can stick with 44 pixel rhythm because Apple has done a lot of user testing on, - and it seems to be the most appropriate to fit with the size typography that they're using - . - Um, - so you can you can make a grid, - you could break a grid. - Um, - but I think exploration is good to see how other people have kind of approached the - situation and what sizes they're working with. - Yeah, - and you'll be able to find instances where people do and don't follow this kind of baseline - grid. - And there's instances where it's probably wasn't a good choice. - And there are ones where it seems like a perfectly fine choice on, - and it probably has worked out great. - And so I think it's just one of those cases where it's good to know the rules before you - break them kind of thing. - Um and so, - uh, - yes. - So this is kind of the end of this section. - We have a bunch of re sources, - including, - like our sketches to download this starter grid template right here is included in the - first section, - Um, - and then this link, - as well as, - uh, - the link to download the top worthy book or to buy the top of the book. - Rather, - if you'd like Teoh Eyes also in the resource is section. - It's a good read. - It's well worth purchase price. - And I've both read it. - Um, - as as you as you start. - Ah, - app design for people that are really experienced that the first app I ever made was - completely custom. - I didn't follow any kind of pixel rhythm grid, - and it turned out OK. - The developers were a little cross with me. - It turned out to be a lot more work for them. - But as as we've we've going through Iowa s design, - we've really realized how important bigger it is and how it improves. - Kind of I'm gonna have the troll. - Great. - Reject. - Er, - you can try. - I'm trying to work on. - You have to You have to embrace the group to break the good. - So, - um, - but it does help focus your ideas and communicate the story you want to tell with your app - . - Yeah. - So, - basically, - at this point, - just start. - Start working on your sketches, - get your sketches up to the point where you feel like you're comfortable with the ideas - that you've come up with and then start working in photo shop, - using the grid that we've set up, - using the elements that we've handed over and using the tool locks that we gave you guys - with some of the colors ever released the logo and also using some of the inspiration that - you guys have found on, - um, - looking at other people's APS. - And if you have any questions, - there's there's no turn in for this lecture. - But if you have any questions, - feel free to post those in the project area like if you have, - if you're stuck on something just posted is a project and say, - Hey, - I have a question here. - I'm at this point. - What should I do next and will happen there and start answering for you? - And that's about it. - So we will see you guys next lecture. - Good luck, - everybody. - Thanks, - But by 3. Picking the Best Navigation: Hey, everybody, welcome back to the third section of our skill chair, a lecture series. And today we're gonna be talking about navigation for your app and of setting this up here . This is included in your resource is file. So go ahead and check this out. Um, this is ah, look at different types of navigation. And so, um, we're gonna be talking through this, and basically, you should have kind of jumped in with both feet at this point from going from sketching and then started to work on the grid and starting to design your app a little bit. Not so much with the style and color, but more with functionality and starting to think about what elements you want to include. And now you're probably wondering how you want it to function and certain menu items and how you want your navigation toe work. So there's different categories of navigation, uh, from completely gestural all the way down. So, like a completely 100% apple define native experience. Uh, we'd like to kind of explore and and talk through the different styles of navigation and what you might find that works with Europe or what kind of navigation Pique your interest. Yeah. And so what we did was we basically went to the apple store, The app store, Rather not Apple store, um, store. And we just pulled a couple examples that we thought were good examples of kind of spending . The gimmick here and this 1st 1 is an example of something completely gestural. And so, by dressed real, we mean just flicks, taps, pinches. What's the opposite of a pinch? A 22 finger expansion? Yeah. Do you think? Yeah. Just stop swipe, you know, that sort of thing. And so So rather than tapping stuff and having menus pop open, you're gonna be swiping in swapping and sweeping and stuff like that. And, um, that's how this one works here. Which is you can see swiping, pulling down, pulling up, scrolling up, pinching, double tapping, single tapping stuff like that, um, and then moving down these air kind of interpretations of some native navigation. And so when we say native navigation, we mean things like the tab are so you'll see right down here. These three little dots are things that you can tap on and information will come up. So this is kind of in the place of where a tab bar would be. And so it's kind of an interpretation of a tab bar. And right here, by tapping this, it unfolds More information. So this is another interpretation of the Tabler. Attacks are like a bar. Yeah, kind of a very loose interpretation off. And then over here, you'll see what I mean. People are calling this. What, Like a tray? I call it a trick, like a side trip side tray. Yeah, I called us a side tray. Yeah, eso Here's here's a tray. This is not an apple element, but it's kind of like a widely accepted thing. Um, Apple Apple actually decided, like, No, you shouldn't use these side trays like we don't think it's part of the native experience. But then certain APS like Facebook and Path really kind of owned it and took it into what's now a standard apple experience. Uh, they do decide trade. No, Apple doesn't, but they recognize it as it. Well, the guy who So the guy who made the side trade is the same guy that did the poll to refresh what's there? I forget his name. Sorry, a Google guy who invented the holder of fresh We'll post in the resource is section I'm forgetting his name right now. Bad teachers. But anyway, yeah, So there's things like this that are not apple native that people have come up with that are really great solutions that you can use And, um, that you condone that are not necessarily in the Apple guidelines, but that you're more than welcome to use, like, cool crinkle effects that are obviously when they're animated, they expand, um, and moving down. It's getting a little bit more native, if you will. Although unfortunately, this example if any of you who are taking this class made this app, I apologize. But this is not exactly the best example of a good looking app because you're being bombarded with a lot of information. But it's an example of an app that is using, um, native made of elements rather than like a native experience. Yeah, yeah, native elements. So you'll see. This is the traditional tab are in its in its true state of developer. Just just plopped that in there. And this, um what is this? This I guess Naff bar up here just just plopped that in there. And then, of course, there's the status bar in here, and so they've also included their own little elements here. You would obviously pull up this little menu, and so this is kind of a mishmash of a bunch of different things here. But this definitely has some use of truly native elements. And then, of course, this is Apple's weather app. So this is completely native, although thes. I mean, these are custom. Yeah, it's it's not native as toe like, like straight out of like a T Hand lacks, like G Y something, but it's it's what Apple uses. A Sfar is like transitions, table cell views. But in placement, that's that's what we mean by Native. Yep, exactly. And so this kind of shows you that you can go all the way from making something that is like, for instance, this kind of of you like these table cells and these kind of plus and minus will. The opposite of this minus would be the plus and things like that, and you know, these kind of headers and stuff like that, those buttons all the way to something totally interpreted, like thes floating kind of orbs. And then, of course, I mean ingredient. With that, you're going to be scrolling and flicking, which is totally, totally different now, just kind of a note. Teoh. Different navigational styles or more so like transitions into navigational elements. Some of them could be kind of trendy. The trade was kind of trendy, and now it's It's really become a standard eso it's It's kind of surpassed the trend, but things like folding action, stuff like that. When I was designing the first generation of tender, we actually decided to use an accordion fold to get to the next screen. But we found it to be really time consuming, uh, to use that transition. So we ended up going away from it and going to something in the trade the side tray kind of vein. So it's It's something to take into consideration of how you're gonna present this to your right. And so I included with your resource is this little Pdf like kind of called it a recap of our lecture, but it's kind of ah, list of additional points and have a section here called Convention versus Trend. And so I'm kind of the type of person who I get really excited about these trends. When I see something new like an accordion fold, I think how cool I want to use that. And it sometimes that can get you into trouble. Because just because something is trendy, sometimes those trends burn out really fast and where something like the polder refresh ends up becoming a convention, something else could just has quickly become a trend and then fade away. And then your app is going to either need to take it out or if it leaves it in, it's going to become really silly. And so I think that the most important thing here is so always ask yourself if what you're doing suit your needs. So don't just go chasing after trends because you want to do them or do them in your spare time just to get them out of your system. But you need to ask yourself if what you're doing is the absolute best functional and visual solution for the problem that you're trying to solve, and that's how you'll kind of navigate the area of whether or not you're doing something just because it's a trend or whether or not you're doing something because it's really the best solution in that same vein. Sometimes it's as a designer you wanted designed for other designers. I guess so. If you want it, keep in mind always that you're designing for the end user who could be your parents, your grandparents, the guy down the street that doesn't really know anything about design eso These things are cool, but in the end, it's it's gotta be function over form, right? Like, for instance, this app here. I think it's really beautiful. I haven't actually used this half. I haven't played around with it, so this is a good example. So I'm looking at these screens. Um, I have no idea how this app works. I would have no idea where to click. Just just glancing at, in and in making this mock up. This is the one that I have I have not played around with, but I've had a lot of time looking at it, you know, a solid, like 25 30 minutes of putting it in this presentation and getting ready to talk about it. And even after having eyes on it, I've got no clue as to what I would do with it. So and I am a designer. And so if that gives you any indication as its balance of its beautiful versus How on Earth do I use it, you need to hit somewhere in the middle there. And some of these APS and navigation structures rely on something that's easily discoverable, and they're gonna teach you how to use it the first time through instead of relying on a learned behavior, which is what we call like a native experience. So keep in mind there's there's a definite balance. You can't ask your user to completely learn a nab, salute the new system of navigation and gestures and swiping while while trying to use your app so it needs to be at least discoverable if it's not gonna be native, easily understandable and one last thing. I think it's in Apple's guidelines. Um, if not, I'm gonna basically recap it right here. I just read it. It's basically Apple says, Yet it is. In their guidelines, Apple says that relying on screens and overlays that explain to you how to use the app is not really the best. The best use case. That means that the U. Y. Isn't doing its job. And, uh, Apple relies on a completely discoverable way to use their efforts. That's the Apple experience, and that's the way that they want you to design your abs. Yeah, so so meaning You shouldn't have to make a button that has, like a smiley face on it. And that's your app and and then have the app open up and then have a screen overlay that says When you press the smiley face button, you send an email to your mom that says, Happy birthday, and then that screen overly goes away. So now you know that when you press the smiley face. But you said you send any melt your mom that says Happy birthday like you should know that when it by looking at the U I what the button does intuitively, if that makes sense. So just just keep that in mind as you're designing that, that you're gonna have to rely on people using this and understand, withdrew their having what actions were taken. Basically, let people know what on earth they're doing, so in a subtle way. And remember that using icons always improves usability you don't always have to spell. Okay, so moving on, we're gonna be looking at our screens now, and so this is you'll notice. This looks really different from what we showed you in the first presentation of our finished design. Because this is kind of more of a wire frame state. So this is our app Once you've opened it up, and, um, this is our screen, as you would see it, um, like, let's say it's Saturday, 26 p. M. 78 degrees. Yes. It's just the functional data. Yeah, and the the I guess, interface that the main. The main thing that you would interface? Yep. No, no skinning here, if you will, like no design elements. Really. Um and so we've taken them all away so that we can show you just the functionality. So there's two bits of functionality here. One we wanted you to be able Teoh scrub, if you will, into the future to see three days ahead of time. Um, what the temperature would be on what the weather would be, which we will show you what the weather will be when we get into the design elements and then also, we wanted you to be able to add other cities that you're going to be looking. Yeah. So we decided to go with the trace down navigation traditional upper left that would just initiate that the main screen would slide to the right exactly and revealed different locations. You can always add a new location. And when you add a new location, there's a lot of different ways that you could do this. When we add a new location, we decided to base it off of what Apple does when you add a new location, which is to remove all of the data. So this this, uh, slider would slide to the left kind of talking animation here would slide to the left and then to the right. Sorry, my directions. And then all of this information will come up. And this looks really similar to what Apple's, um, weather app looks like when you add a new city. Except they had this text it says, Add a zip city or state actually above in this sort of thick nah far, and I've just placed that information within the search bar because I think it's a bit more concise. Otherwise, this is a very native experience. When you're doing supplemental things like this, like adding a city, you really want it to be something comfortable for a user. So we've decided to do this as like a motile pop up. It's something that's not gonna confuse the user. It's gonna be really easy. It's something familiar. There's table cells. So it's It's something that's really comfortable for these reviews. Yep, And we figured, since it was good enough for Apple to use, um, for their weather up, like we didn't have any qualms about what they were doing. And this is a really simple screen. So we didn't have anything to change except for to make it match our happened. So we literally just changed the visuals for the top. And that was it, Um, and then moving on Our second bit of functionality is the scrubber, so it's basically like time scrubbing and so what you'll see, and you may wonder how people will know how this functions and what this is. So basically we'll have a bit of sort of like a little bit of a throbbing kind of motion going on here with like a light background, which would be animated kind of faking it right now and then, Um, this is this will be tap herbal and you'll be able to you'll be able Teoh wind this around this circle into the future up to three full days. During that time, there will be transitions of the temperature, the day and the minutes and as well as the background. We'll also change, which will be displaying our weather. So we've also decided Teoh take out the status bar, which Apple usually doesn't recommend. But our rationale for it is that were replicating the same information on the full screen experience. So it's not really necessary to have that bar, um, and it it kind of lends itself. Want to see the finished app and the imagery that we've used in the backgrounds That'll make a little bit more sense, but for right now that we just want to share our reason that reasoning for taking upset as far normally you wouldn't do it. It's basically just to create a bit more of like an immersive and simple experience, and I think that there's also been a little bit more of a push into trend towards removing the status bar. We mean because actually chatted about it for a while. I was really against it. Like we're not gonna do it. We are going to do it. I don't know. I still don't know if it's really good choice. I haven't seen too many APS. Take it out. Some maps do when you're like a full screen, like a Netflix or if you're watching something, So I don't know this. This was kind of a decision we made. We could go either way. Yeah, but this is what we're sticking with. Yeah, and so so, basically for our navigation. Since this section is navigation, we chose that there is the the option for the user. Teoh, basically do something really simple to circle around this circle and see Thursday, Friday, Saturday, and see the temperature in the time at that time. And then also to be able, Teoh, simply tap this and add other cities. And then, when you would like to see these cities, you just have to tap this and select Chicago and you'll be added back onto this page, which will show you the temperature etcetera on those days, and so are in those cities, and that's pretty much the extent of our navigation and that kind of hits. One point that I added in your hand out, which is that we wanted to keep it simple and to do the least kind of the devil least the most minimal navigation, the least navigation you can possibly do to get the job done. So that's exactly why that we picked instead of having like a trade with a three day forecast with little boxes and replicating more numbers this way, you're seeing the information once you could easily access future information on there. There's no messy slide outs from trays or other other U elements to kind of clutter the experience. And so we're gonna be throwing this PSD file for you guys to download. Have he's actually in separate files to download to Just check out um, in the resource is file so you can look at thes and, um and that's about it. And so, once again, if you have questions, um, let us know and you do have projects. Dio. So your projects for this section are to complete your navigation. Um, and Teoh basically have a mock up similar to this one. If you want to have color and you want to start working on your design and your kind of skin. If if you're the kind of person who likes to design while you're wire framing. And while you're thinking about navigation, that's totally fine. Just post basically everything you have so far from sketches and concepts all the way up until whatever you're doing right now posted in the project section. And, um, that is, do I believe by the 20 seconds and we'll be in there to comment on everyone's posts and, um, that's about it, and we will talk to you next time. Next time we'll be showing our completely finished app with all of our design choices and will be explaining why we picked those design choices and basically an entire walk through of everything that we decided on and how the functional in visual work together. So good luck, everybody. We really look forward to seeing your work. Yep, thanks, and we'll talk to you next time. 4. Design Diversity and Our Designs: - our lecture series and today we're gonna be talking about our final design solution for our - app temp, - and this is gonna be kind of two fold. - We're gonna be showing you what? - Our solution is fairly briefly and kind of picking up where we left off from the navigation - lecture. - And then we're gonna be talking a little bit about where you guys should be in terms of - designing and skinning your app at this point. - And so what we're showing you right now is our final solution. - So this is our app as we finished it with, - uh, - all of the screens and all of the possible backgrounds. - And we talked a little bit in the navigation video about how he decided to go with a - photographic solution for our backgrounds. - And you can see here that four different kinds of weather, - rather than saying it's going to be a cloudy day or showing an icon for clouds, - we just decided to show a visual solution so that people could ascertain what kind of - whether it waas by not really even having to read an icon, - a read a word, - but to just sort of get a vibe or just look at an image. - It's a little bit more of an instant. - Instantaneous, - uh, - looks like instantly gratifying. - Yeah, - it adds to the visual experience. - That kind of it puts you in the like, - the immersive experience of being in the Yep. - And, - um, - so really quickly going through these screens here we have the first screen as's faras - functionality. - Ah, - it would pop up using the native apple. - Can we use this current location for you? - And, - um, - you would, - of course, - allow it on. - And for us, - that would be Los Angeles. - And so, - um, - today would be somebody. - It degrees on a Saturday in the evening, - it would be rainy. - Um, - and then if you were to, - for instance here to move forward in time, - um, - a couple of hours, - it would get a little bit cooler, - and it would get a little bit darker. - And I'll show you in just a few seconds. - Some of these transitions when I move over to the Photoshopped files, - uh, - and then what we showed in the wire frames from the navigation video is now built out a - little bit more, - using us our photographs and placed into the phones here, - um, - the tray where you can on cities as well as what it looks like when he out of city. - And then these air just additional screens where there's different cities selected and - difference temperatures as well as different kinds of weather. - And so let's hop over here to the Photoshopped files. - And so one of the things that we were thinking about when we were designing this is if you - were to start to move forward, - for instance, - let's see here to move forward in time from. - But I want to move forward in time from 10 54 PM uh, - and take this little button here and swipe it forward and just move forward a little bit - about an hour. - And we wanted to see what would happen then. - And let's say that the weather is rainy and and you want to see what's gonna happen in - about an hour, - and it's just going to stay rainy. - But it's gonna get a little bit darker, - a little bit more stormy. - What would happen? - And this transition is what would happen. - It's gonna cool down by four degrees, - and it's going to get a little bit darker, - a little bit storm here. - And so these are the sort of transitions that we wanted to work with Is things like this or - for instance, - um, - let's see, - it is, - um, - an overcast day and it's going to brighten up a little bit and turn into a sunny day. - And so, - as you had scrubbed forward, - sort of these intermittent transitions would start to happen and, - um, - appear. - And when you would stop, - it would stop for a moment and then snapped back to your original starting point. - And so we like this kind of look where things are transparent and, - um, - the under layers air showing through and giving these kind of really pretty double exposure - kind of effects. - And that was our solution. - Instead of using colors and solid colors and that sort of thing we want with photographs - and, - um, - also 11 other note. - We went for, - um, - for our navigation. - We decided to style this in a sort of flat style. - There's been a really big trend lately towards styling things extremely flat, - Um, - and moving away from the, - um, - referencing physical objects with skin like those. - Yeah, - really heavy skew. - Morph is um, - it's it's not going completely metro. - Some people, - some people are, - but it's it's finding a balance between heavy, - bubbling and heavy depth and that more of a flat field. - So we just decided to kind of go with something with some depth to it, - but mostly flat, - right? - Yeah, - just simple text here. - The kind of goal was to do simple, - but also to give you a sense of depth. - Um, - especially since this definitely is. - We wanted it to feel below the main screen. - Um, - and then, - of course we have are adding page, - and so this is kind of this is kind of the app. - And as you can see, - we have multiple layers here, - over on the side with our images as well as our, - um, - little components. - And our location bar and our lab are up at the top. - And so what we've done is we've included these PSD files in the resource is so you guys can - jump in here and play around with ease. - Um, - and also, - we've included this JPEG file for you to check out. - Um, - we just laid these out this kind of our final presentation. - You don't have to follow this final presentation. - There's one more short lecture after this that is not a video lecture. - It's just a download showing you what to do to export and present your own files on. - By all means, - you can get as creative as you want when you present it. - And we just wanted to show you guys in a really flat sort of simple way how to show every - screen just so that people get an idea of what the possibilities for the app look like. - Um, - and so that's kind of the first part is us explaining what we came up with and then the - second part is really just to basically let you guys know that there isn't. - There isn't a really great way for us to explain the design part of the APP so way you kind - of have. - This is probably the shortest part of the entire class because we've talked about all of - the branding elements and we talked about the design pieces and we've talked about the - guidelines in the best practices and and yeah, - and what we've done. - But when it comes to actually jumping in and doing it, - it's just what what you decide to dio and what you want to dio and, - um, - and looking at other APS and just opening up Photoshopped and working. - Yeah, - it's it's a lot about looking at other people's designs the way that they've approached - things. - And there's what we're trying to explain is that there's no, - like, - exact right way to skin this. - It's it's more like personal preference. - I guess that this is really is on the usability and the navigation structures you elements - . - Visual design comes in a little later at the very last stage, - and that's why were we're just kind of doing a quick overview here of our solution, - right? - And and if you're kind of stumped on design elements or, - um, - you aren't sure what to work on? - Like I said, - you could go to the APP store and look at other weather APS and use different icons and - play around. - And when I first started working on design, - um, - designing APS, - I felt really like a fish out of water, - and I didn't know what to do when I was working for someone, - and I told them I could design APS and I had no idea how So I took a bunch of screenshots - of other people's APS that I liked. - I e mailed them to myself. - I opened them up in photo shop and just started designing on top of them. - Um, - and that's how I learned to design APS. - Attn First before I read anything. - So, - um, - basically, - there is no wrong way to do this. - And as many people as there are in this course is as many different designs is there going - to be? - So this is the part where we kind of duck out and say, - You guys now have a week, - I guess probably probably about this point. - There's a week left roundabouts for you before final turn in, - um, - and just just go wild and start working on, - um, - making this the coolest thing that you possibly can. - And if you have questions, - post them in the project area. - There's one more little lecture series. - Like I said, - it's just very briefly explaining Teoh, - flatten your files and drop them into iPhones with the couple of resource links. - Um, - and post things in the project section, - if you have questions, - will answer them and, - uh oh, - and one more thing we added, - we added a prize. - What's it called like? - I don't know. - I can't always called for the winner. - You can win this. - You can see what it's called. - May Look what its called winner skills. - Yeah, - I don't You remember what is called you can win this class and if you win, - we just decided to pick someone who is, - like most improved. - So someone basically who hasn't ever done um up designed before who seems like they've done - made big improvements from day one to the final day. - And if you would like Teoh, - we'll chat with you on a Google, - hang out for, - like, - 1/2 an hour to an hour and review your app or review your work or chat with design with you - or whatever. - You want us to dio, - um, - in any way that we can help you out. - Um, - and that's how you win. - And that's your price. - So anyway, - yeah, - so that's that's kind of the end of everything in terms of our guidance. - So, - um, - make sure you download everything and get all the stuff from the next lecture and be - posting in projects, - and that's where we will be seeing you for the rest of the duration of this course we can - would suit. - You made. - Yep. - We're excited. - Thank you guys so much.