Responsive Web Design Sketch Paper

January 17, 2012 at 11:32 pm

Responsive Web Design Sketch Paper Blank - Wire-framing, Design sketching, Layout drawingResponsive Web Design Sketch Paper Interface - Wire-framing, Design sketching, Layout drawingI sat down today to start sketch­ing some ideas for a respon­sive web site design. Imagine my sur­prise when I searched for a sim­ple, letter-sized tem­plate of win­dow sizes only to find one result. I want­ed some­thing a lit­tle dif­fer­ent, so I made my own.

These pages are for early stage wire-framing and sketch­ing since the win­dows are scaled 25% — 50% of what they will actu­al­ly become. I found it use­ful to have them all on one page so I could eas­i­ly see the dif­fer­ences in aspect ratio and size. I did­n’t spend much time sketch­ing on these pages before mov­ing to larg­er sheets with grids, but they helped me get ideas start­ed for fur­ther refine­ment in that next stage.

There are screen sizes of 1440 x 900, 1024 x 768, and 800 x 600 scaled down to 25%. Then there is a smart­phone and tablet size (based on the res­o­lu­tions of the iPhone4S and iPad2) scaled to 50%. There is one PDF with blank out­lines and a sec­ond PDF with gener­ic scroll bar and head­ers blocked in for consideration.

Let me know if you find them as help­ful as I did in the comments.

What you need to know about Web Design in 2012

January 3, 2012 at 9:22 pm

As every year comes to an end, reflec­tion and antic­i­pa­tion come togeth­er. If you have a part in the ever chang­ing world of web design, you might start to won­der, “Are my web­sites miss­ing some trick or trend, some tech­nique that would make them just a lit­tle bit bet­ter?” I wan­dered the web a lit­tle bit and came up with the fol­low­ing list of four web design trends that need to be on your radar for 2012. If you are already doing these things — you are an awe­some web design­er, keep up the great work! If you’ve never heard of it — take a look at each fur­ther read­ing sec­tion and make your­self a smarter, bet­ter web design­er for 2012.

1. Responsive Web Design

2012 Web Design Trend - Responsive Design for Various Devices - Laptops, Smartphones, Televisions

The hot topic issue of 2011 was respon­sive web design. Using CSS3 media queries, lay­outs and con­tent can adjust based on width, height, device ori­en­ta­tion, and more. Continue read­ing →