Presenting Website Sketches
Presenting Website Sketches
Learning to present your work is a necessary skill to have as a graphic designer. Today we’ll go over how to prepare a presentation of a website. Follow along as I show you how to sketch and assemble a cohesive presentation.
Download this file and follow along
Demonstration
-
First I will create a wireframe. A wireframe shows the structure of the website before fleshing out the design. While I don’t always do this, it’s a good way to make sure you and your client are on the same page. In addition, it’s reassuring to set up a plan for yourself that you can revert to when you get stuck. You can always modify the structure as you design.
Observe object styles in Sketch -
Usually I assemble my PDF after I’m done sketching, but for now I’ll show you how I’d assemble it. To export your wireframe, click on the artboard and navigate to “Export” in the bottom right. Export as a 2x jpg or png.
-
In InDesign, I’ll set up a document for myself. I’ve already done so. Let’s take a look at my master page as well as my paragraph styles. It’s helpful to create a well designed template for yourself that you can always re-use. It takes a little while to design it once, but if you do it well it will save you time in the future.
-
I’ll place my wireframe into my document and describe it briefly.
-
Typestyles are an important part of your workflow in both InDesign and Sketch. It’s helpful to start with general typestyles early so you can quickly change things as you go. You can always finetune the system in the end. Our class website has a very limited type system, but you can see why it would be helpful to organize your styles if you were working on a more complex site.
-
I’ll continue sketching my site in Sketch. When I’m happ with it, I’ll export it out and place it back in my InDesign template.
-
When I’m finished I’ll export as an interactive PDF and make sure it’s below 6 mb before uploading to github.