background preloader

Open - A Free Front-End Resource

Open - A Free Front-End Resource
Related:  Design patternsInformation Analyses

Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox

Main Page - Social Patterns Mock4U | Mock4U is Mockups for UML using Balsamiq Mockups. Be agile and use Balsamiq Mockup to create your UML design, too. See also Mockups for Agile. Use Case Diagrams Class Diagrams Sequence Diagrams Other diagrams are in preparation. CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique?

50 Sketching Resources for User Experience Designers Sketching is a critical part of the User Experience Design process. Sketching allows us to explore ideas and iterate on concepts quickly and easily before creating detailed mockups. Below is a roundup of many different sketching articles, tools, templates, presentations, videos, books, and examples to help User Experience Designers learn more about sketching and how it benefits UX design. Articles about Sketching Sketching Tools Sketching Templates Presentations about Sketching Sketchboards: Good Design Faster: (PDF) Brandon Schauer shares his sketchboarding presentation from the CanUX 2008 conferenceSee -> Sort -> Sketch: Pen & Paper Tools to get from Research to Design: Kate Rutter’s workshop slides from the 2010 IA Summit.Talking About Sketching About Interacting: Christopher Fahey discusses the sketch “resolution spectrum” and how sketches can communicate your thinking. Videos about Sketching Books about Sketching Sketching Examples Catriona Cornett View My Portfolio Follow Me:

Index - 4ourth Mobile Design Pattern Library Designing Mobile Interfaces: Patterns for Interaction Design is a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns. Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology. Along with appendices detailing mobile technologies, type and design principles and human factors, you will have a base of knowledge to make up your own mind, and react to the always-changing mobile environment. "Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Buy it from Amazon: Buy it direct from O'Reilly: Or, you can just read it right here on this wiki. Read in other languages Preface Designing Smartphone Interfaces The Patterns Additional Topics References

How to Get Your Ideas Across to Clients We know all too well the common and frustrating design scenarios clients present us with, such as wanting us to stretch images disproportionally, cramming as much information as possible in a small space so that you need a magnifying glass to read the text, or brushing off design best practices. Yet we seem to always have the same flat rebuttals to throw back, and furthermore, we repeat them time and time again. I’d like to share with you two quotes that have helped me deal with getting my ideas across to clients. "Tell me and I will forget. "You only need three guiding principles: show up, tell the truth and be on time I’ve come to realize that in order to drive the point home, you have to evolve your method of communication. Be Honest, Brief and Direct Your relationship with a client can be compared to any other relationship: if there is no trust, you will not be able to communicate effectively. Say something like this: Instead of humoring your client like this: Lab Experiments Be Prepared

Guide to Website Navigation Design Patterns In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns. For each site navigation design pattern, we will discuss its common characteristics, its drawbacks, and when best to use it. Top Horizontal Bar Navigation Top horizontal bar navigation is one of the two most popular kinds of site navigation menu design patterns out there. The top horizontal bar navigation design pattern is sometimes paired with drop-down menus whereby hovering on a navigation item reveals second-level child navigation items. Common Characteristics of Top Horizontal Bar Navigation Navigation items are text links, button-shaped, or tabbed-shapedHorizontal navigation is often placed directly adjacent to the site’s logoIt is often located above the fold Tabs Navigation

How To Persuade Your Users, Boss or Clients - Smashing Magazine Advertisement Whether you are getting a client to sign off on a website’s design or persuade a user to complete a call to action, we all need to know how to be convincing. Like many in the Web design industry, I have a strange job. I am part salesperson, part consultant and part user experience designer. One day I could be pitching a new idea to a board of directors, the next I might be designing an e-commerce purchasing process. There is, however, a common theme: I spend most of my time persuading people. As Web designers, we often have to nudge people in the direction we want them to go. 1. The worst thing you can do is enter a meeting or begin designing a user interface with a personal agenda. Start by ListeningTo achieve this, you must really listen. Tailor Presentation of AgendaRather than forcing the people in the room to reluctantly agree, tailor your presentation of ideas so that they see the benefit of them. 2. The same approach can be used online. 3. 4. 5. Conclusion (al)

Patternry | User Interface Design Patterns for Ideas and Inspiration