How to wireframe a website | CharliMarieTV

today I’m in a little of a different setup from my normal because I want to take you through the first stage of the web design process which is wire framing the purpose of wire framing is to work in a really minimal nature to start organizing the information and figuring out the flow of a sheet before you start worrying about things like the typefaces and the hues and reaching everything pixel perfect with wire enclose you allow yourself to work really quickly and generate lots of ideas and my web intend sciences have emphatically improved a great deal since I started following a proper wire making process so today I want to teach you how I do it I ever start my cable framing working simply a pen and a piece of paper you could start on the computer and a great deal of people do doing just like grey chests and using the default font but the second largest you find yourself trying to like align things properly or get a box to be the exact right size that’s when you’re focused on those little details and you lose the flow and you’re not just generating quick-witted sentiments so persisting with merely a pen and paper I can make myself be really muddled and get my theories out before you start you need to know what content is going on the sheet you’re designing it can’t be emphasised that enough your job is designed the information so you need to know what information is going on the sheet that you need to get across before you can start designing that doesn’t mean you have to have the exact fake finalized you really need to have a rough idea of what information is going on the sheet what it’s about and how much of it there is now for this video I’m going to use the example of a blog layout because I want to redesign the homepage of my blog so I know that on it I’m going to have a hitter bio info footer photos and claims for each berth maybe a globe to go along with that maybe not social media connections a examine prohibit and a newsletter signup and I recollect too a popular post station I like to write a roster like this to start with just so I have a reminder of what’s going on my page out in front of me and I’m not forgetting anything if I’m working on a marketing design site then I generally have a Google Doc open on my computer next to me with the rough follow on it from the copywriter to start generating feelings I use a technique that an aged workmate instruct me which he announced Crazy Eights where you fold a piece of paper into eight different sections and then do eight different ideas for a wireframe as quickly as possible you can draw what’s bigger or as small-scale as you crave whatever is most effective for you sometimes I might do four on the side and then four on the side if it’s a particularly long sheet the present working it’s like a warm-up technique for your brain and I ever find it mesmerizing because I start off recalling there is just one self-evident nature they want to arrange everything but when you’re thrust yourself to think of more and more concepts you’ll be surprised at all the ideas you had just hiding in your knowledge and you shouldn’t let meet your self – precisely eight as well if you get going and find that you’ve got more and more feelings coming retain outlining and get them all out as you can see when I’m drawing I’m really Missy and as a matter one fragment during Knicely is not to the point the more you do this the more you’ll sort of develop a little key for yourself like for me a straight line like this one here entails a headline and then squiggly ones mean body photocopy a container with a cross through it intends a visualize and little curves planned icons genuinely doesn’t matter if it looks like a child draw it to anyone else the point is that you’ve got your intuitions out you know what it means and you’ve got a place to get started with your intend after this phase I will look at my eight ideas and framed a little star next to the chips that I picture might be worth exploring more sometimes I will then go and draw a new mock-up of all those chips together but generally I’ll move on to the computer at this stage predominantly because I find it hard to draw neatly and I know that after the stage I’m gonna want to show someone and get feedback on my pattern so they’re gonna have to be able to understand it as well I like to use a program called cartoon to mock up my wireframes I have done a whole video actually about what designing software I use for what purpose so I’ll link to that down below even if they are I have some plan now to seeing how I want to arrange the information on my sheet when I move on to the computer so lay it out I’m still just going to use plain gray caskets and the default text and the above reasons for this is because I don’t want the person who is critiquing this wireframe to think about anything other than the structure of the site employ colorings or suitable icons or anything that remotely looks like it could be part of a finished visual design it’s just going to baffle everything I don’t really make one wireframe in sketch I’ll make its meaning yes I feel I have ideas for after combing through my favorite parts of the sketching process after that it’s a good idea to sleep on it at this top and is coming to it the next day before you share for feedback or before “youre starting” on the visuals if it’s a personal project that highway you’re going to be able to come get to it with a fresh head and a fresh view before you move on to the next stage so that is my wife own process and that is how all of my network layout projections start let me know down in the comments if you’ve got any questions for me on it and satisfy make sure you give this video a thumbs up if you experienced it useful I’m absolutely enjoying compiling designing videos like this at the moment so if you like them as well and you haven’t already please knock subscribe and I will see you next

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts