Cross Browser Testing. Real mobile devices & browsers! Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture .
The Responsinator Gestalt Principles Applied in Design By Michael Tuck Web designers, like other artists and craftsmen, impose structure on the environment. We enforce order and beauty on the formless void that is our blank computer screen. We do it in different ways — creating an organized layout first, writing text and content first, or even basing a design concept on an image, a color palette, or something that visually trips your trigger, whether it’s a sunset or a Song Dynasty painting. Wherever you gain your inspiration, it’s often not just the particular element that sparks your artistic impulse; it’s the totality of the element and its surroundings. Grasping that totality concept — both the individual element and the whole in which it exists are important both separately and together — is essential to understanding how gestaltism influences our design choices. We’ll cover 6 principles related to gestalt, in the context of design, and they are: ProximitySimilarityPrägnanz (Figure-Ground)Symmetry"Common Fate"Closure Source: Dr. Mr. Symmetry
Personality in Design Our lasting relationships center around the unique qualities and perspectives we all possess. We call it personality. Through our personalities, we express the entire gamut of human emotion. Personality is the platform for emotion#section1 Interface design lives in a broader category called Human-Computer Interaction, or HCI, sitting among computer science, behavioral science, and design. I’ll let you in on a secret. Emotional design’s primary goal is to facilitate human-to-human communication. I’d like you to pause for a moment, and recall a person with whom you recently made a real connection. Hold on to that memory. Let’s think of our designs not as a facade for interaction, but as people with whom our audience can have an inspired conversation. Once again, history can inform our work today. A Brief History of Personality in Design#section2 We have a history of injecting personality into the things we make, in a bid to make mechanical things more human. Personas#section3
The Messy Art Of UX Sketching Advertisement I hear a lot of people talking about the importance of sketching when designing or problem-solving, yet it seems that very few people actually sketch. As a UX professional, I sketch every day. I often take over entire walls in our office and cover them with sketches, mapping out everything from context scenarios to wireframes to presentations. My desk. Although starting a prototype on a computer is sometimes easier, it’s not the best way to visually problem-solve. Many articles discuss the power of sketching and why you should do it, but they don’t go into the how or the methods involved. Sketching ≠ Drawing Some of the most effective sketches I’ve seen are far from perfect drawings. Sketching is an expression of thinking and problem-solving.It’s a form of visual communication, and, as in all languages, some ways of communicating are clearer than others.Sketching is a skill: the more you do it, the better you’ll get at it. OK, let’s get started. Work In Layers Technique Why? Tools
Color Theory for Designers, Part 1: The Meaning of Color Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. This is the first in a three-part series on color theory. Warm Colors Link Warm colors include red, orange, and yellow, and variations of those three colors. Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Red (Primary Color) Link Red is a very hot color. Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Outside the western world, red has different associations. Examples Cool Colors Link Gray Link
95 amazing Adobe Illustrator tutorials | Illustrator Since its release, Adobe's Illustrator has grown to become the designer's right-hand man when it comes to creating premier vector graphics and elements. There's so much you can do with it that it can be difficult to know where to start. Happily, we're here to round up the best Adobe Illustrator tutorials, covering everything from illustration to logo design, adding depth to your typography and much more, to help you get the most from this amazing app. Jump directly to a section using this handy category guide, or just get started browsing the whole list! With so many to choose from, you're sure to find a project to inspire you, whether you're using an older version of Illustrator or are signed up to the Creative Cloud. Here goes! Adobe Illustrator for beginners: 11 top tips If you're just starting out with Illustrator, here's a fantastic guide to some of its tools. Setting up a new document Essentials of the Pen and Pencil tools Creating objects with the Shape tools Empty list