background preloader

18 Great Examples of Sketched UI Wireframes and Mockups

18 Great Examples of Sketched UI Wireframes and Mockups
Whether you’re designing a user interface for a website or an iPhone app, it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. There are a number of wireframing applications out there, but a lot of user interface designers like to start out on paper with sketches of what things might look like. For this post, I’ve collected 18 great examples of sketched UI wireframes and mockups. NationWide / NASCAR 5 Years of Firefox Links GEOINT2009 (Microsite) Coastal Capital Partners New Local Vimeo Profile Page Idea Layout for BPgraphics Vimeo Clip Page Top Nav Cartoonity.com UI Sketch CommLogix Wireframe Early Ember Sketches Wirethumbs More Ember Sketches iPad App Sketch Web Layout Sketches Librespeak interface sketch Original Twitter Concept About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 1024 shares Read More 836 shares

15 Best Parallax Scrolling Tutorials Parallax scrolling is one of the simplest solutions that webmasters could rely on, especially if they demand for immediate impact on the site visit, faster loading time, and interesting effects that people could enjoy. Because of its benefit to webpages using Parallax plugins, there are now many online resources that offer Parallax tutorials in order for interested website owners to also experience the increasing number of visitors with such an amazing welcome page. There are many ways of creating websites that would catch the attention and interest of various visitors, right from the first visit. Some would consider using pictures with slides, while others think of integrating their graphics with powerful animation. Though the intention is actually to invite people over to view more of the site, the purpose is sometimes defeated as such modes of media in a website slow the opening of the page, making the experience a bad event. Tutorial || Demo Tutorial || Demo Tutorial || Demo

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. Logo designers sketch prototypes, animators sketch storyboards, and UI designers sketch wireframes. 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. wirify wireframes If you read our recent case study on how EMPAC got their website redesign project off to a running start using Wirify Pro you may have noticed the following remark: “[...] we found that some page elements needed a bit more embellishment: page headings in particular were converted back into their original text, for the sake of making the wireframe more self-documenting.” This makes a lot of sense and sounds like a feature others would find beneficial as well. So in the interest of making your redesign process even faster we have just released a new version of Wirify Pro that allows you to view and export headings in your wireframes: Source: CNN International This feature is available immediately to Wirify Pro customers with active Wirify credits. Wireframes exported into OmniGraffle and Balsamiq now also include heading text: » View and download example wireframes with headings On wireframe fidelity Other changes Wirify free and Wirify Pro: Wirify Pro: Source: The Guardian

wireframes Creating a wireframe is one of the first steps you should take before designing a website. A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process. A wireframe is basically a visual representation of content layout in a website design. The wireframe acts as a prototype that shows the placement of page features, such as header, footer, content, sidebars, and navigation. It also specifies the placement of the elements within these content areas. Benefits of Wireframing Creating a wireframe gives the client, developer, and designer an opportunity to take a critical look at the structure of the website and allows them to make revisions easily early on in the process. Wireframing brings the following key benefits: It gives the client an early, close-up view of the site design (or re-design). Tools for Wireframe Development You have many tools to choose from when creating a wireframe: Wireframe Example Best Practices

mock-up Un article de Wikipédia, l'encyclopédie libre. Ne doit pas être confondu avec Mashup. En informatique, le terme mock-up (qui vient du même mot anglais qui signifie une maquette à l'échelle 1:1) désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un logiciel. Portail de l’informatique

wireframe Un article de Wikipédia, l'encyclopédie libre. Exemple de Wireframe Pour Jakob Nielsen, le maquettage wireframe correspond à du prototypage horizontal[1], c'est-à-dire au développement de la partie graphique de l'interface homme-machine. La confirmation de la satisfaction des exigences de l'interface utilisateur et des possibilités du site webLa simulation du fonctionnement a priori du site web selon les objectifs de départUne première estimation du temps et du coût de développement Pour un site web, une première forme de maquette statique consiste à définir le « zoning » des écrans, c’est-à-dire le découpage des pages du site. Le zoning sert de base au travail du graphiste. Bien que le passage par le maquettage papier soit encore une technique courante, il devient de plus en plus fréquent d'utiliser des logiciels dédiés ou détournés de leur fonction d'origine : Portail d’Internet

divers templates Si vous n’utilisez pas de logiciels tels ceux de notre précédent article Wireframe et bien vous pouvez télécharger ces ressources et les imprimer, voire pour certains commander des cahiers entiers de wireframe de tablette par exemple. Mockup ! Les premiers sont des versions à imprimer/télécharger. Les mockup A imprimer : Paper Browser – It’s a browser, only in paper Web Sketching Template – Single Page iPhone Wireframe Templates for Sketching iPad Idea Sheet iPhone Idea Sheet iPhone Application Sketch Template Android Wireframe Templates Wireframe Print and Sketch Template A4 & A3 Sketching Paper Basic Wireframing Paper Wireframe and Notes Paper Two-by-Two Wireframe Paper Four Dots Per Inch A4 Paper 4 Cell Storyboard Paper MBTI Sketching Paper for Ideation ZURB Sketchsheets Storyboard Template Storyboard with Notes Web Sketching Template – 6 Pages Scenario, Taskflow and Grid Sketchsheets Les applications de mockup : Quommunnication Stencil Kit un .psd, avec des icones, boutons… Eclipse Stencil Kit Yahoo!

Related: