Transcripts
1. About Me: Hi. Welcome to my course. My name is Sadat and have been designing products and solutions close to a decade now. I started in the automobile industry designing new tools and technologies that had a direct result on the safety, reliability and efficiency off the production line and on the end user both that I got into the technology space full time where I was part of building high end integrated technology solutions and services for large idee organizations. The solutions I deployed involved machine learning, automation, cloud technologies and many more. Later, I started my own form and build a cloud powered mobile app and a music learning platform. I learned a lot of new concepts on design, prototyping, entrepreneurship all along the way. I love to build products and design solutions for mobile, web and even the real world. The journey so far has been fun, engaging and revolting. Lastly, and if not the most important aspect is the fact that I love to teach. So join me in this wonderful journey to turn your ideas to life.
2. Why Take This course: Why should he take this course? Well, let me start by giving you some facts and figures according to salary dot com, you a design us today on an average salary off around $72,000. The low end of the pay scale is for about $50,000 while the high end tops of $90,000 I am a size job. Posting analytics indicate that there around 9000 unique job postings for you are in your ex designers per month in 2017 in the US, and the lead is set to grow. The global top companies are all designed, centric and have dedicated design teams find blooming and enriching customer experience at various stages for host of products. I designed this course, keeping all double factors in mind. At end of the scores, you will know about various design methodologies such as user personas use afloat and many more. You will know how to build blueprints of writing us and turn them into beautiful wire frames. You'd be able to translate wire frames into interactive frames without writing a single line. Of course, you would be able to share these interactive last names with clients, prospective employers or even angel investors. Cementing your ideas, tangible clickable products, accelerating your growth and ambition. So come join me on this course, which is fine unit concise information off industry, relevant concepts and tubes filled with great visuals to make the entire learning process fun and a jerk and most importantly, to get you started quickly. My name is Sadat. Please do come on board.
3. Getting the Tools Ready Balsamiq: we need to get a few tools that will help you bring your imagination to the digital screen . The first stool is balsamic. It's a great wife. Framing to that would enable you to build amazing by frames. Wire frames enable you to get a flow and feel off your website. Head over to www. That balsamic don't come and download. The good folks at BALSAMIC have a 30 day trial period and the license cost $89 to buy. I feel it's a great investment that would bring you great benefits over the long run. It has a Mac in a Windows version, and please download the version specific to your operating system.
4. Section Course Ojective: the objective off the scores is to design your website. Resuming as a web and mobile app designer, you will be designing this website from scratch. You will start by building wire frames of her website and in the process, understand various design basics such as user flow and use a personas culminating with the fine tune design ready to be handed over to whatever Aleppo. So, without further ado, let's get started.
5. Why Learn Design First: a frequent question I get asked is, Why should I learn? Designed? First, I want to start with coding. And to that, I say, as an entrepreneur, there's no one else who knows your idea. And what do you want to build better than you? You would be able to mouth the way the user accesses your website, how he or she and tracks with your website how the service is delivered to them. Any product is an end result off a series of iterations on. By designing first, you would be able to foresee design, barking necks, service limitations and various other challenges which you might have not got off at the start itself. If this crops up at a later stage of development, it will set you back substantially with respect of time and money, added most developers charged by the hour. If you make changes to the design, are the product during development, it is going to cost you very much. Also keep in mind that the developers can give you feedback and inform you on product or website design roadblocks, but it is not the responsibility to solve it for you. The owners of solving them rests only on you. And lastly, if you give a developer a complete design, he would be able to work faster and a lot easier to to summarize. Designed, First developed Next principled helps you build a great product much faster at a much optimized cost.
6. Design Basics: several different aspects, such as typography, color palette, graphic design, user persona, user flows, page layout and many more are all part of Web design. While the Tom Web design and Web development are often used interchangeably, Web design is technically a subset. Off the broader category, off Web development coding, or programming, comes under the category of Web development. There's a whiter relationship between represent and Web development developers. Take the design that you create and recreated in a language computers can understand. So we have website A sticks on one end and website usability and functionality on the other . The goal of Web design is to strike a balance between both. The user must be able to find what he's looking for in the most easiest way possible, and the design should be visually appealing. It might seem like trying to fit a square peg in a round hole, but it's not difficult and very much possible. So let me did use you to a few Jagan's. The first Dome is called you I or user interface design. At the most basic level, the user interface is a series of screens, pages and visual elements like buttons or icons that you used to interact with the device or a screen. The generally off interacting currently is by the means off a touch or a click. Yes, voice interaction is picking up steam, but it's gonna take me a while to convince myself that whip out my phone in public and talk to it. The other term I want to introduce you to is called user experience or you X user experience, On the other hand, is the internal experience that a user has, as he or she interacts with every aspect of a company's product and service. You are is a subset off you x, you excess broader and has a lot of cognitive science is applied to it. It is an interest of process, a result of research and analysis. For example, Candy crush the popular mobile game. You see people playing around everywhere has its UX design in a way to make you keep coming back for more. UX is a whole new domain and is currently out of the scope off this course, so let's check out a few examples of website and analyze their design. Ah, highly functional website with really bad design is the one that you're seeing over here on your screen. This is a regional website off the largest telecom providers in India. This website is packed with functionality but gets a huge upgrade and design. You can make out on the left sidebar. There's tremendous amount of information and tools way down. We have the social media icons, but unfortunately they have little or no impact at all. This website on the whole, with all the bling bling, star icons and everything, can be described in one word. Repulsive. This is an example of what your website should not be. Now let's have a look at the parent company's website and see how their design is doing much better. You can see the relevant details and it looks good too. You can observe that on the landing page. There's a beautiful time slider. The slider has key announcements and important information about where your services and offers. This is going to be one of the most important aspects off your website. Did you notice I used a new term called Landing page? Well, a landing pages, a webpage that users land into first on clicking a link here in this case. The landing page is the home page below. You can observe links that clearly addressed the immediate requirements off the users. The header of the Web site generally contains the business logo, contact information and various other links. These items are called menu items, and each off the menu item has got a sub menu item, which would redirect the user to relevant page down below. We have the footer off the website. Generally, you'll find quick information quick links on the site map off the entire website. You can make out this arrow over here. I'm clicking it. It immediately takes the user to the top part of the website. I'd like to bring your notice to this particular link over here, the BS in El Hindi portal. This basically redirects the user to a version off the website in the regional language. Why is this important? Well, according to the British Council, only 25% of the world's population can speak English. That means there's another 75% of the world's population that cannot read the content of your website. Yes, Google Chrome does an excellent job in translating websites, but it is nowhere close off building a completely natively built regional website. Let's look at another example off Great website design. MIMO is an excellent app that gamma Phi scolding just for curiosity. Gamification is the concept of applying game mechanics and game design techniques to engage and motivate users to achieve their goals. Generally, this is a flight in a non game environment. You can see this website has only one purpose, and that purpose is to get users to Donald App. That extra tater say is what the Abdo's and there's a mark up off the home screen off the air, right on the landing beach. Download links for the apple clearly mentioned, along with the beautiful sign saying, Get notified when the APP is available for Android down below we can make out. There are social media icons which are easy to follow. This is an example off excellent minimal design website truly built for purpose
7. Responsive Vs Dynamic Websites: you would have heard the term fully responsive website Static websites etcetera for the water a day. A responsive website is a single website that adapts to any screen size, so it's easy to use on a mobile tablet and desktop device. No pinching or sites crawling is required. The design instinctively adapts to the device it is being viewed on, so it looks great on all platforms. A dynamic or a responsive website uses silver site technologies and databases. We will be touching upon them very soon. A few benefits of Responsive website include easier design update and easier content updates. A static website concerts off a number of webpages with fixed content where each based displays the same information to every visitor. Static website pages contained fixed HTML code on the content of each page does not change unless it is manually updated by the designer or a web master. This is how websites were made a few years ago before the smartphone explosion. A static website does not adapt to the screen size. If you're viewing the website on a mobile device, you would require to side stroller pinch out if you're creating a blogging website where you would be creating new content regularly. Static websites are not the way to go. Let's look at some real examples. So let's revisit our favorite website for design inspiration and try to check whether this website is responsible, not what are your guesses? Well, we can check whether a website is responsible or not by actually simulating a mobile screen size in the distributive. This can be done by playing around with the browser window, for example, that would reduce the size of the browser window to an actual size of a mobile device. You can see that I have to cite Scroll to get to the other side off the webpage and also zoom in to see content which is relevant to me. This is not a responsive website. Let's visit the parent company's website and check whether this website is a responsive website or not. In order to do that, let me just head over to the edges on my browser window and try to simulate a mobile screen size Ah ha you can make out This website is a responsive website. The content off the object has clearly aligned it for the screen size. It is being displayed on you can also make out the menu. Items have been all compressed into something we call the hamburger menu because it pretty much looks like a hamburger right now. Let me re try and check whether it can work for a tablet. So I'm changing the screen size to work for a tablet device. Yes, we can see that the content is automatically responsibly. Aligning itself to the screen says it's being displayed on this is an example off a responsive, dynamic website.
8. Wire Framing Case Study: Let's try to understand more by using a real life example off a wire frame coming to life in the form for website. This is a wire frame off Hemingway's expedition, courtesy off Aaron from Follow Bright Consulting Partners. Hemingway's is a company that organizes expeditions in Africa, so let's analyze this. Where free, you can notice the top left corner to have started with the logo and on the top right. They have their toll free number immediately below their reinforcing their experience in credibility by showing a text box displaying the number of years they have been in business . They are making sure the customer knows that Hemingway's is a trusted brand, and it's what the time to contact them. The menu system is clean, and it has all the important links, each taking the visitor to a different page on the website with relevant information since there an expedition company, they're in the business of selling experiences. Having visual images that induce a wall factor in their prospective clients is very vital. Hence they have a set off slider images. Clicking on a particular slider image would take the user to a different page, with more details with respect to that particular image, Hemingway's wants its users to know what the company can offer. Very, very clearly. The decks box on the left side of the slider. Make sure this is communicated very effectively below the slider. We have a personal note from the owner. This is to enforce the image debt. Hemingway's is not a large, opaque corporate tours and travels organization, but is a personalized company that cares about an individual's personal experiences. Recent blocks covering in depth information on trips or how do guide or must see sites would be presented below the owners note with large thumbnails. Below the block posts are testimonials from real clients. Right next to this section is the map off the region where they operate and self below. The entire main body section lies the footer section. This second buyer has got Keeling's and contact information. This for the region is persistent. It means that this photo will be shown on all pages of the website. Not only the homepage. Think off it like your email signature. Now let analyze the final version off the website. You can see that the final version of the website is almost similar to the initial by frame . Lest a few minor changes, the years of experience has moved about the contact the slightest section with seem as designed in the wire frame below the slider. We have the message from the owner putting a name behind the business, along with the map on the right, depicting the regions they serve in. We have blocked boasts a line in a slightly different layout with smaller thumbnails stand in the right frame. The customer testimonials have moved completely down to a new section. As you can see, there are some modifications done to the food or down below. They include some social media links, which were not factored in in the original wire frame. To conclude the final product is 90% similar to the initially conceptualized version. This is the pore off wire frames. It has you, said the president on higher website, or APP is going to look like and what functions it will satisfy. Y frames give you a sense off the challenges that need to be overcome if you're building a function driven website. Y frames also give developers clarity on what needs to be done. To sum it all wire frames. Give your foundation on which you can build your dreams and ideas. Always remember, our building is only as strong as its foundation. If the foundation is weak than the building collapses, the same ghost, your website or product. If the foundation is weak, you may have the best idea or app in mind, but it will not succeed.
9. Understanding User Personas: We are venturing a bit into UX territory right now, but I feel it's crucial that you know the essentials off this concept. So what is a user persona? Ah, user persona as a hypothetical user who has similar gold and behaviors off your target user , AH, fictional character who represents the essential traits and characteristics off your customers buy up of. So Nas or user personas are created through research surveys and interviews off your target audience. In layman terms, user persona is identifying who your primary users are going to be and mapping out their personalities. Let's assume you're building a small savings website. Let's name this website benny put dot com This website automatically debit a preset some from your bank account every month and invest the same in mutual funds. Who would the target users of Penny Part B. Will it be kids? Will it be calling students, or will it be grandparent's? The most important factor for Penny Porter book is that its target segment, or target group must have a source off Regular income kids are dependent on their parents, so they're not the target group. College students are partially dependent on parents, but still do work part time. They're still not the target group because that income sporadic and seasonal grand parents are older. Folk are usually living off a pension or investments that already made in the past. So they are not your ideal target group for securing fresh investments going by trial and error, you can isolate the target group for Penny Port is going to be people who have a steady earning and have a job that pays them regularly. The target segment would be fresher young working couples who are dating or married yet again. This is based on a dipstick survey and is a matter of fact an assumption, as all assumptions mistakes might creep in. And the most recommended way to do the Stargate segment validation is to validate. Your assumption is by taking a sample survey and talking directly to your end customers. For this example, let's assume the target segment is going to be men and women between the age of 20 to 30 with steady income wanting to invest for the future. They have a college degree and our Internet savy healing from Tyre, one entire two cities off a particular country. Let me show you a sample user persona. Meet in Eire in Iowa, works as a training in the human resources division off a startup. She started her career just one year ago. The start up she works for, raised a good amount of venture capital and has got good potential for success. Relationship wise, she is in a committed, serious relationship. Marriage is definitely on our mind in Iowa, this female on his aged return, 22 to 28. Her average income is around 15,000 U. S. Dollars, or I in our 10 million. And she tends to lead a Norman lifestyle. She has a calm demeanor and has a region to what's the future? She understands the value of money and has the urge to save. She has active hobbies like traveling, writing and gardening that n richer, emotionally and mentally. She is active on social media, but it's conscious off her reputation. She shares news articles linked to a field of work or hobby. She does not share anything. She deems this fake for even pictures off dogs, cats and celebrities. Her gold include to build a decent corpus when it's time to start a family or living with a partner she wants to maximise well during the early years off a work she faces issues in understanding the technical jargon regarding investments on is bombarded with the free advice she gets from her peers. She wants a simple, easy to use solution cater to her lifestyle, even though she wants the solution to be automated. She would want to see dashboards off how her investments are performing. This is what many port dot com does. It automates investment based on goals and risk appetite. It gives concise report, has beautiful dashboard with relevant metrics and is accessible even on mobile, a product and customer match made in heaven.
10. Analysing The Reference Website: when you have a design idea, always look for references by searching other similar site. You get to know waters out there and what you can do differently. Also, it can work the other way to you. Get to know what is working and you can implement the same. Do I recommend the former than the latter? One of the best places to check out for references? ISP interest. Pinterest gives you a lot of design inspiration. You can see what other designers are doing out there. I have a boat called Industrial Light and Magic. What happened? All the amazing stuff I find across the Internet, I found a website we're going to subsequently analyze on Pinterest. I found a resume, a website template by pixel mind to be the best platform for you to begin with. The website has a clean and minimalistic approach to it. This website is following a single page design. Basically, all the various sections can be accessed by scrolling. This is a great design technique. If you're viewing this website on a mobile device, it is far more easier to scroll than click right. Any website your bill has to be mobile friendly as it can enable you to show your work to a prospective plant immediately on your smartphone. So let's analyze the layout. There is a large cover image immediately putting a face to the name the hamburger. Manu is used here, since it gives a left side royal with all the important website sections on the right side , you can make out the social media. Icons are displayed quite predominantly. This is important because as a freelancer you are in charge of generating your own business , and there is no better way than social media. Right below the cover image is the name. Along with the core skill set. This is crucial. Gone are the days of Lent ears humans in huge volumes of text. The human attention span is red, using drastically by the day. You need to put keywords if you want to communicate effectively. If the person wants to know more, there's a button To download a detailed CV, be sure to check out the tips and tricks section off the course for guidelines and how to make an attractive one paid CVI or Izumi. This culminates the landing section or, in this case, the welcome section a landing page is the first page of Mr Sees when they land on your website. There are different types of landing pages. We will discuss about them in the later section. The next section is the about me section. A brief about me section is the best way to introduce yourself with some limited lines of text. There's a thumbnail photo with some relevant contact details and some credible metrics, such as number of projects completed. How many clients have been serviced, and if you can notice the number of coffee cups finished, this is not a relevant metric at all, but this is used to set a lighter, non corporate tone to the entire website. This is done to humanize the freelancer and try to get the visitor to feel. The freelancer is a dedicated worker because coffee is generally the stimulant used when the going gets tough and one needs to burn the midnight oil right. The next section is the career summary section. Again, there's a heading that captures the section Titan, along with a few lines that summarizes the career achievements. This section can be used to highlight what your education qualifications are, and if you have had any previous work experience. The next section is the skill section in a world when you need to be a jack of all trades, it based to be honest on what strength you have. This is denoted by a circular graph, even though I have seen people judge their skill set for giving themselves top scores for all. I strongly suggest you do not do that. This is best populated by taking a survey off your clients. After you have completed a project, think off it like a C set or a customer satisfaction score. Be sure to check out the tips and Tricks section to find out the best freeway to take a customer or client satisfaction survey. The section after the my skill section is the core off the webpage, the portfolio section. The section has the same layout as before, with the heading announcing the section name and a few lines of text to summarize the work below that you have a sort Barton that starts the different type of work you have done. If I was building a resuming website, I might have my online courses sorted here based on topics. Maybe this might be UX you're I design. What breast development, entrepreneurship? Crash course, etcetera. Here original Great off images is used with additional functions, such as marking them as favorite or opening a more detailed view off the same. The last section is the Contact Me section. This is one off the most important sections off your website. This is what is going to generate a lead for you to actually follow up. This contact form has all the relevant fields and also has all the relevant contact details to make sure that your perspective plant can surely reach out to you in their preferred way . Let's bring our focus back to the top off the page and to the hamburger menu on clicking it . You can make out a dryer type of animation pops out from the left. Also observed, there is a shadow on the corner of Destroyer. This is to create a sense off depth off feeling that this menu is about a webpage on a different plane. You could make out the section headings are present in this drawer, Manu, and hovering over them highlights them, and an underlying animation appears right below them to now clicking on any section heading takes the visitor to that particular section on the webpage. This is done by using anchors. Basically, you are dropping an anchor at the start off a particular section and assigning it to the section header Oh, but into development site. But I felt you should know about this. There are also certain animation, such as the hamburger menu, turning into across and across turning back into a hamburger menu. Again, you can notice the sections. Follow a standard format. There's a heading and below that you have a few lines of text. It's the same for all types of sections. Over here. The text color is mostly gree, and the background is great and white. There's a sense of uniformity in the design, and this is called design system from typography, layout and grits, two colors, icons, components and even coding conventions to voice. And don't the style, guides and documentation. A design system is bringing all of the's together in a way that allows the entire team to learn, build and grow. We will be learning more about design systems in the future lessons. Now that we have understood the website, let's build our wire frame
11. Introduction to Balsamiq Mockups: ball stomach is an amazing app that enables you to both beautiful by frames. On opening bottom IQ, you're greeted with the application window. The bottom IQ user interface is made up of five primary areas. The toolbar, the U I library, the canvas, the Navigator panel and the properties panel. The toolbar consists off a series of icons, each for performing actions on other areas of the user interface. You can see a hamburger manual position on the top left corner aren't clicking this you get a drop down. This drop down consists of a few options. The 1st 1 is mock ups. The 2nd 1 is Asset, the Third Oneness symbols, and the last one is trash. The markups are the ones you will be right framing on the canvas. Over here, assets are the images that he would be using in your wife frames. If it all you're using them, it can be a particular image or even a logo that you want to incorporate into your wife. For him, the 3rd 1 symbols are an important concept in the field of design. A symbol is a group off you. Y objects are controlled that represent a single piece of functionality. It is often used for parts of the user interface that shows up repeatedly on several different screens. Other software programs sometimes refer to this feature as templates, master pages, custom components or even widget. For example, if you use Gmail app on your smartphone, the floating plus Barton is seen in almost all the screens. The designer, when creating a mock up off the same, would have created a symbol off the plus icon to reuse multiple times. Build ovens, reuse as and when necessary. In essence, symbols let you create reusable common elements that you can use across different markups screens. Trash is basically all the items you have deleted, and you might want to recover. The group of icons in the center of the toolbar is for commonly performed canvas functions . These are the actions that you probably have used before in text editors such as Copy, Paste, Group, Align and Zoom. The final section off the toolbar is on the far right and contains the quick at two toggles for the U. Y Library property inspector project info panel and toggle full screen presentation bone, the U Y. Library or the U I Control Elements Library is a long strip of U. Y. Controls just below the toolbar. It lists all the U Y control elements or objects that can come with the mock ups as well as assets and icons and symbols. The main goal off the U. Y library is to let you at you. I control elements to the markup canvas now coming to the mockup canvas area. This is the most important working area off ultimate mock ups. This is where your markup comes to life. Once you add, you objects to it, you can move them, resize them, play around with them to your heart's content till your markup elements feel just right. The Navigator panel on the left side shows the list off markup screens or canvases. The currently selected object is highlighted. You can do a lot of cool stuff with the Navigator panel, like setting up child canvases, etcetera. We will explore the same in the upcoming lessons. The panel on the right side off the application, displaced properties for a selected control or object, depending on which icon is selected. It either shows the property inspector or the project info piano. The property inspector allows you to set some common properties such as alignment, position, size, etcetera, for example. Let me just drop a button over here, and you can see that I'm getting various functionalities over here to transform this particular button. The Project Info panel contains an area to add some notes about the project and also select the skin type. I will explain the different types of skins and where to use them a little ahead in the course. Now that you have understood the various panels off balsamic, let's build that wire frame.
12. Wire-framing Screen - 1: on opening Balsamic head over to the U A toolbar to the common tab and dragged down a browser window. So let's name this website. My awesome resume a website, right? And then let's go to the size and the Inspector and change it to 10 to 42 576 Let's zoom out a little bit. Fantastic. This gives us a nice white screen representation off a browser window we are building for white screen devices. Gone are the days of scrap monitors. Am I correct? So before we even start to transform an ad, you elements. There's an important concept I'd like to introduce you to. And that's called locking a particular you element. Let's just right like and click lock browser. Basically, what happens is that once you locked this particular you element, this does not move about freely. This is very crucial. If you're building a lot off, you are elements. You do not want them to get jumbled up while you're working so systematically. Whenever you're building your wife frames, locked the elements that you're not going to actively interact. Mint. Let's go back to the website. We can see that we have a hamburger menu over here on the left, followed by some social media icons on the right. So let's try to replicate the seam on balsamic. Let's go to containers and select rectangle from the U I toolbar. Let's drag it down over here and let's transform it so that it looks like a hamburger menu . That's what used to size a little bit. Excellent. Now I want you to hold Option and Mac and Old and Windows and dragged down, thereby creating another copy off the U Element. We can repeat the same steps and create the third line to select all the three rectangles and create a group off the same. You can do the same by pressing Command G. This is a very important concept, and design groups allow you to, well, a group of set a few elements and then operate on them as a group rather than operating on them individually. Now I'm moving older to your tangles at the same time, I'm a little bit uncomfortable with the length, so let me try to reduce the length a little bit and also the captain. Between them, we can see that there are certain off social media icons over here on the right bottom. It makes it really easy for us to incorporate social media icons. Let's head over to the quick ad field and search for Facebook in the toolbar. This looks pretty nice. Let's drag it up over here, and we can also select the size. I feel em is better or lined to reflect what the original website looks like. We can also add the other elements to like Twitter. I was dragging up with you and again ready, used to Seiss we have linked in Strung it Up Again. Pretty. Is this ice and I'm getting the last one was Instagram again? I made her studies dis ice and drag it up right here. Let's just bring them all in one single night. Yep. And now select all these icons and moved to the inspectors and select space out vertically . This will bring in an equal spacing between the icons. We can see that there's a huge cover image below the social media icons, so let's head over to the media tab on the you a library and dragged down image that's named this cover image and drag it all the way across, you might ask me, Why did we drag down an image and straw dragging down a rectangle you can park that thought I would get to it at a later stage? Let's go back to our reference website. We concede that there's a huge textbooks just on top off the cover image. So let's go back to the containers and select rectangle and place it on top off the cover image. Before I start to do anything. I just want to go back and look. The cover image such that any kind of action I do over here does not affect the position of the cover image behind it. Let's transform the text boxes size a little bit so that it is better aligned to what the reference website has. We have a header title, followed by a subtitle and a button. Let's try to replicate the same on Balsamic, so let me go to text and type a big title. Now let's take a subtitle and enter the text you eyes slash you X bar. What press bore Android? That's position. This just a little bit for the big title that's at the button with drag down the Barton and position it right below the subtitle that increase the size a little bit. Siri Tallow. Congratulations. You just completed the first green on Balsamic.
13. Wire-framing Screen - 2 Part 1: let's scroll down a bit and were greeted with about me section. The about me section consists off our title or, in this case, political this a header, along with a few lines of text below it. It also has a few rectangles placed on top of each other, with some metrics also mentioned on top. So let's come back to Balsamic. Let's right click and duplicate the previous screen. So let's delete the stuff that we do not require. Let me unlock the cover image and delete the same. Let me delete the rectangle, the text on the button. We do need the big title, so let's take it up to the center below the big title. We have a block of text, so let's drag down the text. You buy element. Let's go to our website and copy this text. Let's bring it back into volatile Mick and paste it. Excellent rehab are subtitle line just about ready. Let's position it to the center by using the text. Transformation tools in the inspector we're going to be learning are very important concept called symbols and how to create some built in Baltimore. Right now, a symbol is a set off you elements that can be reused. The saves you a lot of time when you're building a lot of screens with same reparative element, and in this case it is the title on this small paragraph text below it. So let's select the big title and the text element and group them. Now we're gonna convert it to a symbol, so head over to the inspector time, and here you can name it as title symbol and you can hit convert to symbol. The color has changed from Popo to green. Symbols can be accessed by using the symbol. Step over here. We will reuse this at a later stage. Now let's add a new rectangle over here, So let's go to the containers and click on rectangle and let's resize it. Let's drag another rectangle on top. So we have created the base for the metrics display. Always remember that all you elements are on different planes. For example, the elongated rectangle is on top off the stretched rectangle. Let me take the elongated rectangle and send it behind. You can make out that the stretched rectangle is sitting on top of the elongated one. Let me bring it back ups, and now you can see that the elongated one is on top off the stretched rectangle. Well, in order to put things into perspective, let me give you another example. Let's assume you're on a fancy helicopter, right? And you're looking down below at a particular block off your city. All those different buildings are like different you by elements. Some buildings are taller, some buildings a shorter, but when viewed from top, they all look like they're at the same height, even though they exist in different planes. So let's pretend the remaining details on the rectangles. We haven't image a subtitle, a line of text, a few icons on a few, both text and women's inside these rectangles. So let's jump back into Balsamic. The quick at two of our makes it really easy for us to ideo elements, So let's track this image. Let's search for subtitle. Drag it up over here. Let's type text. Let's select the label. Let me just select the same. Let me hold option and duplicate the same. Let me move this up a little bit so that it's better position. Let me hold shift and reduce the size off the image so that we have more room. Let me drag these elements. Oh, let me lock this rectangle. Very selective, said Title and some text and pull in another copy off the same. That's re center. All of these looks good.
14. Wire-framing - Screen 2 Challenge Question: I have shown you how to use the library and the quick at toolbar quickly at the rest of the icons to complete the screen.
15. Wire-framing - Screen 2 Challenge Solution: Congratulations. If you have done it successfully now let's search for the icons in the U. Y. Library. The first icon is a like icon, so let's try to find it. Yep, we have a thumbs up outlined thats dragging up to this particular spot over here. The next icon we have is a user plus icon, so let's go back to use it. De Vito. We haven't add user icon. The next gone is a cup of coffee. Let's see if Baltimore has it for us now. It has a trophy. Yep, excellent. We can notice that there are some title numbers over here. Let's go to the quick at field and type of Big title 10. And for the subtitle to go for level, let's place this in the center using the text transformation tools. Let's hold option and copy the numbers again. Let's hold option and copied it. Subtitles below. Now let us align this a little bit. We can use the automatic guidelines as a reference Deborah, enabling us to align previous objects on the screen pretty easily. Excellent. We have completed screen, too. Hope you're having fun
16. Wire-framing - Screen 3: the career summary screen is a bit longer in nature. It follows the same structure off ahead. Oh, and some text below. So let's duplicate screen, too, on delete the elements that we do not need. Let's transform this rectangle and add the graduation hat. Yep, let's track this into the canvas and change the size, too. Double X. Now let's add a subtitle. Position it right below the icon that is. Extend this rectangle a little bit and position it right next to the icon. Let's go back to a reference represent. We can notice that there's a number followed by a title with a subtitle, another subtitle on a bunch of text So we can go back to Balsamic and let Ad title change that to a number that added another title. Change it. Teoh String Bass are text based title That's a tad too big. Let's bring it down to 24. Position that right next to the number. Let's go at a subtitle on another subject. Let's add some text. Let us select elements and reduced to Seiss. Let us align it in place, select all the element and create a group extender tangle a little bit and hold old are option on duplicate about set off elements that we have created. Double clicking on the group will allow you to edit individual elements off the same and hitting escape will take you back to the canvas. Let us select all the elements in the rectangle and create a group so that we would be able to align them a little bit better in the website. You can make out that there is an Aramark which is pointing towards the graduation icon. So let's see if we can find it. Drag the icon up to the point and place it so that it is in contact with the rectangle. Excellent. We have completed screen three.
17. Wire-framing - Screen 3 - Part 2: we can see that the experience segment off the website is aligned rather differently from the previous segment. Here, you can make out that all the elements are lying to the right and the icon is towards the right side of the screen. So let's go back to Balsamic and duplicate the screen. Let's delete the elements that we do not require. Let us select the graduation icon on the subtitle and move it a little bit off the canvas. Later, select the Aramark icon and move that also a little bit outside the canvas. Now let's move this entire segment towards the right and position it over here. Let us select the graduation icon on the subtitle and more to the right side of the screen . That's double click on the icon and search for a Nikon resembling a tie. Excellent. We have replaced the icon with another new icon and enter the subtitle Delete this Adam Mark and let's find another Aramark pointing to us the right. Drag up the icon and position it right in the center so that it is going in contact with the rectangle that is a line Icahn a little bit. We need to align the content to the right side off the rectangle. So let's go back to balsamic lettuce on group all the elements inside this particular rectangle. No lachter tangle Now that has locked this rectangle. Now let us select all the elements inside this particular rectangle and go to the control section and flick on a line. Right now all of the elements have moved to the right side. But they looked a little bit scrambled up, so let's drag it up back to the edge and let drag them out. Now let let me take this position it to the center and align it such that it is on par with the subtitle Let me do the same with the next paragraph formatted to the center and then align it so that it is in line with the subtitles. Select the title and reduce the size so that it is on par with subtitles too Excellent. If you're followed me along until now, that's great. You have completed screen three. Congratulations
18. Wire-framing - Screen 4: So let's start building screen for we have a graphic of knowledge metric. So let's see how we can duplicate the same in balsamic. Let's go back to Balsamic and duplicate the screen. Let's delete items that we do not need. Unlock this rectangle and delete the same. Now let's go to the quick active and search for a circle. This looks good. Why don't reaches drug it up to the center and hold shift and enlarge it. We can see that we have a title along with some text, So let's go back to a previous page. Copy this symbol and pasted back again. Now that's quickly add some title. Bring it to the center and change it to numbers. Position it in the center. Go back to the quick cattle and search for a label. Enter skill set. In this case, I'm gonna try my skill set. That is, dry. Humor positioned us to the center using the text formatting tools. Let's move this a little bit to the center of the screen selector border and change it to a light gray that increase the size off the label to 20 on. Position it accordingly. Yep, Now let's elect all these three. Andi, put them together and press Ault or option and create duplicates off the same you can notice in the weapons that we have. Pagination imaginations enable the user to go to another page or a section off the website . Let's assume you have more than double for skill set. This enables the user to scroll through the skills that you have. You can learn more about how to make these highly interactive prototypes in my pearls typing course. So let's go back to Balsamic and add the two circles and some shapes to denote the pagination, select all these groups and just reduce the size a little bit and align them to dissenter. Now let's go to the creek at Toolbar and search for Arrow with a circle. Are Klein excellent? Let's bring it up to the center. That's at a few circles. We're used to size two s. Let's go back to the quick to and search for Circle outlined and bring it. Teoh s on position it right next to the other circle that told Option and create another one. And let's go back to the quick at toolbar and search for another arrow, which is pointing to the other side. Fantastic. The filled circle basically denotes the user which page he's currently seeing, and the whole or the great out circle denotes the other pages to user can navigate to within the website.
19. Wire-framing - Screen 5 -Part 1: Let's duplicate the screen and delete everything else except the title and a small line off text. Excellent. If you visit the website, we can make out there's a tabular interface. This is like a sort function, so let's go back to Balsamic and search for the U Element button bar. Let's drag it up right below the small line of text. Let us go back to our reference rep Side and cedar headings, all Web design print an APP design. So let's come back here and old rep Design print design AP decide. You can notice that I'm separating the tabs by using the coma. The button bar by default had only three tabs, but I have added another time. Let's see if it'll come. Excellent. In order to add more columns, you should have a comma sign right next to the element what you're trained enter. So after print design, I had a comma and entered up design, thereby Balsamic understood that it needs an additional column. Let's go back to a portfolio website and you could make out there are series of images over here, so let's go back to our quick at toolbar and search for image now hold the Ault option key and duplicate thes, thereby creating a form off a great let's ally in all of the's a little bit to the center and hold option again and drag down and create another earlier, most a grid. Now select all of the's and create a group. Congrats, your completed screen five.
20. Wire-framing - Screen 5 - Part 2: Let's come back to the next green. You can see that this screen is particularly out of place, its support not in the flu. But this screen is like a call to action screen. Let's imagine the visitor really gets excited. Looking at all the work you have done and really wants to contact you, you should give him or her the provisioned to do so. The next possible action for the user, after getting excited by a work, should be to hire you or contacting. And that is what this website is trying to do with the Big Blue Hire me button. The placing off this big blue button is perfect, so let's go back to Balsamic and try to recreate this that is duplicate the previous clean and delete all the elements that we do not need. Let us go to the U I to bar and search for subtitles that is dragging up the center and the to go back to a website and copy this text. Double click on command or control. Be basted. I hope you noticed a slight difference in our website. You can make out that there is a line break that IHS hire me starts off in a different lane , but in Balsamic wants basted it. You can make out that it's in a single line, you can fix it and bottom. It is amazing in that terms. Why did you just go in to the line and you have to enter? Backslash are and hit Enter and you could make out that balsamic understood that hire me should start from a new line. Let's strike it to the center and make sure it all looks. So let's go back to the first screen and copy this CV download button and bring it back over here and paste it. That's please it in the center. Excellent. Now let's go to the image bar and download. Let's go to the quick at toolbar and search for Image. Now that's drag it up completely and place it right below the higher me. But congratulations. You have completed screen 5.5, and there's only one last screen to conquer, and then we'll be moving on to building the menu system
21. Wire-framing - Screen 6 : so let is duplicate the previous screen and remove all the contents. Now you're going to use the symbol we have created. So let us go to the library and selects symbol and drag title in text to the U. S. Screen. You can edit individual elements off a symbol just like you do with groups. All you need to do is double click and realign the text part a bit. You can also edit the source off. A symbol to the changes you make would reflect in all the previous symbols. This. Make sure you don't have to do double the work, go to the creek at toolbar and search for the text input area and enter relevant fields because we're creating a contact form. Let us duplicate the fields that we have created, go to the last part and had text input area and drag it up to create the message part of the contact form. Even though in the website you can see that the names off the frills are about the text field out recommend you place the field name inside the text box itself on let it disappear when the user starts to input some text into the same. This is called placeholder text. Let us enter the police older message because that is a message area. No. Let us go back to the quicker toolbar and add a button. Let us drag the button down below the relevant wife frames of the text field and shifted a little bit up and align all the field properly. That has changed the name to contact, and we have our contact form.
22. Wire-framing - Screen 6 Challenge: Now that you know how to build amazing wife frames, I'd like you to complete the screen by putting in the relevant icons and all the remaining content.
23. Wire-framing -Screen 6 Challenge Solution: So let's Berlin, a small title subtitle and drag it up and enter the text. Contact me Now we have a location icon, followed by some text, so let's just copy this text location. A map marker. Excellent. So let's just drop the map marker and paste this text right next to it. We have a cell phone forward by a few numbers depicting Contact me via mobile, though I highly recommend. Do not put your mobile number on a public domain E mail. This is an envelope closed so and then with the closed should, too, that's based a text again right next to the icon and a fax number. Or, let's give the benefit of the doubt a landline number. Nope, it's fax and paste the numbers right next to it. You can make out we're missing an important part off the screen, and that is the food of section. The foot dissection is a place which will house various data, such as your social media links if you want or can have, for example, or other websites can have your recent posts. It's generally the last section off the back page. Let us quickly add a footer linked to and just copy this text for that letters unlocked the browser and slightly elongated Let's take a rectangle. Place it just right. Here's and let's at the text. Exchange it a little bit too bold, but to take center it and dragging along Excellent, you have completed all of the screens. Now let's go to the man who section.
24. What is a Hamburger Menu?: we're going to be building the hamburger menu, said Duplicate the first green and create in your tangled Let's zoom out a little bit and drag it off so that it fills a section off the screen, head over to the tech staff and drag the list element on to their tangle. What is Go to our demo website and open up to rectangle and see the way this list elements we have. Welcome about me. Career skill. Put fool you and contact. So let us go one by one and edit this. Welcome me Korea Skill. Full you and contact. So let us please sit here and drag it up. You can make out that the gaps between the list elements are not sufficient, so we need to increase this. So let's go back to our list properties and increase the length between these elements. I think this is good what we need to increase the size a little bit. So that is increase of size a little bit 24 and increase the gap between the elements. Let his tractors a tangle outside this lush with the screen and and that is add the cross mark. Excellent. We have completed the menu item. Now we need to make this interactive
25. Understanding Anchor Points: when you're booting of upside are especially a single page website like this core item you know after remember is called anchor points. Anchor points are basically anchors, which direct the user to a particular section off your website. For example, let me check out about me. It's going to take me to the about me section. Let me see the contact section. It's gonna take me all the way down to the front act section because we have created or rather, designer here has created anchor points for the same.
26. Making the Wireframe Interactive - Part 1: Now we're gonna be making this by frame Interactive without writing a single line of code. But before that, we need to make sure for very important item. And that is, we need to rename our screens. So let's quickly rename this to welcome About Me. Cardia Curry are one skills port Folio contact and rename the previous screen Ask all to Let's delete this. The last screen which we don't need, and come back to the menu item and create our linkages. So welcome is going to go to the welcome screen About me. Is going to go to the about me screen career is going to go to the career screen. Skill is going to go to the skills skill screen. Ah, that's a tongue twister portfolio is going to go to the portfolio screen contact is going to go to the contact screen. No, let us see this project and let us view it in full screen. Now let's see how interactive this rifle M iss. Yep, we have gone back to the career screen is just go back, that is go to the contact screen and we have come to the contact screen. Now let us go back, let me see if I can go to the skill screen. Excellent. So we have basically mapped the very screens to the Bavis elements and created an interactive experience without writing a single line of court. Exciting, isn't it? So let us make this by frame even more interactive by enabling it to open new links. So let's go to the Facebook icon here and select. Add a new think or link to a Web address. Let me go to the notes and copy the link to my Facebook groups, which is called Lone Log. By Sadat. You will be able to learn a lot of new stuff if you joined the group as well. Get access to promotions and coupons, coach. So let's go back to Balsamic. And at this, let's go back to Twitter. That's correct. A nude and copy my Twitter handle that has treated or com slash. So that s 89. Copy this and how the able to added here linked to New rep. Atriss based it. Let's come back to the Lincoln Icon. Copy my lengthen profile. You can make out that there was a narrow with the Facebook profile because there was no icon here indicating a hyperlink. So let's go back to notes. Copy my Facebook profile again. Come back to fees. Book icon, Select Link to Rep. Address. I hit OK, exactly. Never fixed it. And let's go back to the last one, which is my instagram, but just instagram dot com slash loan log. So here you'll be having a lot off videos and photos, as well as one minute videos off various various design techniques. Excellent. Let's go back to the view political rectal full screen presentation and see if we can get these social media icons to do what we want them to do. That is open social media pages. So let's try Facebook. Excellent. That's right, Ritter. Fantastic. That's trying to Lincoln. Excellent. Let's try Instagram. Excellent. So you can also link this button to actually enable a CV download for a little bit out of the box, thinking you can actually use a wire frame itself as your resume a
27. Making WireFrameInteractive - Part 2: If you have paid attention, you could make it that we are missing an important aspect. And that aspect is building interactivity between the screens so we can build interactivity between the screen spread quickly having an arrow mark, which is pretty simple. So let's take the angle down. One. Copy this for all the screens. Things just copy and paste the Aramark, too. All the various screens that we have designed so that we'll be able to build MAWR interactivity in the wire frame. We don't need this because this is where the screen ends. So we need to have an arrow which takes us up. Let's just copy this arrow to so that we'll be able to add a different level of interactivity that IHS take the screen up two on the other screens, too. Fantastic. I was just quickly save it. And now let's build the interactivity. So this is going to go to the about me section. The about me section is going to go to the career section. The career section is gonna go to the career one section and Korea. One section is going to go down to the Skill section. Diskette section is gonna go down to the boat full your section. The portfolio section is going to go down to the cult actions Green and the culture action screen is going to go down to the contact screen and the contact screen is going to go all the way back. Teoh the welcome screen that the cult action screen is going to go back to the previous section that is the portfolio section. When we picked up Arrow, the portfolio is going to go back to the skill section. The skill sections of Pyro is going to go back to the career. One section, the Korea one is going to go back Teoh the Korea section and the cardio section is going to go back Teoh about me section about me section Is it going to go back to the welcome section? It might seem a bit confusing right now, but let us see how this books when we go into full screen presentation mode Excellent, beautiful. We are having a cohesive, interactive experience. Uh huh. We have hit a roadblock here. This section is going to the portfolio of section. The portfolio section is going back to the skill section instead of going back to the culture action. Now let's just check up the linkages. Excellent. But let's go back to view. We have made a lot off elements on this by Freeman directive. There is one small element still remaining and you have guessed it. That is the hamburger menu. Before we do that, we need to do it every important thing and that is renaming our screens. So that has renamed this to May new out on select hamburger menu over here and link it to our menu out screen so you can make out the red color icon, which indicates linkage. Now we know that on clicking this hamburger, Manu, we're gonna open out the hamburger menu and done how various hyperlinks to the radius anchors off the Red Beach. Now we need to enable the cross sign here so that we can go back to the previous screen and that is going to be the welcome screen. I had a save it. Let's go back to the presentation view and see our linkages on clicking the hamburger. Manu, we're getting the hamburger menu out and I'm clicking the cross green. We're going back to the main menu Congratulations. You have really made this wife from interactive without even writing a single line of code and thereby you will be able to demo this to your investors. Your project leaders, your parents, your friends, your clients, whoever and they will be able to get a better comprehensive feel off. What exactly you're trying to build for them or for yourself. But there is one last trick up my sleeve. Let me show it to you in the next video.
28. Making the WireFrame Look Professional: you have completed your wife frame with great levels of interactivity. You need to present this to your management client or even investors would. Can you present the same? I said, Just know it. Even though bottom acquire frames are meant to be like sketches, it can definitely put on a suit To dazzle direct people head over to the properties panel and select project details. It is always good practice to give a small description off your project. Let's enter a few words. My amazing boot Folio grapes, right? Terrible Teoh Rencher capitalists. This is very useful. When you send this wife frame to someone else and a quick read on the project, information will bring them up to speed off what exactly they're looking at now. Head down to the skin section and change it to wire frame. Today you have converted a sketchy, cartoony, level off wire frame toe professional looking amazingly designed right frame, and you did this. If you have come to the stage, you must be proud of yourself. Now you're ready to display your skills to the world and show how to build Amazing website . Let's have a look off this beautiful professional level wire frame in the full screen presentation view Looks amazing. I'm telling you, I'm really, really happy with and hot. Come and you should be too. This is ready to be displayed on a huge projector to anyone you want. Excellent work. Congratulations.
29. Sharing Interactive Wireframes to the world: now that we have completed your entire wire frame, you'd like to share with the world. But not everybody has balsamic Malcolm's installed on the system, and the best way to share markups for reviews for discussions for suggestions and feedback is to export the market as a PdF. So let's go to the project window and click export to PdF. Now we have all markup selected all the screens optimized for your ing on screen, and you can also add various customization. You can also include markup notes, show the linking hints so that they would be able to understand which one links to which one. So let's enable that and click export to Pdf, and I'm gonna take it up onto my desktop. Let's wait for it to export the screens. Excellent. Let's have a look on our destiny. I'm going to use Auto Acrobat reader because that is what most people are going to have and let's go into full screen. You can make out that the linkages are clearly mentioned over the linkages are already highlighted and also active. Beautiful. The person is able to interact on a pdf. He need not even need Bart stomach market. Excellent. And like I said, if you want to think out of the box, you can actually program the CV download button to download your resume A.
30. A Recap: what an amazing journey it has been so far. Let's quickly recap what all you have learned you learned what are Y frames and why they're important. You learned to understand the needs of the client and build wire frames based on it. Using a in depth case study, you understood what I use a purse owners and how you should craft them. You analyzed a portfolio website and understood why wire frames are important. When you're building one on your room, you downloaded balsamic and understood the various two bars off balsamic and what functions they bring to the table. You created beautiful wire frames off the wearier screens of the portfolio website and in process learned where your stools and techniques such as groups, symbols, etcetera. You created interactivity between the screens and the U elements without even writing a single line off code. Eugene's the skin off the entire wife frame to make it look professional and meat. Lastly, you learned how to create interactive Pdf's to share your wife rooms with friends, investors and clients. This has been an amazing journey so far, and I enjoy teaching you. I look forward to teaching here again in various courses and various other opportunities in future
Siddharth Srinivasan, Digital Entrepreneur
