Wireframes Magazine Web Design Video and Development Tutorial Library // Think Vitamin Membership Setting Type on the Web to a Baseline Grid We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid. But we’re scrappy folks, web designers. We don’t give up easy. We have the technology#section1 Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts. We can apply the same principles of proportion and balance to the type within those columns by borrowing another technique from our print brethren: the baseline grid. The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. In print, it’s not that hard. Firing up the grid#section2 Paragraphs and headers#section3
Prolonging the magic … A4 sketching paper – Henk Wijnholds Sunday December 27, 2009 Our daily sketching and prototyping work used to focus itself mainly on desktop applications. These days mobile is getting a larger and larger share of our design time. Not all sketching and prototyping tools for desktop applications work well for mobile apps. Therefore we need to broaden our arsenal of tools so we can more efficiently prototype mobile applications. This time I’m focusing on iphone design tools since most of the mobile applications we design are for iPhone. Sketching tools for iPhone applications Sketching is not necessarily done on paper, but most of the tools I found are for paper sketching purposes. iPhone Application Sketch Template by Oliver Waters My favourite iPhone sketching paper, because of it’s simplicity. NotePod iPhone sketchbook by Jacky Winter and Inventive Labs A sketchbook which is the size of a real iPhone. iPhone UI Stencil kit stencil by Design Commission iPhone Sketch Pad sketchbook by Design Commission Related posts:
The Colors Of Shorebreak By Clark Little by COLOURlovers I know we had a colorful look at waves not too long ago (see it here), but when I came across the shorebreak photography of Clark Little I couldn't resist sharing the incredible palettes created by a mix of sand, shore and water. All of these photos can be seen on his site, and are part of his latest book, The Shorebreak Art of Clark Little. All Images © Clark Little www.colourlovers.comDavid Sommers has been loving color as COLOURlovers' Blog Editor-in-Chief for the past two years. When he's not neck deep in a rainbow he's loving other things with The Post Family ( a Chicago-based art blog, artist collective & gallery.
Free 960.GS CSS Photography Template and Tutorial Love it or hate it, the 960.gs makes for some incredibly fast prototyping. By utilizing preset classes you can accomplish fairly complex layouts with little to no effort. Today we bring you a free single-page template, fully coded using the 960.gs. You can download the template completely free of charge and use it however you like with zero attribution. Download the Template Here’s a quick preview of what the template looks like: Download the 960.GS Resources The first thing you’ll want to do is head over to the 960 Grid System website and click the download button at the top left of the page. The download has a ton of stuff in it but really all we need is three CSS files: reset.css, text.css, and 960.css. The tutorial below will assume that you are fairly familiar with both CSS and 960.gs. Step 1: Start Your HTML and CSS Files In addition to the CSS files that come with the 960.gs, we’ll need our own. Paste the following code into your HTML to get started: Step 2: The Fonts Step 3: Header
The Future of Wireframes As we move into the next decade of web design, it's time for us to reevaluate our understanding of wireframes—a tried and tested user experience staple Riddle me this: How do you piss of a UX professional? The answer: Call him a “designer”. These days, user experience professionals look down on the word “designer” because it implies that their primary role is to paint pretty pixels. UX is more than that, they clarify. Much more! Just how much? Holy guacamole, Batman! But wait! It’s time we end this madness! Convergence in the Simulacrum IA, content strategy and visual design are quickly converging on the Web. In 1999, Jakob Nielsen wrote an article that was undeniably ahead of its time: Differences between Print Design & Web Design. Print design is 2-dimensional while web design is 1-dimensional and n-dimensional simultaneously. Fast-forward to 2010 and it’s pretty easy to see how these differences have diminished drastically—or even disappeared. The Problem with Wireframes Today p.s.
Bootstrap 3.3.0 released 29 Oct 2014 Bootstrap 3.3.0 is here! This release has been all about bug fixes, accessibility improvements, and documentation updates. We’ve had over 700 commits from 28 contributors since our last release. Woohoo! Here are some of the highlights: Added a handful of new Less variables for easier customization. For a complete breakdown, read the release changelog or the v3.3.0 milestone. Download Bootstrap Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub: Download Bootstrap 3.3.0 Hit the project repository or Sass repository for more options. An update for the Bootstrap CDN will be available shortly. New tools Since our last release, we’ve open sourced two new tools: Bootlint, a custom linter for all your Bootstrap projects. They join LMVTFY, our bot for quickly validating HTML in live examples. Onward to Bootstrap 4 Perhaps the best part of releasing v3.3.0 today is that we can start to tell you more about Bootstrap 4! @mdo & team
MockFlow: Online Wireframe Tool AXLIB : Axure RP Design Library Wireframe Icons for Axure About the Icons Icons can be helpful for providing visual cues for functions in user interfaces. But when you're wireframing (creating user interface schematics), little blank boxes can be poor substitutes for communicating the purpose of the icon. This is a set of grayscale cursors and icons that come in handy when designing wireframes. The icons are designed to work well with your wireframes. What's Included in the Icon Set The product includes a library of 16px grayscale bitmap icons designed to work in Axure RP Pro, the powerful wireframing and prototyping application for Windows. License Agreement The Wireframe Icons are provided for use with Axure for personal and commercial purposes in Axure documents and prototypes. Installation NOTE: Mac users may have to extract the .zip file using Stuffit Expander (free) rather than using the Mac's archive utilities. Installation Version History
Free Axure Design Patterns | Wiliam Web Design Sydney Australia The main tool we use within our user experience (UX) team is an application called Axure. It allows us to create wireframes, prototypes and specifications for our clients before we start the design and development stages. There are several reasons for engaging in this type of methodology such as: It is a blueprint for your site which can be used as a reference throughout the production (design, development, QA, testing) stage. I have been working with Axure for several years know and have built up allot of templates and widgets that I use to help speed up the prototyping phase and here are a few I would like to share with you. Axure Design Pattern Demo In this Axure template you will find: Animated carousel This carousel loops through each slide twice when the page loads. Add this pop-up A pop-up Add This window. Video Modal This has both a static and YouTube example. Send to a friend pop-up A pop-up send to a friend modal window. Please read before downloading the Axure design patterns for free
Advanced prototyping with Axure training from the Usability Training Centre We make house calls! We can bring this course to you and run it for a fixed all-inclusive fee no matter where you are. All you have to do is provide the delegates and the meeting room. Next scheduled course We schedule this course based on demand. If you want to attend a public course, click on the button below. Overview: Advanced Prototyping with Axure This is the sequel to our Axure Essentials course. If you're less experienced with Axure, try Axure Essentials. "Although I had significant experience with Axure, I was self-taught and wasn’t structuring my prototypes in the most efficient way. Printable pdf course description for this seminar About your trainer Ritch Macefield Ritch is an acknowledged expert in Axure having led Axure projects for clients like Thomson-Reuters, Dell computers and Vodafone. This seminar is aimed at You'll benefit from this course if you are part of a user experience design team and need to be able to produce sophisticated prototypes. You will learn how to Duration
Axure Essentials training from the Usability Training Centre We make house calls! We can bring this course to you and run it for a fixed all-inclusive fee no matter where you are. All you have to do is provide the delegates and the meeting room. Next scheduled course We schedule this course based on demand. Overview: Axure Essentials Axure RP Pro is an industry leading tool for rapidly prototyping the web, desktop and mobile software applications, and its use is growing exponentially amongst the User Experience Design (UXD) community. Want something more advanced? "With no prior knowledge of Axure, I successfully completed the Essentials and Advanced courses and left feeling well equiped to start my new contract working with Axure for the first time on some 'seriously complex' applications. Printable pdf course description for this seminar About your trainer Ritch Macefield Ritch is an acknowledged expert in Axure having led Axure projects for clients like Thomson-Reuters, Dell computers and Vodafone. This seminar is aimed at Pre-requisites Duration