background preloader

An Introduction to Using Patterns in Web Design

An Introduction to Using Patterns in Web Design
The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pixel combinations for each page we make. There is a better way to manage this vast complexity than by making big decisions up front and hoping for the best. To make better sites — sites that are functional, beautiful, and "usable" — we have to break our design problems up into small independent chunks based on the real issues within our requirements. I'm going to show you how to sidestep your habits and assumptions and use patterns to make better design decisions. Step one: List your bits Start by making a list of all the specific bits that must fit together for the web page to succeed as a whole. Here are the bits for a "My Account" page that I recently designed: Do this on paper if you're working on your own. Let's look at C for example: Related:  Organisation du projet

Photoshop Users: How To Switch To Sketch Many requested that I write a tutorial on how to get started with Sketch so here it is. Sketch is the best alternative to Photoshop and is completely focused on user interface design. I must admit that the resources for Sketch are underwhelming right now and I am on a mission to fix that. A Follow-up To My Previous Sketch Articles Download the Free Trial Head over to BohemianCoding and download the trial. Migration: My Icons As a user interface designer, icons are about the only components for which you won’t be starting from scratch. Thankfully, Sketch will allow you to import SVG icons and edit the vector points. Icon Sets To Start With There are free sets and there are paid ones. Pixicon by Jackie Trananh ($5)Symbolicons ($35)Glyphicons ($59)Entypo (Free)Batch by Adam Whitcroft (Free) PSD Icon Sets: How To Export Photoshop Shapes To Sketch If you happen to have a set of icons that are exclusively made for Photoshop, the process is a bit more complicated to suck the SVG out of them.

Designing With Web Standards, 2nd Edition Designing with Web Standards[1] is a web development book by Jeffrey Zeldman (third edition with Ethan Marcotte). Zeldman co-founded the Web Standards Project in 1998 and served as its director during the formative years when the project was petitioning browser makers to support standards. Zeldman left the project in 2003. The book’s audience is primarily web development professionals who are focused on web standards design work. DWS is used as a textbook in over 85 colleges, including New York University, UCLA, Dartmouth and Brigham Young University. Summary[edit] Written by Jeffrey Zeldman, a staunch proponent of web standards and founder of the award-winning web design studio Happy Cog,[2] Designing with Web Standards guides the reader on how to better utilize web standards pragmatically to create accessible, user-friendly web sites. For the third edition of the book, Zeldman brought in fellow author Ethan Marcotte[3] to “substantially revise” and update the content.[4] Critique[edit]

Idea to Paying Customers in 7 Weeks: How We Did It This is the first of an ongoing series of posts called Building Buffer where we share our methods and learnings with the aim to help people and learn from others who have had similar experiences. We’d love your comments. Rewind… I’ve learned more in the two and a half month period since I launched Buffer than ever before. A twinkle of an idea It was a tiny idea. Keeping version 1 minimal. I’m an advocate of the lean startup principles which Eric Ries proposes. In Ries’ guide to Minimum Viable Products, one of the key things he answers is “how minimal should your Minimum Viable Product be?”. Probably much more minimum than you think I had read that line so many times. The smallest test Here’s what we launched with: The aim of this two-page MVP was to check whether people would even consider using the app. Learning more So we had validated that people probably wanted the product. The launch Being prepared for a long journey with lots of course-correction Taking advantage when things go well

The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes Designing wireframes and prototypes play an important role in every web development project. Whether you’re a creative agency or an individual, wireframing your designs before development is something that can help you save your valuable time and money. “Good design must necessarily, in my opinion, have an impact on people’s lives, no matter how seemingly small. Good design changes things.” – Garr Reynolds Web Prototyping saves the costs of any marketing communication that may be necessary to undo brand damage resulting from a poorly functioning website and a frustrating user experience. Of course, a designer doesn’t have to reinvent the wheel with each new wireframe diagram. These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. What Is A Wireframe? Understanding how to work with wireframes is the key to creating a successful website prototype. Why? #1 Balsamiq

Web Form Design Patterns: Sign-Up Forms, Part 2 | How-To Advertisement Last week we have presented first findings of our web forms survey1. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved. We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Please notice that this post is not about checkout forms — that’s a topic for another discussion, we may consider them separately in one of the upcoming posts. 3. In the first part of our research we have considered the placement of the sign-up links and sign-up forms as well as on the visual appearance of forms. 3.1. Apparently, to improve form completion rates designers try to avoid all kind of distractions and offer a clear, unambiguous and simple web form. 3.2. 3.3. If hints and help appear, they appear… 3.4. According to our research, 3.5. 3.6. 3.7. 3.8. 3.9.

