UX Series: Designing Web Navigation | Eva Kaniasty | Skillshare

UX Series: Designing Web Navigation

Eva Kaniasty, User Experience Consultant

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 30m)
    • 1. Trailer

      1:44
    • 2. Housekeeping

      IANav-01-Housekeeping.pdf
      4:12
    • 3. IA in Context

      5:15
    • 4. Classification / Organizational Schemes

      2:57
    • 5. Design Patterns

      9:22
    • 6. Competitive Review

      IANav-03-CompReview.pdf
      7:22
    • 7. Content Inventory/Content Audit

      6:20
    • 8. Affinity Diagramming

      5:12
    • 9. Site Mapping

      4:24
    • 10. Design Concepts (Gestalt)

      IANav-05-Gestalt.pdf
      8:21
    • 11. Sketching, Wireframing & Prototyping Basics

      6:28
    • 12. Balsamiq Walkthrough

      19:37
    • 13. Solidify Walkthrough

      8:55

About This Class

In this project-based class, you will design navigation and a home page for a moderately complex website. The goal of the class is to introduce you to the user experience design process and Information Architecture (IA), the discipline concerned with organizing information for the web. 

Along the way, you will be introduced to a number of IA methods & tools, including competitive research, design patterns, site mapping, wireframing & prototyping. You'll leave the class with a site map and simple prototype that you can use as a portfolio piece or as the starting point for a real world website redesign. 

This class is approppriate for:

  • User experience students
  • Those wishing to transition into a UX role from another discipline (dev, marketing, visual design, tech writing, etc.)
  • UXers building their portfolio
  • Project & product managers, designers and developers who need to understand UX design

Transcripts

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.