UX Series: Designing Web Navigation

2. Housekeeping: - welcome to class. - Before we jump into it, - Let me cover some housekeeping items. - The test will have four units in Unit one. - He will be learning through reading, - enduring somewhere browsing and exploration. - And then, - starting in Unit two, - we will jump into working on a project. - So first will do a competitive review to reinforce some of the concepts from Unit one. - And then we'll move into site mapping, - wire framing and prototyping. - Before you do anything else, - I'd like you to choose the design scenario that you'll be working on. - So I'm giving you some options here. - And then you can either choose from one of thes or you can, - um, - work on your own scenario. - And, - um, - once you do that, - please them. - Introduce yourself in the community section under Q and A. - So tell your classmates which scenario you're working on and a little bit something of - about your background. - You're welcome to work on your own design, - but I do have some guidelines if you want to do that and make sure that um also described - that custom scenario in your project so that other students have enough context to give you - constructive feedback If you are working on your own scenario, - please don't pick a topic that you're familiar with, - either because it's something that you have some work experience with. - But you have access to, - um, - a fair amount of research that can help you make design decisions. - I prefer that you not true something with an e commerce, - and the reason for that is that we won't be really talking about designing a purchasing - workflow, - which is something that would be critical if you were doing a project that some focus on - the commerce exclusively. - So it's OK to have it even newcomers component. - But don't have that be the primary, - um, - port of your scenario. - So I also don't want you to pick something that's so broad that it's going to be too much - to take on in a single class, - but also something that's not so narrow that you won't have enough content toe work with - something like every design of amazon dot com would be a poor choice because it's a huge - website, - it's mostly commerce and them, - it would just would be beyond the scope of this class to try to tackle it. - Drop the class. - I'll be using a teaching scenario which your see here, - and I chose something different from the sample scenarios I'm giving you because I want to - be able to demonstrate the concepts were discussing without leading you too much toward a - specific solution. - As you may already know, - the classes self paced and project based, - all the information and tools you need are posted in the project guide. - And as you complete the assignment, - you will want to post them in the project section for feedback. - Definitely take advantage of the class community as much as you can. - You can learn just as much by looking at other students projects as, - um, - working on your own. - So please give them as much feedback as you can to help your fellow students. - One thing that keep in mind about the project is that this class has actually been refined - since it's first iteration. - So if you look in the M earlier student projects, - you may see references to some assignments that are no longer part of this class. - So now the class is really focused on information architecture, - and I'm not on any kind of EULEX research. - However, - if you are interested in other UX classes. - You're welcome to follow me and skill share, - and I will offer current students specials as I launch other classes. - A couple of their things to mention sculpture has a great referral program. - So if you refer students to a class, - you get discounts and other classes, - and you can actually earn free classes and them in terms of the scope of this class. - Whatever we're using, - a tool to do an assignment. - I either described how to get a free trial for that tool, - or I have a group account created for you, - too. - I'm signing, - too, - if you use the group account. - The one thing to keep in mind is that everybody else will be able to see your work. - So if it's something that you want to keep private, - you won't want to, - uM, - either use a free trial or a full version of this software, - so that's about it for introductions. - Once you have chosen a scenario and introduced yourself, - you'll be ready for the next step 3. IA in Context: - in this unit will start at the very beginning. - So first of all, - let's talk about information. - Architecture versus what? - People with the job. - Title of information architect Dio Um, - So when I'm talking about I A, - I'm talking about this definition from the Information Architecture Institute, - the art and science of organizing and labelling websites. - This is quite a bit narrower than what somebody in an information architecture role at a - company might do. - What you'll find if you look at job descriptions, - for example, - is that I A is used interchangeably with UX design. - So an information architect may be asked to do quite a number of things that are pretty - much equivalent to what a user experience designer would do. - Um, - there's also some gray area where you may see job descriptions that require visual design - in front and development skills as well. - But in practice, - these are very different competencies that really fall outside the core. - You x skills that when you do, - I'm worry about. - So when we're talking about the role of information architect or UX designer, - we're talking about everything from strategy through research. - Um, - I a some interaction design, - which was more focused on behavior and then evaluation or testing as well. - So before I talk a little bit more about I I want to give you some context in terms of - design approaches and philosophies that you might hear about as you learn more about UX in - general and the ones that are listed here from an article by Jared Spool that linked within - your readings that I definitely recommend you explore. - Just so you're familiar with the different approaches that you might take, - um, - within the EULEX process, - um, - in which one you choose may really depend on a lot of factors from what your companies used - to through, - um, - what makes sense for a particular project, - You know, - rather than developing a mindset where you're committed to always using, - it's only a single approach. - Um, - I like to while I'm subscribed to what? - What I call evidence based design and let me talk a little bit about that. - So when I'm talking about evidence based design, - I'm talking about the fact that when I'm working with clients in the real world, - I very strongly recommend that we do at least some research here. - You have quite a range of examples for the type of research you could dio and in general, - the closer you get to an actual users or real users of your system. - More confidence. - You can have that you were really getting it right. - So although this class doesn't focus on user research, - I strongly encourage you to use existing research that you might have access to or to get - feedback on your designs from the people who will be using them. - And the advantage of am having an I A phase instead of jumping straight into visual design - is that you can get this type of feedback early on, - and you can make changes very easily, - as opposed to having already designed and coded something that you have to spend a lot of - time reworking. - I'm in terms of the scope of this class. - We will be doing quite a bare bones process, - so we'll just some competitive research and will rely on design patterns to guy. - Their design. - The approach that will be following really works best for relatively simple designs, - or if the problem that you're trying to self has already been solved by others and you - basically I'm imitating the best practice or something that other people have figured out - how to do so to give you one example of that. - If I were to design and e commerce led fight that was focused on, - um, - shoes, - and I didn't have the time or budget to join a research, - I might take Zappos dot com as my model. - I happen to know that Zappos is a very user centric company, - so I can feel relatively confident that whatever solutions they've come up with are based - on research. - The drawback, - obviously, - is that not everything that's relevant to Zappos is going to be relevant in my specific - context into my specific design problem. - So it's always better to do your own primary research instead of relying on what the - company different is going. - Um, - if you were to do crime, - were research your some examples for how you might validate your I A. - In particular the top two methods. - Just with your card sorting and tree testing really specifically designed to validate a - well, - the rest, - you are more generally applicable to any type of UX design that you might be doing. - Um, - if you're interested in learning more about card sorting and treat testing. - I encourage you to explore optimal workshop dot com, - which has both of those stools available. - But this is not, - ah, - requirement for this class and a longer so next legs, - let's dig into some your concepts. 4. Classification / Organizational Schemes: - So before you are ready to do the competitive review, - you need to understand some basic I A concepts. - First, - oneness, - gasification schemes and all. - These are basically standard ways that you can organize information within your website. - Some of these are probably familiar. - I'm sure that you've seen, - let's say, - a directory organized alphabetically or on the website that showed you that saying use - items that were most popular, - the ones in bold Um, - here are once that you are more likely to encounter an informational websites, - which are the ones that will be, - um, - talking about for the most part in this class, - um, - the fruit chapter in the Rosenfeld Polar bear book that's part of your readings goes into, - um, - quite a bit of depth on all of these. - So definitely, - I'm check that out so that you can master all these specifications schemes before you move - on. - And then, - as an aside on that book, - it really is the definitive text on information architecture. - So it's definitely a worthwhile investment if you're looking for some additional readings. - One thing that's going to really help you internalize some of these concepts is browsing - the web and really looking for examples. - So when you're looking at your favorite news site, - or if you're looking at, - um, - whatever websites you tend to visit frequently start thinking about some of these concepts - and let me talk you through a couple of examples of what I mean. - Any type of new site is usually a good example of multiple organizational schemes. - Here is one who can actually has a bit of a hybrid top navigation man. - Naff seems organized by topic, - but then we have national and global. - That's geography. - We have video, - which is content or media type, - and we have the magazine, - which is something completely different. - Right here we have probably something related to priority. - We have most popular scrolling down the page, - and we have content type again. - Let's look at another one. - This is List Lee, - a website that's designed for making all kinds of lists. - Despite the fact that this is a relatively simple website, - we have four ways to organize information, - crowd drink and curated, - which are both ways of prioritizing, - content, - alphabetical and us, - which is chronology or recency. - Before you go into design patterns, - just go through a few examples and try to pick up the organizational schemes that you see - on websites that you perhaps visit frequently 5. Design Patterns: - next, - let's talk about design patterns. - Send patterns are really just visual templates that have become standardized over time and - that have been used over and over again so that users have become familiar with them. - Tabbed navigation is one example that I'm sure you've seen hundreds of times before. - Here is some other examples, - and the key benefit of using patterns is that your users will already know how they work, - so they won't really be distracted from what it is they're trying to accomplish by trying - to figure out how to interface works. - I will show you some examples in a minute, - and I really encourage you to explore some of the design pattern libraries that you can - find online or just browse around and look for design patterns on websites that you're - familiar with. - For those of you who come from a visual design background, - thinking about patterns may seem somewhat limiting. - The thing to keep in mind about I in general is that the focus of your creativity should - really be in problem solving and then presenting this simplest and most transparent - experience to the user. - So most of the time, - that doesn't mean trying to invent a completely new interface. - We're trying to create a U Y that's going to really, - well, - people. - It's really about making it so easy for the user to complete their task that they don't - even notice the interface. - And that's one of the key points I'd like you to take away from this class. - You really shouldn't be breaking design conventions unless you have a very, - very good reason. - One of your readings specifically focuses on responsive design patterns, - and I've included it because responsive design has very quickly become somewhat of a - standard for informational website design, - and you'll see that many new patterns are emerging from it. - For those of you not familiar with responsive design, - it's basically the idea of designing layouts that will automatically adjust to the size of - your device, - whether that's your desktop laptop tablet smartphone, - etcetera. - One of the approaches that's related to Responsive is mobile first design, - and the idea here is that starting your design with the device that has the most - constraints. - So let's say a small screen on a smartphone is going to lead you to a better design. - Overall, - I personally find it that isn't always the case, - and the approach that I like a lot better is content first. - Which means thinking about the type of information you're trying to deliver and what you're - trying to communicate first. - And really basing your design choices on that better than choosing an interface first or a - design pattern first and then trying to fit your content into that. - So a couple of examples to get you started with your design pattern exploration. - This is a desktop version of Pinterest, - and it's actually borrowing a mobile design pattern right here. - This is what you're reading calls the toggle, - and the way you'll see it implemented most frequently is that you'll have a regular top - navigation on the desktop, - which will shrink into this kind of toggle on smaller screens. - I think this is one of the drawbacks of using mobile patterns on the desktop, - and that the navigation may be hidden from users who may not be savvy enough to be familiar - with this design pattern. - Yet well, - I think that you need to be thinking responsibly, - and you should be thinking about mobile constraints. - You should also consider the differences between platforms and how does will affect your - users and in the context of the device that they're using. - So you may be approaching a desktop differently from a mobile device. - While we're looking at Pinterest, - you can see that it's also using this mega drop down navigation pattern. - Then the mega drop down is just a menu with multiple combs in this case it so it has our - links. - In other cases, - it may have images. - Additional information, - etcetera, - Lega dropped on is one of the most popular navigation designed patterns that you'll see out - 30 day. - Almost every new redesign takes advantage of this, - and you can see why it simply gives you more room to communicate your navigation hierarchy - than a single level menu. - My next example is WWF, - and for this one I'm going to walk you through the website I like to use. - This isn't example, - because in some ways it is an unusual design, - and it has some features and patterns that work really well, - and a couple of that I think, - are not quite as effective looking at this and taking it from the top. - I see my mega now right here for my main navigation, - and I see a utility now of which again is just a navigation that has casks are action - oriented items going down The home page here is a carousel slider and scrolling down. - Further. - I see some lists I see a a couple of social media clusters, - and I see it really basic conventional footer on this page. - Let's dig a little deeper, - going to go into the species menu and let's take a look at the giant panda On this page, - I see a few other interface examples. - This species item, - which based on previous experience, - I would believe, - would show me a set of smaller images of the different species where I could access the - other species. - So I'm going to click on that and it's actually doing something different. - It's taking me to another page that's about species. - And as I scroll down, - this is kind of what I was expecting to see. - Normally, - when I see that and a good I could, - I'm expecting some kind of great interface to follow. - So that's one example where perhaps the interface doesn't quite meet expectations. - I'm going to go back to the giant panda page down here. - I see another interface and based on what I'm used to. - What I'm thinking is that as I click on one of these items, - this image will be replaced with some other content so that I can scroll through these - different items. - Not sure why there is a down arrow here. - That perhaps is a little confusing. - So let's see what happens. - Okay, - so that wasn't really what I expected. - I haven't seen this kind of interface on any other website. - But now it makes sense that there was a down arrow because it actually scrolled your sub - section of the page. - Although this didn't really meet my expectations initially, - now that I've interacted, - whether it actually doesn't make sense, - there's something else that happened. - At this point, - this sub navigation has become a sticking up. - Sticking of is just a top navigation that sticks set up of the page. - So as you scroll, - the other content moves up and down, - but the navigation stays in place. - That's also slightly unusual. - Usually when you have a sticking up, - it's the main navigation. - But this seems to work. - OK, - I'm curious what's going to happen when I scroll up because I'm in the bottom sections, - so I have to scroll all the way up, - and then I'm back to the default view, - so a little bit unusual. - They're breaking some conventions here, - but relatively easy to learn. - So that's another thing to think about. - If you're breaking conventions, - are you making your new interface easy to use? - Or it's going to confuse users to the point that they can't complete whatever cask they're - trying to complete, - or they can't can't find the information that they came for. - And this is kind of how I would like you to, - um, - start browsing the Web As you're encountering websites throughout your day. - Take a few minutes to think through what design patterns they're using, - what they're trying to accomplish. - And when you see something new, - you may want Joe in a bookmark it or keep it in the back of your mind for the future, - for when you might want to use something in your something like that for when you might - want to use something similar in your design. - There is no formal assignment for this unit, - but your basic task should be to really understand the range of design patterns that are - out there 6. Competitive Review: - Welcome back. - I'm assuming that by now you've chosen a scenario. - If you have not, - please do so before you begin your competitive review in a competitive review, - we're going to focus on design best practices. - So the first thing you want to do is choose at least three websites that are the - competitors of the company whose website you're designing. - Try to trees sites that are different from each other, - and the approach heard a design solutions that were chosen. - So don't pick three websites that use exactly the same design patterns are the same - classifications schemes in my teaching soon there, - um, - redesigning a website for a small language school. - So if I chose Berlitz as one of the sites to analyzing my competitive review, - I would also want to find the smaller local school that has an online presence. - Once you've chosen the sights, - I'd like you to take a systematic approach and look at the classifications schemes, - the design patterns and the target audiences for each site. - If you discover something new that you haven't read about, - or I haven't mentioned to just do your best to describe it or use a screenshot to - illustrate and If you want to take this assignment a step further, - you may want to consider looking at some what I'm calling aspirational examples, - and this could be sites in a different domain, - but sites that are very well designed from your perspective or represent some kind of best - practice. - So to give you an example, - if I worked to include ratings and reviews in my teaching scenario, - I would look at a website like Trip Advisor. - I don't really care that it's a travel website, - another language website. - I'm just looking at the kind of state of the art for design patterns for reviews to give - you some idea of how to approach the competitive review. - Let me walk you through the teaching scenario, - which, - as you already know, - is the language school. - I've chosen three websites to review. - The Boston Language Institute is the closest to the scenario I'm working on. - But as I dug into that, - I saw that the design looked relatively outdated, - so I doubt I will learn a lot from it in terms of visual design. - But I might learn something about the content, - so I'm still including it because it's the closest in scope to what I'm trying to - accomplish with my site. - If you look at Language International the second example here, - you can see that it's by contrast, - quite elaborate. - It's a much more modern and up to date design, - so I think I'm going t o get more information from that one. - This is an example of the type of annotations that I'd like you to make on your screen - shots. - If you don't have ah, - tool that you already use for Screenshots, - I recommend awesome screenshots. - It's a browser plug in that works really well and allows you to include annotations. - Or you can just take the screenshot in your browser and then you something like PowerPoint - or keynote to annotate, - which is what I've done here. - The other thing I'd like it to include in the competitive reviewer cross reference tables - like this one you can use whatever software tool makes sense to you. - You can use word, - power point, - even excel. - It doesn't really matter. - Just adapt this template toe work for you. - I listed a couple of sample justification schemes, - but your own list should be longer. - Based on what you've learned so far. - Once you've done this. - You have some good information about classifications schemes, - and you can move on to design patterns. - In my language. - International example. - I see quite a number of design patterns. - Carousel or um, - slider is right here. - That's when you definitely want to become familiar with, - Um, - there is a basic drop down menu for the main navigation, - and there is a drop down search on the right over here as you join this. - Don't forget about relatively simple design patterns like a list these air quite useful. - So don't just look at the fancy or visual ones. - Here is my table for the design patterns. - As you can see, - I didn't just make a simple yes or no checklist for all of these. - So when it made sense, - I added notes. - Two of my sites had an extended multi column sorter, - which you'll see um, - on recently designed sites quite a bit. - And that's just the footer that repeats some of the information from the main navigation. - So energy enough that you and then refer to this and remember how it was implemented on the - original website. - Finally, - here is an inspirational example. - One of the patterns that has become more popular recently is a drawer navigation. - You can see it right here. - And the way this works is that when the user clicks on a heading, - the rest of the contents slides down so that the navigation data doesn't obscure that body - of the content. - This is a variation of the mega drop them, - which is, - Ah, - mostly column menu. - Okay, - back to the competitive review. - Once you have your annotated screenshots and summary tables, - you're ready to move on to target audience definition. - To some degree, - you might be guessing who did audiences for a specific site. - But most of the time it's relatively clear, - either because there's navigation that's targeted at a specific type of user. - Are you can in first something about the audience by the type of content that you're seeing - in my example here I have differences in age differences in location, - nationality, - etcetera. - So these sites have very different target audiences for your reviews. - Lots of times you may see differences in role. - Such a student's versus alumni. - For a college, - we're something like personal versus business banking on a banking site. - Other times you may see that most of the content might be targeted at a single audience, - but there is also a secondary audience, - As you can see here. - Once I looked at the competition, - I hounded on my own target audience, - and it's different from the two bigger sites that you see here. - I'm trying to appeal to a local audience of adults, - and I did include both native English speakers and es el speakers. - Eso speakers were going to be a secondary audience because they're likely to be smaller. - And when you're doing this on your own, - don't worry about being too specific. - Definitely define your target audience as narrowly as possible. - Um, - and it's likely that you're trying to design for too many years there types not too few. - So don't be afraid to really focus your, - um, - your audience to something relatively narrow. - If this was a real project at this point, - I would take this a step further, - and I would create either user profiles or personas, - which, - if you're not familiar with them, - are basically user archetypes or compose. - It's and they include information like goals, - needs and behaviors. - And I would use these personas to focus my design and make sure that I don't end up - designing for everybody and pleasing nobody percent of creation is another big topic that's - out of scope of this class. - But it's something you may think about learning in the future. - Once you've completed your competitive review, - you're ready to take the next step and start thinking about organizing content. 7. Content Inventory/Content Audit: - Welcome back. - Now we're at the point where we have enough information to start creating R I. - A. - That's part of that. - We're going to start thinking about the types of navigation that we want to allow for. - For example, - um, - secondary navigation utility Now footer, - etcetera, - and I will talk about those when we talk about site mapping. - But before we get there, - you really have to understand your site content. - That's where the content inventory and the affinity diagrams will come in. - So first will come back the content, - inventory or content audit. - If you're starting from scratch with a new design, - this gun, - simply be a list of the content you want to include in your site. - This is an example from my language school scenario, - and you can see it's just a list of the types of information that I'm going to include in - the site. - If you're doing a redesign where you'll be reusing content, - you should start with a spreadsheet that will hold information about your current content - and your current information architecture, - and it might look something like this. - It's going to be pretty rare that you're actually starting from scratch with your content, - so it's more likely that you'll have an existing site map or a content audit toe work from - . - And as you continue to the process, - the spreadsheet is going to, - uh, - um kind of morph into an updated site map that could be used to implement union design as - the area on a project. - You really have to get to know the content so often. - You may spend a lot of time on this initial audit browsing through the existing site, - getting to know the information, - etcetera. - One thing to note about this is that if you're redesigning an existing site, - you want to keep track of where this content currently lives. - So definitely keep track of the current girls to help the, - um, - fund managers move the content to the new website in terms of, - um, - what type of content should be included in your new or redesigned site. - You really want to use the existing knowledge that you've gathered up to that point to make - sure that your content is comprehensive. - Definitely try to think about for your target audience is and what their key needs are. - If you're working on a redesign, - you may actually end up removing content that's no longer relevant with many sites. - As time goes on, - content gets added without really much fell it. - So as you're going through this process, - you may also be identifying things that don't really belong there. - Another thing you'll be joining is really trying to decide which content is critical in - primary and should be perhaps featured in your own navigation, - Let's say, - or your home page and then contents that secondary that you're going Teoh perhaps relegate - to, - ah, - footer or less prominent location before we move on to affinity diagramming. - I want to jump into an example, - and this is an example of a site that I think was built without very much thought in terms - of the type of content that would meet user needs. - So my initial guests, - as I start looking at this website, - is that the users air coming here with a couple of key tasks in mind. - They're probably they're trying to make a reservation, - or perhaps they want to learn more about a hotel. - And as I look at this home page, - I'm actually not seeing those tests being prominently displayed. - I see this search on the left here, - but it just doesn't look user friendly. - Looks very cramped, - and it's really secondary to these main areas. - And what I see in these Maynor areas, - there are lots of special offers. - I see a couple of dogs. - I'm not sure what those have to do with hotels, - and, - um, - I'm really just seeing marketing information. - If I were to guess, - what's happened behind the scenes is that marketing really has priority when it comes to - managing this site, - and they're just pushing whatever content makes sense to them, - and it works for them, - but it doesn't really necessarily work for the users as I scroll down here. - Now I see that there is a number of hotel types and all these links here. - To me, - what's really missing is the hotels themselves. - How do I look up information about a specific hotel? - Perhaps I'm going to a city, - and I really want to ah, - make a reservation at a Howard Johnson. - So I see this little location cab, - which makes anything OK, - maybe that's it. - And then once I'm here, - it looks like this is kind of what I'm looking for. - But again, - I'm not very impressed with this layout, - I can see that it really wasn't a priority during designed to make this information - accessible. - It also happens that I am in the United States, - so I would really expect to see the United States hotels featured first, - and I have to scroll scroll all the way down the page to actually see them. - So think back to armed previous unit when we were talking about this idea of content first - . - Better than thinking about what your cells department wants to do. - What your marketing department wants to dio really start thinking about the most critical - content first. - So after searching around finally, - I can click on location here and then it's going to show me hotels. - In reality, - I was just looking to see this page right away, - and it's taken me way too long to get to it. - If the designers of the site had taken the time to do a content inventory and to really - think about the user needs, - they would have realized that this was the information that needed to be front and center - and not something that's buried behind all of this information. - That's really of interest. - Very few users 8. Affinity Diagramming: - Once you have your content audit, - you can create an affinity diagram. - Affinity. - Diagramming is a very simple technique, - but it's very useful to have in your toolbox. - You can use it for site mapping. - You can use it to brainstorm. - You can use it to prioritise requirements, - etcetera. - The nice thing about it is that you can use it by yourself, - and you can also use it in a group, - whether those air stakeholders or your design team. - What you're looking at right now are examples of affinity diagrams. - Um, - all I did is, - um, - run a Google search, - and these examples came up, - and I suggest that you do the same for many of these techniques. - It's very easy to find a variety of examples if you really need some detail about how they - should look when you're done. - If you're familiar with site maps, - what may strike you is that some of these images look like visual sight mets, - and there's actually a good reason for that. - What's going to happen is that as you're doing your affinity diagram, - you'll begin grouping information, - and by the end you'll have addressed site map that you're going to move to slick plan or - something else on your desktop. - The process of affinity diagramming works something like this. - Get some sticky notes. - I recommend extra sticky notes. - You can buy those at Staples or OfficeMax and start putting items from your content - inventory onto the stickies. - One item for sticky. - As you're doing that, - you will soon begin thinking about which items go together. - So continue the process until you have something that looks like the image on the right. - Here you begin with your random ideas or in your case items from your content inventory. - And by the end, - do you have something that's organized into groups. - The nice thing about doing an affinity diagram on real sticky notes is that it's very - flexible, - so it gives you a chance to explore multiple options and really experiment to see what's - going toe work for your scenario. - If you're using software, - you're more likely to have kind of lock yourself into an approach, - and it's much easier to start over or to look at, - um, - alternatives that might actually work better. - This is the state at which you'll be making some design decisions about your I A. - You'll decide what your main organizational scheme or classifications scheme should be for - most informational sites, - this is usually some kind of topical organization, - and you often find that you might need some kind of secondary justification as well. - And that might be by audience, - by task by geography, - etcetera. - If you've completed your competitive review, - you should have a few ideas already based on what you saw in your competitive websites. - Your second. - Their investigations are usually going to contain a subset of items from your main - navigation, - so it's OK to have the same content in multiple places so easy you just put it in multiple - stickies. - But you don't want to over rely on repetition to help make your content findable. - If you find that you have ah, - single category with a lot of items in it, - you will probably want to break that up into sub categories. - There is no rule of thumb for how long and then you should be. - But the best advice I can give you is that human short term memory has a limit, - and that limit is seven plus or minus two items, - so that's a good ballpark to have in mind for any given, - subcategory, - you do want to keep your eye relatively balanced, - so if you find that you have a few categories with five items in them and one would, - let's say 30 that's going to be a problem. - It means that you have to make some decisions about whether that large category is actually - perhaps a secondary navigation and needs to be broken up. - As you were doing your competitive review, - you probably noticed that there are some navigation types that almost every website has, - so it's very likely that you will want to have them as well. - One of these is utility nous, - and this year's really is navigation that appears in the upper right corner of the page. - And what you often find is that there are tasks such as registration or log in or site - search that normally are found in within that navigation. - The other one is the footer, - which normally contains something like an about page, - a conduct page and some legal or privacy information. - This is so standard at this point that I wouldn't recommend really deviating from it at all - . - Your users have been trained by looking on hundreds of websites to look for certain - information in certain places, - so take advantage of that. - You may choose to have an extended footer in your wire frames, - which is a more recent trend, - and a footer like that usually include some duplicate information from your main navigation - . - But this isn't really something that you need to worry about until we get to the wire - frames. - So for now, - just focus on the core of your footer. 9. Site Mapping: - next step in their processes to create a site map. - We'll work in two types of site maps, - the visual one than in that line one. - And unless your website is very small in scope, - you'll find it helpful to create both kinds of site maps. - Here are some examples of site maps They really do come in all shapes and sizes, - but what you often sees color coding for various levels in the hierarchy and various page - types. - You can do a Google image search and see a number of examples, - and lots of tools have a built in site map component, - including visual balsamic. - Um, - the Grateful etcetera. - I'm going to recommend that you use slick plan, - for which I have a group account that everybody can use, - but as all waste your feet to use the tool of your choice. - Doing a visual sight. - Matt might really just mean transferring what you have on your stickies from the affinity - diagram into an online tool and then refining it and adding you information. - If you use slick plans, - you'll notice that it allows you to create a utility and footer knave out of the box. - Here is my Util. - Eating off slick plan is relatively simple to use, - but like everything else, - you have to play around with it for a bit to really get the hang of it. - And it does include sharing capabilities, - which, - if you're working with a team, - can be really helpful visual site maps. - They're very useful for showing the overall structure of your site and information. - They're great if you're working with a team to make sure that everybody is on the same page - and understands the overall hierarchy. - But on the other hand, - did you have some limitations? - If you have a very large site, - you probably won't be able to show every single page in your site map. - It's just going to become too unwieldy in a visual format. - There also isn't very much room for detail in most visual sight MIPS. - So it's really just an at a glance view what you can dio in a visual sight mint that you - can't do and let's say a spreadsheet is that you can color code information and you can - designate page types. - So you concede that slick plan has some built in page types here. - Some of these or hard coded, - but you can enter your own what they're calling portal here. - I normally call a landing page some a category page, - but there is no industry standard, - so this will do just fine. - Once you're confident that you have your visual sight mint mill down, - it's time to create the outline. - Incitement. - An outline site map is really just a spreadsheet that has more information about the - individual pages, - so you can see that I'm showing the, - um, - category and hierarchy structure here. - But I'm also showing all these other columns with additional information. - One thing that might strike you about this is that it's really just the content inventory - or a content out it that's been rearranged. - So when every design project this might be all you're doing, - you're just taking your existing audit and updating it, - footing you information architecture. - The type of page column is going to eventually line up with your wire frame templates. - It's likely that you'll end up with a home page kind of landing page, - a page to show narrative content, - etcetera. - If you have multiple navigations, - I recommend that you include them in different cabs in your spreadsheet to make them easier - to manage a few reasons. - You may want to have an outline site map in addition to your visual. - One. - If you have a very large website, - you'll probably have other people working on the content. - That's a copywriter or content strategist, - So it's going to be helpful to have a detailed spreadsheet that everybody can use going - forward, - Your deft. - You might also use it to implement your eye, - and your marketing department might use it for things like S E O Page titles and friendly - Where ALS So it conservatism multipurpose document that could be used by multi well - stakeholders. - I do have the spreadsheet available as a download, - so feel free to grab it and use it as your initial template. - This concludes our site mapping segment, - and we're finally ready to start wire framing. 10. Design Concepts (Gestalt): - Welcome back. - Before we talk about laying out information on a page, - I went to cover a few design concepts that you might find helpful. - I'm going to talk about gestalt hashtag principles or basic rules about how humans perceive - in process visual information and how we infer relationships between objects. - Because this perception happens automatically, - some of this may seem self evident, - but explicitly thinking about in applying these principles is going to help you make - decisions, - and you're as you're creating your wire frames. - There is a link to an article on each of these principles in your readings, - and I have a recommend that you take the time to do that. - But let me describe each of them briefly to give you some introductory information. - First, - I'll talk about figure. - Ground figure. - Ground is more critical when you're doing graphic designer visual design, - but it's still useful to understand for wire framing. - The basic principle is the human scent of perceive objects, - either as being part of the foreground nor the background in this example. - If you look at these objects, - you will unfair that there's great bigger objects, - this part of the background and the smaller colorful objects or part of the foreground. - Just seeing just happens automatically. - There is no rational reason why it should be so. - So this is something you may want to consider when you're evaluating designs where, - for example, - the background is over emphasized and becomes distracting, - or it's not clear what to focus on. - Here's an example from the reading itself. - Even though there was a photo in the background is very clear that the body text is the - figure here, - and the photo is the ground. - Your I naturally goes to the text to begin reading better than focusing on the background - image next. - This similarity similarity is exactly what you may assume, - objects that are similar in some way or perceived as being related. - There are multiple ways of applying this so you can look at these objects and say that - summer related by shape, - some by size and some by color. - And you can definitely use this in your wire France to your advantage. - But be careful that you're not implying a similarity that isn't there in this example, - from Etc. - It's very clear that the designers took pains to show the relationship between these - individual components and it's critical because they're showing a number of very different - looking photos, - and they want to unify them visually because the components are all the same shape and size - and are laid out exactly the same. - There is no doubt what goes together. - So even when the individual images are very different, - overall effect is of a single shape moving on proximity, - uniform connectedness and good continuation extremities. - Another obvious one. - But it's useful if you need to show a relationship between items that perhaps differ in - other ways in this example, - the squares and the circle or close to each other so they appear related, - even though they differ in shape and color here. - They also happen to be in closed in this bigger shape, - and that's uniform connectedness. - You're seeing these items as being inside another shape. - Finally, - items that are aligned are going to also appear related, - and that's what I'm calling good continuation. - The nice thing about alignment is that it's more subtle than let's say, - drawing thick lines everywhere so you can put it to good use without making the design look - too busy. - In this example, - simply aligning these two squares makes them look related. - You don't have to do anything else. - You don't have to enclose them, - etcetera. - And one of the things one of the decisions that you have to make in your wire frames is you - know, - just how much is enough? - Do you want to apply multiple principles, - or is it enough to be more subtle? - So let's take a look at an example from the Facebook feed. - The stories that you might see in your news feed could be very different in terms of topic - and even in the amount of space they take up on the page. - Some have images. - Some don't the logo's air, - usually different, - etcetera. - And yet, - because the stories are presented in a single column with multiple common alignments, - you can Clearly she were. - One story ends and another begins. - We have uniform connectedness. - It's stories and closed by a line over here, - and we have good continuation. - Each piece of information is a line so you can see that all of these air left aligned all - of these functions or top aligned etcetera. - At first glance, - this Facebook design doesn't look that elaborate. - It's not using a lot of different colors in a lot of shapes, - but it relies very heavily on these principles. - Next up closure. - This is another one that you can use to avoid being too heavy handed in your designs, - and it's the idea that your mind can fill in information based on partial data. - Even though this is just the bracket and it does not fully enclosed these two shapes, - it's enough to imply some kind of grouping. - I didn't have to draw a whole rectangle to enclose thes shape, - so I had to do was suggest the shape of a rectangle in your mind. - Filled in the rest, - you can see closure. - In this example. - This is again very much a minimalist design. - It's using a single collar and shades of gray, - and yet you can see how drawing the single faint line under the headers has enclosed thes - blocks and connected. - These elements is very clear that there are three different components on this page. - Same thing over here with this tiny line next to these headings. - The graphical treatments in this designer very, - very subtle and yet the hierarchy is very, - very clear, - and this is something that you want to aim for with your wire frames finally come and fate - common. - Fate is less relevant to a, - but it's something to think about if you ever working with animation or transitions in an - application. - And this is the idea that items that move in the same direction are seen seen a similar. - So if two of these circles began to move in this direction together, - you would perceive a relationship even if it was a green circle in a pink circle, - as opposed to the two pink circles over here. - One thing you may have noticed as we went for some of these examples is that most well - designed Web pages can be analysed in terms of many of these principles. - And often what's going to make your design really seamless and elegant is coming up with a - unified whole where these principles air working together and reinforcing each other. - So when you work you in your own designs, - make sure that your gestalt principles are working together to communicate one vision for - what's related and what's in what you're trying to prioritize on the page. - So we're almost ready to start wire framing, - but I want to briefly talk about the concept the fidelity. - If you're a visual designer, - you're probably used to working at very high fidelity. - Really slick Photoshopped mock ups, - etcetera. - What fidelity is referring to is how closely or delivery bubbles approximate the final - product. - A sketch is going to be very low fidelity, - and as you continue through a design process, - it's likely that you're going to get closer and closer to something that's pixel perfect or - something that behaves just like the final product. - And that's where you're getting too high. - Fidelity Fidelity is a useful concept to explain to your stakeholders, - because often they will not be used to working at Lower Fidelity's. - The nice thing about starting at Low Fidelity is that you don't have to argue over things - like branding or color palettes, - and you can focus on what you're trying to communicate. - An accomplished A design you might also find is that as your stakeholders get used to - working at lower fidelity, - you will get more useful feedback because you're showing something that doesn't look us - finished. - Looks easy to change. - And that's really why we work at Low Fidelity. - Why you might start with a sketch. - It only takes a few minutes to sketch a few concepts. - It may take hours or days to revise the final prototype, - so my recommendation to you is to always start at low Fidelity and men move toward higher - fidelity as you refine your solution. - And that's what we're going to do in our wire frames coming up next. 11. Sketching, Wireframing & Prototyping Basics: - Welcome back. - We're finally at the point where we're going to put pen to paper and start creating some - layouts for your design. - We'll start with a quick sketching exercise, - and then we'll move on to wire framing and prototyping. - The exercise I'd like you to go through is called thumbnail Sketching. - This template is available for download from your project, - so please downloaded, - and you may want to print out a few copies to practice on. - And while you're going to do is you're going to create a set of thumbnail sketches. - The intent here is to create a number of solutions to your design problems very quickly and - without trying to be perfect at this point. - So the thing to remember here is that you're trying to create different versions of the - same page, - so you're looking to create several possible designs for your home page. - You're not creating multiple pages in your sketches. - You can do that at a later point if you wish. - But the point of this exercise is to look at different versions of the same page. - Once you've gone through this exercise, - either choose one approach or perhaps you end up combining a couple. - You don't have to be able to draw well to Judas. - Consider. - Can you stick figures? - You can be really, - really rough. - Don't really worry about the quality of these drawings. - Just worry about generating quantity over quality. - Why we're framing. - Once you have your sketches and you've picked an approach, - you're ready to create a wire frame for this class. - I'd like you to wire frame home page and a navigation at minimum. - If you want to go beyond that, - you're welcome to. - Here is an example from my teaching scenario where I have a basic home page wire frame and - I have I'm showing one of the navigation menus to create your prototype. - Later, - you will want to have a wire frame for each state of the navigation. - So in this case, - I would have another wire frame that showed the classes have in another one for about us - etcetera. - When you put together your prototype, - you'll be linking up these pages to give the illusion of interactivity. - Well, - in reality, - you're just loading a new page that looks different. - This doesn't make sense right now. - Don't worry about it. - The seller, - if I walk through, - will show you an example of what I mean in terms of where framing technique. - I wanted to talk to you about the wire framing color palette, - which is going to be pretty limited. - As you can see, - the reason you should be limiting yourself at this point is that you want to focus on the - layup in the functionality, - not the final look and feel, - not the colors, - not the branding. - You can probably guess that this is also taking advantage of some basic conventions for - example, - amusing red for errors blue for links. - These patterns air so ingrained that you don't want to change these at the wire frame stage - really want to take advantage of them. - Another thing you won't be using at this stage is custom typography, - but what you can use It is basic text, - former thing like size bolding, - etcetera. - A first creating these wire frames. - I'm recommending that you use balsamic, - but like what the other delivery bubbles, - you're free to use something else if you're used to it. - Balsamic is based around the U I library of components. - You can see a few examples here. - Each of those components has a control panel that will show up when you select the - component. - So spend some time exploring all of these components. - Before you try to build something custom most of the time, - you'll be able to find what you need in their library. - If you're building something more complicated, - you can create it yourself using basic elements like geometric shapes. - Text and I comes with Charles, - part of the library. - You can also bring in custom screenshots, - so there is a photo or something else that you've designed elsewhere that you want to - include within balsamic. - You can import it and have it become part of your project. - Assets on the about stomach is pretty quick to learn. - It does have a variety of components built in, - so it's going to take you a little bit of time to learn what's available in how to use it. - There are a couple other balsamic features that I wanted to call out. - One is skins, - and this is related to the fidelity of your wire frames. - There is a sketch skin, - and there is a wire frame skin, - and you can see the one on the left. - There's a lot rougher. - It's more like a sketch and the one on the right. - It's something that looks more polished and that's mate might be something that you share - with your stakeholders. - The other feature is what they're calling symbols, - but they're basically custom you. - I components. - What you can do is you can group a set of items together, - and then you can convert them to a symbol and have them become accustomed component that - you can reuse from page to page. - Since you know that you'll be creating a prototype once you have your default home page - view, - you may actually want to convert that into a symbol, - and that will basically be your background template over the your navigation over. - Finally, - both stomach also allows you to export to clickable pdf. - So this is one way to create a very simple prototype without even using another tool. - So let's talk about prototyping on the left. - Here you see the expert options for exporting to a pdf for just the work you have to create - length in your wire frames that go from page to page for balsamic to be able to create - those lengths when it generates the PDS. - The basic principle behind this is exactly the same as solidified. - The only difference is that would solidify. - You can actually share a prototype through a web link, - so you can potentially get feedback on it from others or even run it through his ability - test. - I'm redder than trying to explain this in detail. - I'm going to just refer you to the solidify walk through when I show you how the interface - works and how you create these hot links. - So this brings us to the end of our class. - I hope that you arm got some value out of it. - If you are looking for feedback, - the federally post things in your project and get feedback from your classmates. - And if I'm available, - I will also give you feedback. - Thanks for joining me and happy I am. 12. Balsamiq Walkthrough: - Welcome to the AMBO stomach demo. - I'm going to be using the M desktop version off the stomach, - but the online version is, - um, - almost the same, - so you shouldn't see a lot of differences. - So let me just walk you through some, - um, - tips and some tricks that I've I've learned that I think will be useful to you. - So let me just walk you through what I've done so far. - So I have my canvas, - which is basically going to be my, - um my browser window. - I've used the rectangle canvas container for that. - This isn't an image placeholder. - Almost every website is going to have a logo, - Um, - in the upper left. - Um, - I created my utility naff, - and I'm creating my main navigation here. - So for this, - I've used another container, - but I've also used a special, - um, - component called Link or navigation. - And what this is allowing me to do is to just type in the names of my length, - and I just separate them with a coma, - and it creates the underline length here. - Um, - would nice separators. - As you can see, - each of whenever a click on a component shows me some settings in this case, - I could actually change the link colors if I wanted to. - I could link these individual, - um, - links to other pages if I had them. - But in this case, - I haven't saved the file yet, - so I can't do that. - And I can Also, - if I'm on a sub page and I among that say, - classes page, - I can say OK, - selection classes. - Um, - it will show me the selected state. - So basically, - in this case, - I'm on the classes page and I cant click to um on that link because it doesn't apply. - Since this is a home page that doesn't them doesn't apply in this case. - Okay, - So before I create my own navigation menu, - I'm going to say, - OK, - I think I want a carousel. - So I'm going to say, - OK, - I'll have a carousel to spend. - It spends the whole I'm with of the page and you can see that as I'm doing this guides air - showing up to help me a line, - um, - and size some of these items. - I can also, - if I wanted Teoh a malign certain things, - I can select them, - and then I have all of these align and distribute options so I can the line left and you - can see, - Actually, - that wasn't quite aligned, - so I'm going to fix that now so that I have the exact sizing. - Another thing that I can do is group elements. - So there's Thies too. - Elements for my knave bore. - So I'm going to group them. - Um, - So then I can copy and paste ease as a group if I want you to other pages. - If I want to edit the group, - I double click, - and that will show me only d m the group and gray out everything else I'm gonna double - click again, - Takes me back to my main canvas. - So I think my carousel is going to have, - um, - an image in it. - So I could just copy this, - or I can go to the search, - function here and look for image and no, - just basically deliver the image for me. - Let's say that I want the image to look something like this. - Um and I will be my carousel. - Maybe I'm going to add some texture to it. - We go some text Name of Carousel item. - I haven't really thought this through at this point, - so I'm just gonna have a placeholder, - Maybe off. - Make it bigger and I might come back later, - and I'm tweak the position of that. - And them put in some, - um, - real text in terms of putting in riel text as opposed to placeholder text. - Um, - it's better if you can use as much of the rial content as possible. - Um, - just because with placeholders, - you won't really think about It's a longer items or things that eat the rap etcetera. - So it's better to work those out where them Aziz realistically, - as possible. - Sometimes you may don't have those. - And, - um, - you can dio if you look at the paragraph of text component if, - let's say I wanted okay, - I want title and there's going to be some texts under it, - but I don't have the final text. - So what I'll do is a star typing in Laura MIPs. - Um, - um, - if you're not familiar with that, - it's basically, - um, - it's called Greek ing, - and it's placeholder text. - It's actually in Latin, - and it's basically kind of placeholder. - Um, - text. - That's not readable. - Um, - so you can use that throughout your interface whenever you don't have real content. - Um, - let me show you something else. - If I bring up a paragraph of text again, - you can see that the example has some stuff in it. - So it's not just plain text. - There's actually a link, - bold underline and even things that are crossed out. - Some one of the things that you're going to one learned as you do this is that both stomach - , - um, - has some special characters that help you format your text within components. - In this case, - you can. - The brackets are always and we'll give you a length. - S tourists will give you bold. - Um, - this will give you an underline, - and you probably won't need the crossed out text to give you another example. - Something like a table if you have a table or a grid, - um, - you have some other special characters, - and this is giving you an example How, - um, - how to create the columns as well as some of these special characters. - So if you have a table in your design, - um, - look to this example for information. - This last line here is, - um, - this sizing and alignment of the columns. - So the ones that have se zero r it's basically making the colony as narrow as possible, - and R stands for right, - aligned in their center and left the line. - So, - um, - there's lots of little things like that and if you, - um or ever confused about that, - but some because am great online community, - where you can search and find pretty answers to pretty much any question you have. - So I'm gonna use that if you get stuck. - One thing that I'm that I'll mention is one of the things that you'll run into. - Is that a coma? - Sometime usually will, - just something like insert in your column or, - in this case, - the coma gives you a placeholder. - Or, - I should say a a separate item in the list if you need to use a coma but can't, - um, - don't want it. - Teoh Act as a special character. - You're going to do what's called escaping, - and that's a term from programming. - So if I want to say that's a last name, - first coma first, - I'm going to do away a back slash then coma, - and that should leave that comma in there as a real character, - and it won't give me in your column. - If I just put a coma. - It's going to put it in the next column. - So that's a very useful, - um, - thing to know if you're ever, - um, - using a special character and you want it to just be the regular character and not not have - a special function. - Another thing that you'll find in here is, - um, - that's really see if I can, - you know, - most of the time, - I just used the search here because I know the names of the components, - but you can obviously navigate here through whatever am components are available. - So one of the things that I'm there available in here are icons, - and you can have them wither without associative texts. - I'm going to, - uh, - um, - bring in an icon because I want to, - um so the user how many pages there are in my carousel? - So I'm going Teoh, - um, - click this symbol and that's going to show me all the I consider available, - and I know that I want to use them dots. - I'm going to select the dot, - and now I can create basically a symbol that will tell the user that there are three pages - in this carry so that they can page through. - Um, - I want thes should be, - um, - have distributed spaced out evenly. - So I'm going Teoh, - um, - use one of these distribute functions. - I'm going to space them out horizontally, - and they're actually fine, - but it normally it would just distribute whatever elements you have selected. - Um, - within that the space. - So I have that now. - Um, - I would pro the group. - That was also, - but for now, - I'm going to show you something else. - I also want, - um, - an arrow, - and this doesn't show me what the exact symbol I want. - What I actually want is this symbol. - I can size it and select it so the user can click to go to the next next time carousel page - . - And that looks a little big, - so I'm going to make it slightly smaller. - So now I kind of have my basic carousel here. - And, - um, - I'm assuming that I want some more information here. - So let's say I want to have a couple of containers and you'll have Teoh um, - basically going to figure out what size they should be. - I don't think there's anything that will size things, - um, - to be exactly the same size at once, - so you can see, - I have kind of uneven columns here, - but maybe I want them to be equal and they'll have to play around with the sizing. - Or maybe I want one of them to be to be bigger. - You can see as I'm re sizing, - it's showing me the M dimensions here, - and I can also set the dimensions in this box. - Second set the position so vertical and horizontal position of this item, - or I can edit the size of it in pixels. - So let's say that I have, - um, - this element here and I'm going to call it teacher. - She's a teacher of the month. - That's going to be my little, - um, - highlight component here. - I'll have some information about this teacher. - Maybe also, - I want to have a picture, - and my picture is going to be square. - So I can say, - OK, - I want to be 86 86 and that that will size it for me. - Um, - again, - if I were doing this for real, - I would probably group all of the elements in this component so I can copy and paste it. - I can move it together, - so I'm going to group it. - Another thing that I can dio, - um, - is lock elements. - So in this case, - I have a background. - Um and I don't want that background to start moving around as I'm selecting things so I can - click on the lock. - And now, - if I select, - um, - multiple elements, - it won't select the background because it's locked. - However, - I want to actually unlock it for now, - because if I lock it, - I can't copy it so that me, - um, - save this, - I'm going to save it as home page. - And that's my, - um ah, - the home page form. - I am for my sight. - Obviously, - I would put more information in it, - but for, - um, - for demo purposes, - I'll stop here. - Um, - a few things that I can do from here I can export it, - Teoh a number of formats. - And when I moved to solidify, - I'm going to have to need I'm going to need screenshots, - so I'm going to explore exported to a ping. - But let's some weight to do that. - And I know that I want another page because I'm going to show what this man you will look - like. - So I'm going to, - um, - copy all of the information and control Able, - um, - copy everything. - And then control V is going to paste it the first time You copy an element to a new page - will position it exactly the same, - um, - as the item that you cut the page computed from which is pretty useful. - And I'm going to save called this, - um, - languages now as and you may wonder why I'm copying everything. - And the reason for that is that when I work, - um would solidify. - Um, - all I have are basically screenshots of what each state of the page looks like. - Um, - in some prototyping tools like actual, - for example, - you can have great of a background that set, - and then you can put components on top of that and manipulate those with solidify. - You can't do that. - So basically, - you're, - um you're gonna have a screenshot that has one view, - and then you'll have another screenshot that you can bring up. - It'll show only whatever's changed. - Um, - that seems confusing. - Bear with me and I'll show you exactly what that means. - So if this is my languages and have I'm going Teoh now show what this component is going to - look like when I, - um when I select the languages menu, - Okay. - And that could be, - Ah, - most over or on. - Click. - However, - um, - you make it happen. - So the first thing I'm gonna do here is, - um, - include some kind of I couldn't to show the user that I'm now in the languages menu, - and usually I use something like a down arrow on up arrow flew, - Going to use the up one. - And I'm going to take a quick break to set up the knave. - So you're not sitting here while I'm setting up all the menu items. - Mega dropped them. - So I've created AM Dez that has some subheadings in it, - Um, - and some links to, - um, - sub pages. - So I've broken up in this case, - I've broken up my languages, - so I want to call out the languages that are most popular. - And then I have a list in alphabetical list of rural all languages that are offered by to - school. - I want to make sure that everything is aligned, - some making sure that it's left the line, - and that's fine. - You can maybe notice that I've also up the front of my main abs, - and I did this, - um, - after realizing that I needed to have headings here. - And I wanted the headings to be slightly bigger than the length. - Um, - then to maintain the visual hierarchy, - I want my main navigation to be most prominent. - So I increased the font size. - I also have to go back to the other page to make sure that it's consistent. - Thank. - So now I have my menu. - Um, - obviously, - if I were I'm doing this for real. - I would spend more time fleshing out my page and whatever other information I wanted to - include. - And I would create basically a page that only showed the individual menu for each of my - main navigation sections. - Um, - so I would have three additional pages here, - one for classes about us and contact. - Um, - presuming that I've Donald, - that I am ready to, - um, - I'm ready to, - um, - create my prototype. - So I exported my balsamic pages to, - um, - to ping format, - which is a just a screenshot form graphic format. - Before we go into that, - let me, - um, - for your some other functions here, - you can see that I can, - um, - zoom in and out on my, - um why your frame? - When I mentioned being able to link to things I could actually go into here. - And since I have a languages menu, - I could link this page to the languages Knave Page. - And that would allow me to, - uh, - um demo that menu. - So what I would do now is go to view, - go to full screen presentation. - And now I have a hot link here. - When I click on it, - it brings up the second page, - which shows the menu, - and this is pretty much exactly what we'll do and solidify. - Um, - the drawback with both stomach is that I can't actually, - I can use this to present to somebody if I'm in the room, - but I can't package it up, - and I'm send it off that, - say, - as a link or something like that. - So I'm hitting, - escaped to bring me back to, - um to my wire frame. - And now I'm going to switch to Bell stomach. - I'm sorry to solidify 13. Solidify Walkthrough: - Okay, - so now I'm in solidify as, - um Sundin and I created a new prototype. - The next thing I did was, - um, - clicked on the select files to upload, - which allowed me to select the M screenshots that I just exported. - And they uploaded, - um, - and they are showing right here. - And I can rename these if I want to, - and I can move them around so I can have things in, - um, - in order. - Ah, - let's see. - Okay, - so this makes sense to me. - And next I select what type of device I'm designing for. - I'm designing for a computer clicking save which will take me to the the working screen and - solidify so that if I can be a little slow sometimes. - So keep that in mind if things they're not uploading, - um, - as quickly as you'd expect. - It's kind of a drawback that you can income may encounter sometimes. - So in this case, - it's waiting, - and here we go. - So it's showing me on this screen, - which is, - um, - allowing me to, - um, - link up my prototype. - So what I'm going to do next is I have these two pages and I want to demonstrate how this - will work with the menu. - So I'm going to, - um, - drawn this the kind of hot area, - um, - where I want some kind of interaction to take place. - So I'm selecting languages and is going to one link languages nev. - I have the m option to make it a hover state. - And when that means it's basically a mouse over, - Um, - I do want it to be a mouse over, - and it will work because, - um, - I only have a two pages so that that's actually fine. - Um, - if you actually have sub pages within your menus. - So let's say you want then the user to be able to click on these links, - I believe that you have to do it. - Make it a click, - since the mouse over tends to disappear. - Assumed as you mouse off the small area here, - and you actually look at that in a second. - So I've done that. - The pin functionality is if you have and have a multiple or an element that's in the same - place in multiple pages. - So if I had 10 different um, - pages that will had the snap as I would want, - I want this area to be clickable and linked to the same item on every page, - so I would pin it. - And in this case there's only one option. - All because I haven't set up and in link sets. - So I click done. - When I go to this page, - this basically appears automatically, - so I don't have to draw it again, - um, - to have that link. - And in this case, - it doesn't really apply, - since I'm already feeling this menu. - But if I had additional that said it was on the classes page, - I would want to have a length back to languages. - So that's pinning, - um, - the link sets or basically groupings. - So if you had some groups of pages that had one never and then you had another group of - pages that had, - let's say, - sub navigation and you wanted to pin within that sub navigation, - you would put that group of pages in one links set. - And then you could, - um, - pen navigation or link items Teoh, - a subset of pages only, - instead of having it appear on every page. - Um, - before we demo this, - a few more, - um, - things, - so you can add more screens of uses, - just applauding more items if you ever make changes to this page and you don't want to - start over, - You can mouse over this and click the pencil, - and that will allow you to upload a new page in your screenshot to replace the current one - . - Um, - that's kind of the basic idea with, - um would solidify if I had another page with, - um, - another carousel that, - say, - the second page of of the carousel. - I would link this to that page, - and in this case, - I wouldn't want it to be penned because it only appears on the home page. - But since I don't, - I'm going to I'm leave that alone. - But basically all you're doing is linking from one page to another page that's showing a - different state. - In this case, - we're going from the home page to a homepage that shows the manual. - Okay, - lets some preview this. - I've clicked on preview I mouse over the area and lo and behold, - my mouse over shows up One thing that I can actually maybe I can't adjust it in preview - will show it to you in the final. - You can turn off on the other off this highlighting that shows you where the clicks the M - the links are so this works because I don't have any links in my mouse over. - But if I wanted those links to be clickable, - um, - I would make this a click. - So basically, - instead of having it appear in los over, - it would appear on unq Lick, - and then I could have hot links within that that menu. - In this case, - I can't click on anything that's in the menu because it disappears. - This isn't as I move my nose off, - Um, - and maybe I'll just show you that. - So if I don't make this a hover state, - then I click on it, - and it basically appears and stays there until I click on another item. - Okay, - so I'm going to go back. - I do want it to be a hover, - because this is just a demo of the main navigation. - And one size presumably done this for all the other links that I had on this on the home - page. - I'll click next, - and you can use solidify to get feedback, - um, - and feel free to explore those those options in this class, - we're just really creating the prototype and sharing it in our project. - So I'm going, - Teoh, - um here select. - Let the user control the hot spots and I'm going to save, - and I can choose whether I can. - I want to make it private or public. - Don't make it public since I want to share it In my project I named the prototype. - This doesn't really apply to what we're doing. - I'm going to click, - create prototypes this point. - It's taking me back to a summary page and I can click share It's going to give me on a - couple of lengths, - um, - that I can use. - Still, - it's a length to from my report. - So I'm going to copy this link, - and if I look at that, - it will bring up my prototype. - And here is the setting that will, - um, - turn the hot spots on their off. - If I turned that off, - it won't show me where the spot the hot spots are. - Um, - make sure that you use this link that you get from the sharing window. - The preview is slightly different, - and it's not going toe work for other people. - So this is the public link. - You want Teoh add to your project to shut it with the other students and with me. - And that's a very quick and basic introduction. - Teoh, - solidify, - Um, - and again the photos. - Things that you really have to practice Teoh to get the hang of it. - Um, - but this is the basic idea.