Créativité et neuroscience Créativité et neuroscience. Vous pensez toujours que le cerveau gauche est la partie du cerveau de la logique qui analyse, calcule et organise ? Vous croyez toujours que le cerveau droit est celui de la création, de l’imagination et de la poésie ? Parcourez les travaux des neuroscientifiques cognitifs comme James Berns, Anna Abraham, Mark Beeman, Adam Bristol, Kalina Christoff, Jeremy Gray, Adam Green, Rex Jung, John Kounios, Hikaru Takeuchi, Oshin Vartanian, Darya Zabelina ou les français du CNC ou L2C2 ainsi que les travaux de Jean-Pierre Changeux, le pionnier des neurosciences en France. Le process créatif, de l’inspiration à l’induction (selon l’approche de Trendemic) en passant par l’incubation et l’illumination (selon l’approche de Wallas) comprend de nombreux process cognitifs et émotionnels. Approche de Graham Wallas 1. Lorsque vous portez votre attention – que ce soit pour vous concentrer sur un problème, apprendre ou lire – c’est ce réseau qui s’active. 3.

Improving Your Process: How Wireframes Can Help One of the things I love about working on the Web is the pace of which change takes place. Things in general move at an alarming rate. What’s on the forefront today is yesterday’s news tomorrow. I’m not sure exactly why that aspect of the industry interests me so much as it can be viewed as a curse. How can you expect yourself to excel in a medium which changes so rapidly, abruptly, and repeatedly? While some people may view it as a curse, I think of it as a challenge. Every Web designer or developer I’ve observed or read from does things a bit differently than myself. One of the best qualities of excellent Web design is the structure of the page. Wireframes have also helped exponentially with client work. This is a major hurdle for Web designers the world over. Just like design comps, you could insist that your wireframes are signed off upon. A wireframing stage can also to avoid conversations surrounding link color and font size too early in the game. Tools for Wireframing

Web 2.0 how-to design style guide In this tutorial, I describe various common graphic design elements in modern web “2.0” design style. I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs. It follows on from my Current Style article, and analyses in greater depth the design features of the current “Web 2.0” design style. To learn how to design Web2.0 sites yourself, you must read “Save the Pixel – The Art of Simple Web Design”, which is a comprehensive guidebook to the principles and techniques of Web2.0 design. Summary of Best Web Design Features The list below is a summary of many of the common features of typical “Web 2.0” sites. Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0” – or good! I’ve already addressed some of these factors in my introductory Current Style article. Best Website Design? Web 2.0 ?! Best Web Design Features 1. When? Always! 2.

Éditeur de cours : nouvelle version, itération 1 Vous savez quoi ? On a une grande nouvelle. Le genre de nouvelle qui nous a fait utiliser tout le stock de GIF disponible pour les mots-clés “excited dance” et “evil laugh”. Le nouvel éditeur de cours est sorti ! OUI, ENFIN, il y a une mise à jour de l’interface que nos auteurs utilisent pour créer leurs cours. :) À l’édito, on a déjà imprimé sa capture d’écran pour la ranger dans notre portefeuille et la montrer à tous nos amis. Il faut dire qu’il est beau, non ? Nouveau code pour nouvel éditeur Bon, je tempère un peu : il s’agit plus exactement de la première itération de la nouvelle version de l’éditeur de cours. Mais alors, quel est l’intérêt ? J’y viens : l’intérêt, c’est que l’éditeur a été entièrement réécrit par l’équipe tech et que son code est maintenant tout propre. Tenez, ça, c’était le code de l’ancien éditeur de cours : Et ça, c’est le code du nouvel éditeur : On y voit plus clair, non ? Améliorations de l’itération 1 Vous ne pouvez plus : Photo couverture : Clever Cupcakes

Web Site Wireframes – Samples, Examples : FatPurple Originally published February 2007 (aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page Schematic) What are wireframes? Web site wireframes are blue prints that define a Web page’s content and functionality. They do not convey design – e.g. colors, graphics, or fonts. How are wireframes used ? Wireframes – combined with Site Maps -are the bread and butter tools of information architects. Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet. Wireframes can end up evolving into the default requirements document for a system. How are wireframes created? Wireframes – like most information architecture diagrams – can be created using a variety of software programs. I have also seen wireframes created using Excel, Word, and Power Point. Wireframes need to achieve a balance between being too detailed and too general. HTML Wireframes Wireframe Examples Sample Wireframes (pdf)Sample Wireframes 2 (pdf)Sample Wireframes 3 (pdf)

12 Steps to Creating a Professional Web Design | Web Site Design Blog Before we share some of the necessary steps used to create a professional web design and website, the following question must be addressed: What constitutes a "professional web design"? More often than not, a web designer or web design company claims to offer professional web design services for their clients. However, should they be promoting "web design services" rather than "professional web design services"? When measuring the professionalism of a web design and website, one must take into consideration a number of factors/steps: To put it simply, what separates professional web design from web design is whether or not a designer or web design company takes into consideration the above items when designing and building a website. The good news is, you don't need to hire a professional web design company or professional web designer if you want a professional web design and website. As a supplemental resource, visit our H2O Playlist on Professional Web Design. Let's get started.