background preloader

Designing Web Interfaces: 12 Standard Screen Patterns

Designing Web Interfaces: 12 Standard Screen Patterns
2010 Update- 15 patterns and 80 new examples By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consumer web site orientation, these concepts are central to enterprise application and web productivity application design and more broad than those discussed in the book. This is the first article in a three part series. With more companies turning to RIA frameworks for enterprise software development, these screen patterns are indispensable for product managers, UX designers, information architects, interaction designers and developers. 01. Master/Detail screen pattern can be vertical or horizontal. 02. The Browse screen pattern can be vertical or horizontal. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12.

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

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. Christopher Alexander, who came up with this stuff, calls these chunks patterns.

10 Ways to Improve Usability When You Thought it Was Too Late You’ve spent months working on your project and delivered it to the client. Initial feedback was positive, but they’ve spent a few days with it now and have asked if there is anything you can do to ‘make it more user friendly’. Ouch. It’s a bit late in the day to start any major restructuring. Learn HTML and CSS with these free beginner and advanced guides January 14, 2013, 2:46 PM — The Beginner's Guide to HTML & CSS and the Advanced Guide to HTML & CSS cover both the fundamentals and the latest techniques for web design and development in ten lessons each. They're good skills to have, even if you just want to create your own personal website or landing page. Created by designer and front-end developer Shay Howe, these e-courses offer examples and descriptions of pretty much everything you need to know to get started creating web pages. The first lesson of A Beginner's Guide to HTML & CSS, for example, talks about the difference between HTML and CSS and common terms you'll likely hear. The course introduces topics like positioning elements on a page, embedding media, creating forms, and organizing data with tables. The advanced version is newer, with new lessons posted every Monday until the ten lessons are completed.

Draw with Photoshop Brushes Hello guys! I've been trying to get an account on here for a while, it wouldn't let me, but now it did somehow... Anyways. This is my first, topic, as well as my very first post. Please don't flame meh! Heres how to get PS Brush packs into usable PNGs that the "Draw with Custom Brush" tool can recognize!

40+ Helpful Resources On User Interface Design Patterns Advertisement If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has – by now – solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating. A design pattern refers to a reusable and applicable solution to general real-world problems. A User Interface Definition Language in Common Lisp Wednesday, February 13, 2008 Introduction I like HTML in the same way I like PDF - as a document serialization format that does a reasonable job and that I never want to modify by hand. This is one of the main reasons I started Weblocks framework - I never wanted to write a line of HTML again. Ironically, I ended up writing a lot of HTML and learning more about its quirks, accessibility issues, and CSS hooks than I ever wanted to, but I finally ended up with a high level user interface definition language embedded into Common Lisp. Finally, HTML is out of my life, for good.

45 Splendid Latest Web UI Kits Collection Free User Interface elements are nothing less than a mine of gold for web designers. Web UI kits prove to be of massive help to the designers. They help in finishing the task faster make your designs look really great. UI kits give that something extra to your designs. Wireframes along with these UI elements could help you create fantastic prototype and help impress your clients. These Web UI kits could help designers who provide web application development services to a great extent, as these web applications need the deign to be very attractive.

UI Patterns and Techniques: Introduction Introduction There's nothing new here. If you've done any Web or UI design, or even thought about it much, you should say, "Oh, right, I know what that is" to most of these patterns. But a few of them might be new to you, and some of the familiar ones may not be part of your usual design repertoire. Each of these patterns (which are more general) and techniques (more specific) are intended to help you solve design problems.

10 UI Design Patterns You Should Be Paying Attention To Advertisement Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. He adapted his observations to his work and published many findings on the topic. Pie In The Sky This blog post is a hands-on experiment. If you have Firefox 3, before you read any further, please go to this page and try out the demo. (Unfortunately, the demo will only work in Firefox 3.0 and later, because it uses some cutting-edge features of the Canvas object that aren’t supported in Internet Explorer, Safari, or older versions of Firefox. I believe strongly in presenting web content in a cross-browser compatible way, but sometimes for feature demos, requiring Firefox is unavoidable. This is Mozilla labs, after all.) Anyway, the demo presented two different styles of pop-up menus and asked you to repeatedly select the same menu item.

Related: