Sketches and Digital Wireframes for Web Apps

Featured Image credit to Kerem Suer

The design process is often kicked off with a set of wireframes. These behave as models for your layout to follow when you begin coding in HTML/CSS. Web designers understand these wireframes all too well by following trends over the recent years. And now with mobile apps booming in popularity iOS and Android designers are switching to wireframes as well.

But what’s all the fuss about? Well you can save a lot of time in development when you know exactly which views need to be created for which pages. You also don’t have to worry so much about the layout details and can focus on specific graphics like textures, banners, and buttons.

In my short gallery below I have a collection of digital and sketched wireframes for your viewing pleasure. These are perfect examples to get your mindset clear and possibly give you some ideas for handling your own wireframes. The procedure is different for everybody but this is practically a necessary step in the design process moving forward.

Landing page wireframe

Web Wireframe

Marketing Wireframe

Pencil sketches

Dashboard Sketch

iPhone App Wireframe

Resume wireframe

Preliminary sketches

LocalHero sign up

iphone app wfs

Vim Interactive homepage concept

Application wireframe

Wireframe Sketch

Homepage wireframe and notes

Food goal wireframe

Wireframe Brainstorming

Mobile Interaction Patterns

Early work…

Responsive Wireframe

Portfolio Wireframe Sketches

iphone mobile ux

Notebook Wireframe

Dashboard Wireframe

Submit Form Wireframe

Wireframe Template

App Idea

About the Author: Kalen Smith

Kalen is a freelance writer and entrepreneur. He can be found on the web writing about topics including startups and UI design. Check out his other articles through Google or follow his updates on Twitter @engineerbiz.

1 Comment

  1. Mehhhhnnn!!! Your designs are *solid*.
    I love cool UI’s but am not good at drawing.
    Hope you can help me with some work for my start-up company.