background preloader

10 Free Printable Web Design Wireframing Templates

10 Free Printable Web Design Wireframing Templates
758 shares Drafting Tips for Creative Wireframe Sketches Much like other professional designers I’m a big fan of the wireframing process. Although it’s mostly associated with the field of web design, the concept of project planning is ubiquitous across all creative mediums. Read More 1024 shares 11 UI Kits for iPhone and iPad Development Last week we posted a collection of printable wireframing templates which included some for iPhone and iPad app design.

Glyphish: Great icons for great iPhone + iPad apps Nice motor! Sketching Templates For Mobile Projects Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle81 for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device. Outline Outline is a set of 28 printable sketching and wireframing papers (in PDF) for seven mobile platforms: Android, BlackBerry, iOS (iPad and iPhone), Meego, Symbian, webOS, Windows Phone 7. The set consists of a few combinations, such as actual size, 10 devices fit to a page, and landscape layout. Note: Print the sheets at actual size (i.e. do not resize). As a bonus, Outline includes an Illustrator file displaying the mobile devices. Outline paper set Windows Phone 7 and 8 panorama template Android 4.x template Tapsize With Tapsize, you can determine the optimal tap area without having an actual device. Tapsize paper set Calculating the grid Behind the Design (al) (il) Footnotes

Yelp for iPhone Adds Foursquare-Like Badges and Royalty Status The new iteration of Yelp's iPhone app isn't live just yet, but a company blog post gives a window into what's coming very soon: badges, and a hierarchy of "royalty" that lets you "rule" venues, neighborhoods, and even cities. The royalty feature is much akin to Foursquare's mayorship feature, and lets Yelp users with the most checkins become the "Duke" or "Duchess" of a particular venue. Yelp goes a step further with the hierarchy, however, offering users with most Dukedoms in a particular neighborhood to be named the "Baron" and even a "King" to be crowned for most Dukedoms in an entire city. The company itself acknowledges in the blog post that "we're not the first ones to offer checkins," but that adding these features "furthers Yelp's mission of connecting people with and supporting great local businesses." Yelp also provides some statistics behind why they're investing in new mobile features: a full 27% of all searches on the review site come from their iPhone app.

UI Patterns iPhone/iPad Web usage via mobile devices is increasing dramatically. Companies are now including mobile devices into the scope of their online presence. For UX designers this brings a shift in skills needed to serve clients as mobile relevant to every conversation. Below are examples of iOS apps that inform and inspire mobile UI design. by Nikki Tiedtke and Jim Kalbach As the web becomes more and more mobile, web designers have to broaden their skill sets. We find patterns and pattern libraries particularly helpful for understanding design challenges, in general. While it may be too early to talk about true “standards” in mobile design, there are similarities across the UIs in these examples. We’re sure there are many more conventions emerging–this is just the beginning. Which patterns have you noticed in mobile UX design that are different from classic web design? Like this: Like Loading...

Reducing HTTP requests with generated data URIs I’m not really a server-side guy, but I do dabble here and there, and the other day I had this really neat idea I’d like to share. Of course it might be old-hat to you experienced PHP programmers! But then I hope you’ll be interested in my implementation, and who knows — maybe I’m about to make somebody’s day! The idea is this: you can reduce the number of HTTP requests that a page has to make for its images, by pre-processing the source-code and converting them to data URIs. The data URI scheme is a means of including data in web-pages as though it were an external resource. As Google soon atested though, I’m not the first to have had the idea of using them for page-optimization. <img src="<? What I’m proposing is a retrospective process that converts all the image paths for you, so you don’t have to do anything special when you’re authoring the page in the first place. Code is where the heart is The following example is a complete demo page, with original HTML and CSS, surrounded by PHP.

Touch Gesture Reference Guide The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces. The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures (below). Download Touch Gesture Reference GuideTouch Gesture Cards For wireframes and mock-ups:Visuals only (PDF)Visuals only (EPS)Visuals only (OmniGraffle Stencil)Visuals only (Visio Stencils)How to Guide (Visio) Touch Resources Touch Target Sizes: outlines recommended touch target sizes from Apple, Microsoft, Nokia, and academic research. Touch Gesture Diagrams: listing of touch gesture diagrams that illustrate how users can interact with multitouch interfaces. Platform Support How popular software platforms support core touch gestures.

Cross-Browser Testing: A Detailed Review Of Tools And Services - Smashing Magazine Advertisement As you probably know, cross-browser testing is an important part of any developer’s routine. As the number of browsers increase, and they certainly have in recent years, the need for automatic tools that can assist us in the process becomes ever greater. In this article, we present an overview of different cross-browser testing applications and services. Surely, you are already familiar with some of them, and you may have even stumbled across another overview article, but this one takes a different approach. This is not just a list of available tools, but rather a comprehensive analysis based on my experience with each of them. Probably the most important metric of these services is the capture delay, which I measured for the URL stackoverflow1, with the following browsers enabled: Firefox, IE, Chrome and Safari. BrowserShots BrowserShots2 is the oldest and best known free online multi-browser screenshot service. The interface is not very user-friendly. Conclusion BrowserCam