Mockups Home Take a second. Let it sink in. The first impression might be disorienting. There are very few interface elements on the screen. Getting your ideas out should be effortless. Our sweet spot: the ideation phase Mockups really shines during the early stages of designing a new interface. Mockups is zenware, meaning that it will help you get "in the zone", and stay there. Mockups offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later. See what you can build with Mockups Download the samples above, or find more on Mockups To Go, our community-contributed stencils site. Designed for collaboration Your whole team can come together around the right design using Mockups. Mockups intentionally makes your wireframes scream both This is not final! Learning UX Design Keyboard Shortcuts Go really, really fast.
The Seven Principles You Need to Know to Build a Great Social Product Social products are an interesting bird. For even the most experienced product designer, social products prove an elusive lover. While there are many obvious truths in social products, there are also alot of ways to design them poorly. Especially when you are deep in the moment making pixel-level decisions trying to remember what’s important, things may not be so clear. The only magic I’ve found in designing compelling social products that have the best shot at breaking through the noise and capturing people’s time and money is in being extremely clear on how your social product meets a few key design principles. 1. This isn’t touchy feely stuff. To successfully use the fleeting moments you have, you need to orchestrate everything under your control to work together seamlessly under a single brand with a single reason for existence. 2. It’s not always obvious upfront what should be your best in the world focus and enshrining the wrong thing can be a problem. 3. 4. 5. 6. 7.
Website Design Mockup Tips This tutorial will show you a few tips, tricks and techniques you can use when mocking up your next website. When mocking up a website design, there are a few design elements and styles that are really easy to create in code, but may not be as obvious when working in Photoshop. Borders and Underlines It’s incredibly easy to create dotted (and dashed) underlines and borders with some simple HTML and CSS. Let’s start with a dotted underline. Dotted (and Dashed) Underlines Create a new document 2-pixel wide by 1-pixel height. Zoom in as close as possible (1600%) by pressing [Ctrl + Alt + =]. Press [Ctrl + A] to select all and go to [Edit > Define Pattern] and give your new pattern a name. Back to your website mockup, create a new Pattern Fill Layer [Layer > New Fill Layer > Pattern...] or use the icon at the bottom of the Layers palette [F7]. Press [D] to reset your colors and press [Ctrl + Backspace] to fill your new pattern layer mask with black. Text and Fonts Font Size Quick Guide .
Ontology is Overrated -- Categories, Links, and Tags Ontology is Overrated: Categories, Links, and Tags This piece is based on two talks I gave in the spring of 2005 -- one at the O'Reilly ETech conference in March, entitled "Ontology Is Overrated", and one at the IMCExpo in April entitled "Folksonomies & Tags: The rise of user-developed classification." The written version is a heavily edited concatenation of those two talks. Today I want to talk about categorization, and I want to convince you that a lot of what we think we know about categorization is wrong. I also want to convince you that what we're seeing when we see the Web is actually a radical break with previous categorization strategies, rather than an extension of them. What I think is coming instead are much more organic ways of organizing information than our current categorization schemes allow, based on two units -- the link, which can point to anything, and the tag, which is a way of attaching labels to links. PART I: Classification and Its Discontents # And yet. Domain
Liste de 18 outils pour prototyper des maquettes Aujourd'hui, j'ai cherché une petite application qui me permettrait de réaliser des maquettes d'interfaces graphiques simplement, comme je le faisais sous Linux avec Pencil (mais pour Mac OSX). Puis au fil de mes recherches, j'en ai dégoté plusieurs qui je pense vous intéresseront. Voici donc une sélection de 18 outils de création d'interfaces graphiques (et de schémas) pour vos projets. J'ai fait un mix entre les outils Mac, Windows et Linux (en précisant à chaque fois) et j'ai listé les outils payants à la fin (en bonus). Balsamiq mockups Fonctionne sous Mac, Windows et Linux. Rejoignez les 60762 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie..
Hypertext Now: Hot Wired Style If I was slow to read Jeffrey Veen's Hot Wired Style: Principles for Building Smart Web Sites, my tardiness may in part be excused by the title. The Wired style is so well known, so idiosyncratic, and so recognizable, that a style guide seems almost redundant. Fortunately, the title is wrong. This isn't a style guide, it's an expanded case study: a description of the philosophy and implementation decisions that underlie a popular and ever-changing family of Web sites. The chapter headings break down into a list of exhortations that might appear in any Web design manual: Embrace the mediumKnow your [HTML] codeDegrade gracefullySubvert hierarchyMaster hypertext...etc. Though this is all good advice, none of it is especially new. The details, however, are interesting indeed. Unfortunately, Hot Wired Style sometimes loses its nerve (and its details) just when things start to get interesting. The crowd scrutinized the candidate's comments. He urges designers to link with care:
Five Principles to Design By Five high-level principles that guide my design. 1. Technology Serves Humans. Too often people blame themselves for the shortcomings of technology. This is horrible! Technology serves humans. 2. Art is about personal expression. Design, on the other hand, is about use. Unlike Art, Design is always contextual. Great Art, on the other hand, is always in style. The litmus test. 3. Designers do not create experiences, they create artifacts to experience. The ultimate experience is something that happens in the user, and it is theirs. 4. An interesting property of great design is that it is taken for granted. Bad design is obvious because it hurts to use. 5. As Saint Exupery said, “In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.”
10 Principles Of Effective Web Design | How-To Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! Usability and the utility, not the visual design, determine the success or failure of a web-site. We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information. Please notice that you might be interested in the usability-related articles we’ve published before: Principles Of Effective Web Design Guidelines Link How do users think? Users appreciate quality and credibility. 1. 2. 3. 4. 5. 6. 7. 8. 9.
Formalize CSS Formalize CSS | View demo | Download | GitHub repo Formalize CSS — Dress up your forms! Intro As designers, we are used to having quite a bit of control over how things are displayed in a browser. By far, one of the most frustrating parts of dealing with browser inconsistencies has got to be forms. Some designers advocate styling form elements to match the brand of a site. That’s all well and good, except most browsers don’t mesh completely when it comes to OS consistency. I would say that I fall somewhere in the middle of the two camps. My Solution I want some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system. I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. I have also added a few niceties. I’ve left untouched the input types of range and file. Make it Yours WebKit Thanks Screenshots
20 Snippets You should be using from Html5 Boilerplate I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.” It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template. Html We will start off by checking out some of the html snippets used in the resource. Favicon and Apple icons The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Faster page load hack Css