Inspired UI - mobile patterns The State of Web Design Trends: 2011 Annual Edition 2010 has been an incredibly verdant year for web designers. Mobile has hit the mainstream; Web typography has reached new levels of sophistication; New coding techniques have vastly improved our ability to get creative with design (without compromising stability). All in all, it's been a year that's moved fast, even by the standards of the web, so let's dig in to our first annual post covering the state of web design as 2010 turns to 2011. The Death of the Fold The traditional "fold" (the imaginary line on a screen that designates what content is visible before a viewer needs to scroll) became vague, unimportant, and nearly irrelevant in 2010. Why? We'll be discussing this topic in a lot more detail this month, so subscribe (it's free) to stay tuned :) Mobile Sites Sites have been being designed for mobile scenarios since the inception of mobile devices... but 2010 has seen a huge push towards entire sub-sites that are designed specifically to be viewed on small, handheld screens.
SOFA - The Versions Icon This week I’ve decided to take you through the development of the Versions icon. For those who need some indication of the work involved in creating an icon, you may get a feel for it. Although this was an in house project and we weren't bound by any deadlines, this article still illustrates the lengths we take to create a strong visual brand. Important to know is that, long ago, Versions had an other icon. It was designed by Jasper Hauser even before Sofa was founded. The old icon and it's use in the sites header graphic. The old icon had all the characteristics a good icon should have. So, we set out on a quest to find a good replacement. The difficulty of a bonsai tree however was that it's not really easy to make in Photoshop and still give it that soft Mac feel. A couple of screenshots of the working progress. The final render of a bonsai tree. Usually at this point the rest of the icon is done in Photoshop, because it's easier to get that aqua-feel in Photoshop than 3D.
Lumzy Web Best Practices Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block. Illustration: With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. The concept The idea is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. The trick The padding property is the magic that styles a box with an intrinsic ratio. The CSS rules below illustrate how to style the parent and child to create a “magic wrapper”—a container that proportionally resizes itself depending on the width of its parent. Let’s review the declarations in each rule, starting with .wrapper-with-intrinsic-ratio. Now, let’s consider each declaration within our .element-to-stretch rule. The clean up
Smashing UX Design — Usability, Psychology and Information Architecture Category: UX Design This category features quality articles on usability, information architecture, interaction design and other user experience (UX) related topics – for digital (Web, mobile, applications, software) and physical products. Through these articles, experts and professionals share with you their valuable ideas, practical tips, useful guidelines, recommended best practices and great case studies. Curated by Chui Chui Tan. . Popular tags in this category: Freebies, Web Design, Techniques, Inspiration, Business A Guide To Validating Product Ideas With Quick And Simple Experiments You probably know by now that you should speak with customers and test your idea before building a product. Mistakes include testing the wrong aspect of your business, asking the wrong questions and neglecting to define a criterion for success. Read more... Building Clickthrough Prototypes To Support Participatory Design Read more... Creating Responsive Prototypes With Adaptive Views In Axure RP 7
The iPhone Tab Bar « SignificantPixels Over the last couple of years, the iPhone has greatly popularized the tab bar navigational model for mobile handsets. Apple has put together a design rationale for the tab bar in their Human Interface Guidelines (HIG) along with lots and lots of other information — they do however leave some question unanswered. Having worked with interaction and graphical design for iPhone applications during the last couple of years I’ve managed to pick up some lessons the hard way, and in this post I would like to share my thoughts on a couple of do’s and don’ts. Lesson 1: The magic number is five This hardly is news to anyone with a bit of insight into iPhone design. What happens after five? First of all, you constantly lose an extra tab You put the burden on the users to remember what is hidden beneath the “More” tab. Lesson 2: Ask the users Lesson 3: Put a lot of time on icons and copy A couple of points to keep in mind regarding the iconography and copywriting: Lesson 5: Don’t make tabs exclusive
All the sizes of iOS app icons iPad GUI PSD Design Template Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad. The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768 x 1024 so anything you design in the Photoshop file can easily be brought over to the SDK. It’s 1.0 so I’m sure we’ll notice missing elements as we begin to use it. If you like it or use it, help us out by retweeting it.
10 Completely Free Wireframe and Mockup Applications Every web designer and developer should have a good and reliable wireframe (mockup or prototype) tool at there disposal. The importance of such a tool differentiates amongst web designers and developers, some use them, some don’t. Personally, I use them. The downside is that a good and reliable wireframe application can come at a heavy price, have you seen the cost of a good wireframe application? So, what options do you have? Please note that this post really old, so some of the below apps may not longer be free or available. Hot Gloo – The Online Wireframe App The first thing you need to know about Hot Gloo is that it is in Beta, the second thing you need to know is that it is currently free, but with plans to charge a fee later on this year, so, grab your chance now while its free, its worth it. HotGloo is an easy to use and intuitive Flash built web-based wireframe app, that can create conceptual interactive prototypes of a website in the early development stages. Pencil Project Cacoo
Icon Design Guidelines An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app. When you design icons for your app, it's important to keep in mind that your app may be installed on a variety of devices that offer a range of pixel densities, as mentioned in Devices and Displays. But you can make your icons look great on all devices by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of the device screen and loads the appropriate density-specific assets for your app. Because you will deliver each icon in multiple sizes to support different densities, the design guidelines below refer to the icon dimensions in dp units, which are based on the pixel dimensions of a medium-density (MDPI) screen. Launcher The launcher icon is the visual representation of your app on the Home or All Apps screen. Sizes & scale Launcher icons on a mobile device must be 48x48 dp. Proportions Style
Lovely UI Designing the new Campaign Monitor iOS icons One of my first icon projects for Campaign Monitor was to create a set of Apple iOS icons for our mobile web application. These are the icons that show up when you bookmark our mobile site to the ‘home screen’ on your Apple device. Now, with all of the iOS devices floating around out there, you can do things the easy way by creating one large icon which is then scaled down for that particular device, or you can do it properly by creating a pixel-perfect icon for each device. For the iPod Touch/iPhone 2.5/3G/3GS, the icon size is a miserly 57 pixels square. For the iPad, it’s 72 pixels square, and for the newer iPhone4, it’s a whopping 114 pixels square. The challenge with iOS icons, or for that matter, any icon that will be used at multiple sizes, is that you need to come up with an idea that is memorable and interesting, whilst keeping things clear and concise enough that it is still recognisable at smaller sizes. The value of sketching Push yourself! Refined sketches of my two main ideas
Home - Pencil Project