Tips for Wireframing a Usable Mobile App Interface
A lot of time and energy is required to build mobile iOS/Android apps. Aside from the coding and UI design you need to plan functionality ahead of time. This way you can start programming immediately and implement key features without a hassle. The best way to start off a mobile application is through wireframing. This is a design process where you lay out each of the app’s views in detail….
Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials
Adobe Fireworks is one of the most popular application choices amongst web designers for wireframing and prototyping. There are many reasons as to why you should use Fireworks over any other graphic editor, but we won’t go into them with this post (perhaps you could try this one: A Case for Adobe Fireworks against Photoshop and Illustrator). What this post will offer is a comprehensive starting point and reference for…
Wireframes… Who Needs Them?
I do, and throughout this post I’ll try to explain why you do too. So what exactly are wireframes? Wireframes are visual representations of your websites structure, a blueprint to help establish hierarchy. They are usually limited to shapes, forms and text, and they rarely use any colour. The primary function of any wireframe is to show your client how their site will be structured. Pure information, no bells, and…
Fantastic Freebie: 3D Web UI Kit
We have partnered with MediaLoot to offer you a fantastic free resource today: A Glossy 3D Web UI Kit. The kit is available in both .psd and .png versions and is choc-full of beautifully designed modern web elements covering almost all aspects of web design. We have also been given 20% off coupons for any MediaLoot subscription to the first 20 people to sign-up. You can sign-up here, using the…
20 Effective Examples of Web and Mobile Wireframe Sketches
A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches. But first, you might be wondering why the heck you should create a wireframe sketch of your web design. A wireframe sketch is effective in that: •…
An Introduction to HTML Prototyping
Since starting work as a web designer I have always, and will always obsess over improving my project workflow, my own design pattern if you will. Never afraid to make a couple of wrong turns along the way, my intellectual pursuit has seen me produce wireframes in Photoshop, sketch them out in meticulous detail, and not so meticulous detail, test-drive prototyping software Axure and Omnigraffle and even…gulp… completely bypassed any…
Ultimate Collection of Printable Mobile Sketching Templates
As an Interface Designer, I am a huge fan of the paper and pencil method of designing a high or low level wireframe for any application – web, desktop, mobile or otherwise. Sketching has proved to be my most valued tool for giving form to my ideas and allowing others to visually understand them. With pen and paper I have found that I am able to stay focused on some…
25 Free Pictogram and Symbols Sign Icon Sets
In this article we feature 25 multi-purpose pictogram and symbol sign icon sets that have all been stripped down to their bare essentials and presented in there simplest form and all ready for use. All of these icons are multi-purpose, meaning you could either use them within web design (the main focus of the round-up), poster design, logo design, banners… anything you want. They are flexible, meaning you can re-size…
Illustrator Template Toolbox for Web, Mobile and App Developers
For today’s post we have an extensive selection of UI templates, all in Illustrator format, and all perfect if you are a web, mobile or app designer who prefers to use Adobe Illustrator rather than the more commonly used Photoshop. It was mildly surprising how difficult this post was to put together, I really did expect to find a lot more. What is clear from this is that generally most…
Google Docs Templates for Web Designers and Developers
“> If I am honest, I don’t really know how popular Google Docs is within the freelance community, but I have found that I have been using it a lot more recently. To the extent that I seem to have more documents stored online that I do on my hard drive and its one of the first places I go to when I start work in the morning. I don’t…
20 Free Web UI Element Kits and Stencils
No doubt every web designer has spent many endless hours mocking up web pages, and as such every designer should have a good set of re-usable and uniform Web UI elements that they can rely upon to save them precious time and spare headaches when they are in the initial stages of a web project. In this article we have 20 completely free Web UI kits and stencils that are…
A Collection of Printable Web Browser Sketching and Wireframe Templates
All of the printable sketching templates that you will find below have all been designed specifically for web designers. Each of the sketching templates have an imprint of a web browser (they either use Safari, Chrome or Firefox) just waiting for you to wireframe or sketch your next design project. Each template is slightly different, most have various grid sizes, others are either blank or lined and some of them…
25 Awesome Adobe Fireworks Resources for Web and App Developers
Adobe Fireworks’ features and work-flow undeniably make it the industry pioneer and leader for web graphic prototyping and rapid web site building. Even though, with each new version, Adobe have slowly over-loaded it with new features – some of these have proved to be useful and popular, while others have simply been pointless – but at its core it will always remain a marvelously easy to use application for web…
