6 Tips for a Great Flex UX: Part 5 By Theresa Neil Since the book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR. These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 5 of 6: * Play With It: 10 Explorers & Galleries * Learn From the Best: 10 Great Flex Apps * Learn From the Rest: 10 Great RIAs * Stock Your Toolbox: 40+ Custom Flex Controls * Review Usability Best Practices * Avoid Common Mistakes: 10 Anti-Patterns Don’t forget the usability basics. 1. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 1.0 BaseCamp by 37signals The upload button is enabled, until clicked. 1.1 Picnik Progress message and indicator shows while the application loads 1.2 Tick A feedback message is displayed when an action is performed 1.3 Windows Live Account Password strength is shown as the password is entered 2. 3. 4. 5. 6. Minimize the user’s memory load. 7. 8. 9.
7 Key Principles That Make A Web Design Look Good - Noupe Design Blog Oct 15 2009 By Juul Coolen Everyone and their grandfather (and dog) seems to have a website these days. “Fortunately” for us designers, not everyone seems to understand what makes or breaks a Web design. So what makes something pretty? These elements are the 7 key principles that make a Web design look good: Balance,Grid,Color,Graphics,Typography,White space,Connection. 1. Balance is all about ensuring that your design does not tip to one side or the other. Example Look at the dog in the header graphic of Khoi Vinh’s Subtraction website below. This is what we call asymmetrical balance, and this is what balance is about. Here below is another example of symmetrical balance, this one by The First Twenty. You will find that every design you think looks good has a well-constructed balance underlying it. 2. The concept of grids is closely related to that of balance. The grid lends itself particularly well to minimalist designs. 5 Thirty One by Derek Punsalan shows why: 3. 4. 5. Font Stacks 6. 7.
The Principles of Design The web professional's online magazine of choice. In: Columns > Design in Theory and Practice By Joshua David McClurg-Genevese Published on June 13, 2005 Starting with the Basics This column is about Web design—really, it is—though it may at times seem a bit distant and distracted. We can group all of the basic tenets of design into two categories: principles and elements. Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. How Does Web Design Fit In? I tend to define Web design as being one of many disciplines within the larger field of design (a peer to print design, industrial design, interior design, etc.). The first three articles of this column will be dedicated to unearthing these universal gems of insight so that we may better understand our profession. The Principles of Design There are many basic concepts that underly the field of design. Let’s begin by focusing on the principles of design, the axioms of our profession. Rhythm
Design a Beautiful Website From Scratch Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Step 1 - Download the 960 Grid System Template The designs I create are nearly all based on the 960 Grid System. Step 2 - Defining the Structure Before we open our PSD grid template and begin drawing, we first need to define the structure of our site. Step 3 After we’ve defined our site structure we’re ready to move on. Step 4 Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high. Step 5 Create a new layer above the rectangle and set Layer mode to Overlay. Step 6 New layer. Step 7 With the Rectangle tool selected, draw in a big box around 500px underneath the top rectangle. Step 8 Now we are going to create the same light effect as described in Step 5. Create a new layer above all the current layers. Step 9 Step 10
10 Principles Of Effective Web Design - Smashing UX Design Advertisement Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist. 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 about 10 Usability Nightmares1 and 30 Usability Issues2 we’ve published before,we’ll cover more principles of effective design in our following posts. 1.
Rosario Florio & Larissa Kasper – SI Special △Andrea Rüeger Business Card Logo and business cards for Andrea Rüeger, CNC production. Silk screened on green paper. In collaboration with Larissa Kasper (www.larissakasper.ch). Fonts: Apercu (Colophon Foundry) △Orgel Klang Elektro Tanz Flyer 148 x 210 mm Flyer for a special event in a church. Fonts: Maria Alternate & Cg Triplett (AGFA/Monotype) △A—Z Flyer 105 x 148 mm Postcard flyer announcing a party at the club ‘Zukunft’ in Zurich organised by the label ‘Abbruchhaus’, which means ‘condemned house’. Fonts: ITC New Johnston (customized) Designed by Larissa Kasper △Freshcuts Recordings We love it (Series) Vinyl 12″ Record cover for “We love it”. Fonts: Apercu (customized) △Printed in Magazine 218 pages 200 x 270 mm «Printed in» – The spontaneous appearance of similar opinions» is a magazine, which intends to bring blogs and printed media together and shows that these two medias can be combined. Fonts: Larish Neue (Radim Pesko), Client Mono (Gestalten) & Johnston Neue (Customized New Johnston)
useit.com: Jakob Nielsen on Usability and Web Design 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.