Wireframe Sketches

The objective of the conference campaign website is to apply web typography principals to a responsive website at three breakpoints. The mobile, tablet and desktop breakpoints must have adequate typeface sizes, hierarchy and a effective typographic scale system.

Here are the wireframe sketches at each breakpoint to serve as a layout plan for the digitalized website. This is a quick and simple way to get a rough idea of what the layout will be for the final website. My goal was to get the ideas flowing for what the possible solutions would be for designing this website.

Mobile Wireframe Sketch

This wireframe sketch is for the one column layout of the mobile breakpoint. It was created for figuring out an effective layout that makes sure elements will not be too small on the narrow screen. This was done by putting almost everything in a single column layout so images and text could be as big and legible as possible while fitting on the screen comfortably.

Tablet Wireframe Sketch

This tablet wireframe sketch is designed to be bigger than the mobile breakpoint but smaller than the desktop breakpoint. Therefore, it is set on a three column grid for the speakers section, which is the same as the desktop breakpoint but the images are slightly smaller and closer together so they fit on the smaller screen. The schedule is in one column here, but in critique it was suggested to put it in two columns so that will be changed in the first digital draft.

Desktop Wireframe Sketch

The desktop breakpoint has the largest images and headers and is set in a three column grid for the speakers and a two column gride for the schedule. The layout is the same as the tablet breakpoint except that the images and headers are bigger. There is also the most space to work with on on this breakpoint so the headers have breathing room to be large and stand out more, compared to the other breakpoints.