Free Wireframing Kits, UI Design Kits, PDFs and Resources
Aug 27, 2010 General, Inspiration, Resources, Tutorials
To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details. In this post, we’ve prepared an overview of useful web and mobile user interface kits , handy PDFs and resources that you can use in your projects.
Tags: Design, elements, freebies, graphics, GUI, Inspiration, library, stencil, Tutorials, wireframe, wireframing
Spotlight on ZURB – One Super Awesome Interaction Design Company
Jul 30, 2010 General, Inspiration, Resources, Tutorials
You may have bookmarked one of their CSS or Javascript tutorials, or you could have read one of their concise and refreshing articles on Smashing Magazine, you may even use one of their web apps, or it could be that you downloaded one of the many useful development tools they offer… Whether you noticed or not, in one way or another you have crossed paths with ZURB at some point or the other over the last few years. ZURB are not your run-of-the-mill churn-em-out-and-move-on interaction companies, they’re different. They are open and refreshingly unique. Which initially seemed a little bit of an enigma to me.
Tags: bounce, button, css3, dev, firefox, framework, magazine, resource, Resources, Tutorials, wireframe
Investing in the Grid
Nov 4, 2009 General, Inspiration, Resources, Tutorials
Print designers have successfully utilized the grid to create effective design layouts long before the world wide web was even conceived, but the truth is that grids can be just as effective for web page design and ought to be employed by every web designer. The grid enables designers to create a system of related design elements that interact with each other in a logical, consistent manner. It aids designers in creating a unified page layout and a clear page hierarchy — helping to achieve a visual rhythm that moves the viewer’s eye around the page. Designers experienced with table-based design are more likely comfortable relying on a grid to form the foundation for their designs.
Tags: 1kb-css-grid, 960 Grid System, blueprint, css-boilerplate, Design, framework, grid-frameworks, the-grid-online, Tutorials, Web Design, wikipedia, wireframe
Using Wireframes to Bring Your Site Together
Oct 30, 2009 General, Inspiration, Resources, Tutorials
Wireframes are the blue prints that define and allocate a Web sites content and behavior. They are not bound by colors, fonts, and anything that may surface on the site as part of any content. Wireframing compliments good web development and offers a visual of where the content will be laid out within the sites design. A simple wireframe displays the location of a header , main content , footer , sidebars , ad placement , and navigation .
Tags: client, color, footer, Inspiration, photography, security, tutorial, Tutorials, Web Design, wireframe
Build a Promotional iPhone App Website Wireframe in Fireworks
Sep 28, 2009 General, Resources, Tutorials
Wireframing is a useful part of the website design process. It’s great to separate out this planning stage and have your page positioning, spacing, layout, and other elements like text size and tone works out before you jump into Photoshop to add color, texture, images, and effects to polish off your design. Fireworks is a great tool for creating a wireframe and while it doesn’t work perfect with Photoshop, you can export over there and then build off your wireframe. We’ll cover the design process of creating a wireframe for an iPhone application website in Fireworks.
Tags: case, document, final, fireworks, iphone, Photoshop, point, project, promotional, Resources, section, Tutorials, Web Design, wireframe
