The Golden Ratio in Web Design 1. Anatomy of a Web Page The elements of a web page are like organs; they are vital to a properly functioning and aesthetically pleasing web page. These are the main elements of a web page. 2. All web pages use a container and for the same purpose; to contain page elements, however the way it is accomplished varies. Types of container: Liquid: Expands to fill the width of the browser window.Fixed: A specific width you choose which does not change regardless of browser window size. 3. The header isn't really a specific element although some may consider it to be. 4. Your logo is your identity and branding. 5. Page navigation is one of the most important elements; your visitors need it to use your website. Types of navigation: Horizontal: A series of links displayed inline, usually referred to as "navigation".Vertical: A series of links displayed as a vertical stack, usually referred to as "menu". 6. As everyone knows (or should), content is king! 7. 8. 9. 10. But wait! 11.
15 Fresh and Useful Photoshop Tutorials | Tutorials Part of being a designer is keeping your skills sharp and up-to-date. Skills may span a broad range of tools, but probably the most used tool of all designers is Photoshop. In this post, we’ve collected 15 fresh and useful Photoshop tutorials to help you brush up on your skills and learn new techniques. The types of tutorials in this collection include text effects, photo manipulation, interface design, and more. Simple Underwater Scene in Photoshop In this tutorial I will show you how to create a underwater scene with some bubbles and light effects. Creating Retro Folded Typography In this Photoshop tutorial, we’re going to create retro-looking text that seems like it’s constructed using folded strips of paper. How to Create a Photo Realistic Camera In this tutorial we will demonstrate a powerful combination of vector shapes, layer styles, and manual drawing to create a photorealistic camera. Making a Book of Magical Playground Scene 3D Water Text Effect with Repoussé in Photoshop CS5
Glyphish: Great icons for great iPhone + iPad apps 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. With so many tools available to quickly create digital wireframes, some may argue that this is an unnecessary step in the design process. But I think the free flowing style of a sketched wireframe or mockup can be refreshing. Besides, there’s nothing like good ole pencil and paper to get the creative juices flowing. 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 CommLogix Wireframe
jQuery API Creating Slick Forms Using Ajax, jQuery & CSS: No More Ugly Forms Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Impressive techniques using some jQuery magic to style slick forms with a simple, rich user experience that gets them excited about your contact, register or whatever form you have. A. Styling Forms Fields 1. iPhone-style Checkboxes iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. How to use it: Once the files are available to your site, activating the script is very easy: The initialization method takes a handful of options. - checkedLabel sets the text of the “on” state. 2. Uniform masks your standard form controls with custom themed controls. Using Uniform can be quite easy as well. $(function(){ $("select").uniform(); }); To “uniform” all possible form elements, just do something like this: $("select, input:checkbox, input:radio, input:file").uniform(); 3. 5. How it works: B. 1. 3. How to Use it: 4.
Sketching Templates For Mobile Projects Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle81 for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device. Outline Outline is a set of 28 printable sketching and wireframing papers (in PDF) for seven mobile platforms: Android, BlackBerry, iOS (iPad and iPhone), Meego, Symbian, webOS, Windows Phone 7. The set consists of a few combinations, such as actual size, 10 devices fit to a page, and landscape layout. Note: Print the sheets at actual size (i.e. do not resize). As a bonus, Outline includes an Illustrator file displaying the mobile devices. Outline paper set Windows Phone 7 and 8 panorama template Android 4.x template Tapsize With Tapsize, you can determine the optimal tap area without having an actual device. Tapsize paper set Calculating the grid Behind the Design (al) (il) Footnotes
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. Portail de l’informatique