web design with sketch app
hey digital fam, my name is john d saunders and in today's digital block, we talk about how to present client website mockups with one easy and free tool. so, you've started a brand new web or app design project for a client or your business. at 5four digital we follow a five step approach to web development, which you can find out more right....there. it almost always starts with the concept. it's basically where we work with a client to lay the ground work of the website look and feel as well as the user experience. now, a long time ago, we used to build out sites with the information provided by the client. so, if the client didn't like the design or the look and feel, then we basically had to start again and develop the entire
website over. yeah, [loud beep] that. so, fast forward to now. our process includes a complete wireframe or website mockup we create in photoshop the client can visually see and interact with. that way, they can make any fundamental changes or tweaks based on a real, live view of the site. plus, it works out for our team because we don't have to do any type of development, just design work. so, how do we do it? one awesome tool: invision aka the most bad-ass software on the planet; oh, and it's free. invision lets you create web and mobile, ios, and android designs into clickable, interactive prototypes and mockups. so you're able to share and collaborate on them with others. it's a
really intuitive tool that anyone can use; yes, i mean anyone. we have had clients who aren't super computer savvy breeze through the system. so, in this episode, i wanted to do a quick dive into a few projects for you to check it out. let's go! alright, so the first thing you want to do is go to .invisionapp.com. that will bring you to their homepage of course. then you are going to hit signup free. the way invisionapp works is you get one prototype forever for free. now if you want to have multiple prototypes at once, let's say you have a web design project, and app design project, maybe a few others, you might want to go for a paid account. the pricing structure is as follows: one prototype is of course free. the starter is three prototypes for fifteen bucks, professional is twenty-five and so forth.
so when you hit signup free, you will be able to log into your account. the next thing you want to have is your prototype. so, you can have it in photoshop. it accepts illustrator files, dropbox, jpeg, png, whatever format you choose. we like photoshop just because you can see all of the layers and these are the docs that we share across the team whether it is the developer our copywriter or myself. if you have that file saved perfect you are going to go into your prototype. this is actually the main screen so it will show you your current prototypes and you can hit add. most likely you are going to hit the plus sign. once you do that, title your prototype and choose a type. we usually do desktop. if we scroll down: iphone. we will also do android devices as well but let's just start with desktop. then
you are going to hit create prototype. now when you do that, like i said before, you can use pfe sketch, pdf files, i mean there are tons more. you can even integrate it with your dropbox or your google drive. so once you upload that image, it is going to look something like this. boom! so i've got my prototypes here. i'm going to open this one. this is a recent project. we are actually doing a redesign of the site. when i click it, it will show all of the different screens that i uploaded. they are all photoshop files. you can highlight your mouse over it and see that little photoshop button there. it is just a super clean interface with invision. you can look at your screens. you can look at workflow which tells you if the project is in progress, these are view and so forth. you can also look at
activity, if anyone has commented on these specific images. then you can look at comments. now this is probably the most important part of it. i am not going to show you here. i am actually going to show you inside of the screen. so let me scroll back to screens. now, i am going to click this one for example, view screen. now i send our developer any type of design that i am working on. i usually send him this file and this link. you can share these by clicking this button here. you can share via url, email, text or you can download it which is pretty awesome. this is the private url that you can share. now, on the prototype, there are specific buttons that are really important to the overall flow. so for example, once you send this via share file to your client they are going to be able to open this
up and access these four options. so one is preview mode. they can literally preview what it is going to look like in a live website environment. the next widget down here is build mode which lets you create hotspots. it adds an interactive element to your website mockup. so for example if i push this menu button or this hamburger menu, my menu pops up, i push it again, it goes away. these are all static images. you can do that by hitting create hotspot. you highlight that area and then if you click it, you can choose another page that you have uploaded to link to that mockup. for example that is hooked to my menu mockup which is right here. so anytime that action is initiated it automatically creates that interaction. the next one is probably the most important one which is comment mode. when you send it to
the client you can just explain to them really quickly. once you open up this doc, you can leave comments by pushing this button. once you send it to the client they will open this up. they will hit comments and then they will be able to comment on any area of the page. so if i hit this for example, and i put make sure logo is white and hit send, now that comment is added to the page area. when the client leaves their comments you are going to open this doc after they have done so and see what comments they have left on the actual doc. if i hit this for example, it will say each of these will click to a specific service. if i click this one, main service's page, this will clink to the main services page. so this is a great way. for one, for the client to conceptualize the website and see it in a live environment so they can then go and make comments on specific
areas for you to make changes to that pfd. so this helps you really shorten development time because you are not creating this from code. it is all pfd, all graphic design elements. once you stop looking at your comments and you are good to go on that, you can go to history mode. that will just show past versions of this page. we usually only keep one because we just update it initially with the comments on it so you can see who has left comments, how long this image has been alive and so forth. now lastly, if you want to configure some of the elements you can change the background color, you can scale down a browser so it looks exactly the size it would look if it was in a live website environment. you can also check out, uploaded a new frame to replace this one. to apply these settings took all of the current screens in that specific
project. lastly, this is another cool option too, live share. you can share a live environment with people in real time. so if you wanted to go over this with a client in real time, live, you just hit that button, hit next, hit next one more time and then start a live share. that will create a live share environment where you and your client can talk, can sketch, can do everything live on-site without any type of lag time. so, once again invisionapp; a really cool tool. you can use it for free to test out with your newest development project. feel free to ask me any questions that you have. thanks for watching the digital block. if you haven't yet, feel free to subscribe to your youtube channel right there.
have an awesome day. peace!
Tidak ada komentar:
Posting Komentar