Snow White, Steve Jobs and Apple’s Awakening as a Global Design Leader

Imagem

keep-it-simple-cover_0

In October 2013 frog founder Hartmut Esslinger will publish his new book Keep It Simple – The Early Design Years of Apple, an insider’s account of the origins of Apple’s iconic products and brand. “Keep It Simple” is the story of Steve Jobs’ quest in the early 1980s to bring a radically new design language to the historically desert-dry sensory experience of computer technology. This process started with the so-called “Snow White” project, a design competition won by frog. Eventually, Snow White would change the trajectory of the company’s future, and redefine the way we think about consumer electronics and technology today. We invite you to read an abridged chapter from Hartmut Esslinger’s new book.

+++++++++

The Snow White project briefing was thorough and well-written but I knew that the process and setup it proposed would prove inadequate to the task of meeting Steve Jobs’ goal of creating designs that were “the best in the world.” I was determined to help him achieve that goal.

It became very clear to me that we were competing for an opportunity to help Steve Jobs create much more than a visual design language. Apple needed a cutting-edge system that would enable Steve to translate his vision into marketable products, and frog was in the process of helping him build it. We were involved in a real revolution – one that would extend well beyond the changes our work would bring to Apple. The work we were doing both in our Black Forest studio in Germany and in that small office in Cupertino would go on to reshape the way design was seen throughout America and the world.

Setting Goals for Apple’s Design Language and Visual Brand DNA

In the most simple terms, a design language is a visual system made up of defining signature and shape elements, materials, colors, patterns and textures, which provides a line-up of products with a unique but consistent look and feel. A design language isn’t about a specific product or style; it’s about forming a visual brand DNA that expresses a company’s true potential, as well as the founders’ unique values and (hopefully) visionary goals.

For high-tech-industrial companies, any design language must be both special and simple, because the lifecycles of strategy, design, production, usage and recycling attached to these products are extremely long. And, because the products’ precious technology has to be enclosed in some form of housing, the design language expresses its semantics through the character of the product shapes and human/machine interface. Designers in this arena are faced with the challenge of synchronizing the lifecycles of the products with that of their design. Technology changes at a fast and furious pace, but human change is very slow. Through some very hard lessons, I’ve learned one key principle for dealing with this lack of synchronicity: technologies come and go, but brands have to live on. Put simply, culture always wins.

I saw the historic opportunity Apple offered in 1982: only three or four product lines and a dynamic startup with an ambitious, visionary founder who wanted design to carry Apple’s products to international prominence. But, I also saw Apple’s organization-wide lack of design and supply-chain savvy. Steve and I were looking to each other to fulfill our most pressing needs; together, we had to innovate a means for bringing the expression of “the invisible” to the realm of design. We wanted Apple’s design language to go beyond its products’ functional and aesthetic aspects; we also wanted it to express the new spirit of computers as “thinking machines,” by both rooting them in history and projecting them as extensions of the user’s psyche.

Moreover we wanted Apple’s design language to converge physical and virtual statements into a holistic experience, which posed challenges of incredible complexity. Steve’s passion for closed (versus open) systems was based on his understanding that such complex functionality can be humanized only by controlling all aspects of technology, including hardware, software and content.

As a result of that passion, I believe it’s accurate to say that we set a benchmark for human-driven, high-touch design for the entire digital consumer industry. I take some personal pride in the fact, that when Steve returned to Apple in 1997, Jonathan Ive—Steve’s choice for Executive Vice President of Industrial Design—picked up where we had left the company’s design language in 1985 and continued the basic “Keep it Simple” rule that Steve and I had established. The process of formulating and following that goal involved multiple phases, a lot of frustration, but—ultimately—many victories.

Phase One: Developing Options

Each design project starts with research to discover what’s out there, and to explore the possibilities of what could be out there, but isn’t. When we launched the Snow White project, my intuition told me that the possibilities for improving the design and manufacture of personal computers were almost limitless. At the time, computers offered little in the way of design capabilities, but the technology was advancing rapidly.  Computer performance was growing, physical sizes were shrinking, and—thanks to “professional” pricing vs. “consumer” pricing —the industry’s profit margins were still healthy. Personal computers were in their infancy, and Apple had an edge in that arena with its use of Xerox Parc’s bit map user interface that would appeal to everybody.

At the time, most of Apple’s products were primitive in their mechanical design, and their manufacturing costs were absurd: the Apple IIe’s housing alone cost more than $100 net, and the Apple III’s cost even more. I knew we could do better in both quality and cost. By leveraging the advanced production methods of electronics in Germany or Japan, I projected that Apple could lower its housing costs by 70 to 80 percent. So we decided to use the same technically radical design approach for Apple’s products that we used for Sony’s. In fact, we could make the designs even better and more ecologically sound by avoiding metallic paint, which had become the standard for consumer electronic products.

Essentially, we had to create a new paradigm for computers as the first mass-produced, industrial form of artificial intelligence. As I explored ideas for designing the “face” of this new product paradigm, I looked at history, in particular Native American mythology, because I thought that Apple’s design should be rooted in the West Coast’s past. I discovered the geometric sand paintings of the Navajo, and then the art of the Aztecs, whose anthropomorphic reliefs often resembled astronauts. Those images inspired us to design Apple’s computers to look like little people, and to transform the display screen into a face. We were taking our first steps forward.

After talking to Steve and other executives at Apple, frog identified three concepts that we would explore for further development. One of these three would represent frog in the Snow White competition.

  • Concept 1 reflected “what Sony would do if it built computers.” I didn’t really like this me-too idea, but in 1982 Sony set the standard for producing high-tech consumer products that were smarter, smaller, and more portable, and Steve felt that their cool, sleek design language offered a good benchmark. One interesting feature we developed while working on Concept 1 was the modularity of cabinet elements, which enabled identical housing parts to be used on multiple products. This feature made the tools for the injection molding process more economical, but it also required longer assembly times, which raised production costs.
  • Concept 2 was to express “Americana” by reconnecting high-tech design with classical American design statements, from (naturally) the Coke bottle to Raymond Loewy’s streamlined designs for office products and Studebaker and the Electrolux line of household appliances. This concept was most in-line with Apple’s thinking back then, but the asymmetrical monitor and otherwise somehow stylish shapes that we developed for this concept would have aged too quickly. At the beginning, though, this design was the most popular within Apple’s team.
  • Concept 3 was left to me. It had to be as radical as possible—and that was a cool challenge.

The breakthrough moment in the development of Concept 3 actually came to me one day when Steve Jobs called to check in on my progress. I hadn’t been making much progress on the concept and so, having no idea what to say, I scribbled some designs on paper while Steve talked. Suddenly, I thought about “lines”—lines of printed text, lines of code, always of equal length—that could be used like a grid. The lines created a geometric form, so I sketched a Mac with an integrated monitor in the shape of a “T”, with the upper bar being the front of the monitor. I completed the sketch within seconds, and when I described it to Steve, he said “great! I want to see it.” Glancing at my rough sketch, which was all I had to show for Concept 3 at the moment, I asked when he would be coming back, feeling very grateful for the distance that separated my Black Forest studio and Steve’s California offices. That feeling vanished when Steve replied: “I just checked the flight schedule here in London, and I can be in Stuttgart later this afternoon…why don’t you pick me up.” Now, I had a problem.

I made some quick technical drawings based upon a modified layout of the computer and monitor; the lines and stepped slabs actually worked really well on paper. With our model-makers hard at work on a couple of quick foam models in three variations, I set out on the hour-long drive to the Stuttgart Airport. When I returned with Steve on his first visit to the frog studio in Altensteig, our model-makers had worked a miracle: three nicely shaped and painted models were on the table, along with some rough-cut sketch models they had used to test the variations (I had left them measurements for the variations, but no drawings). Steve loved the models. Then he looked around our model shop and right away insisted that I bring the same set-up to California, near Apple headquarters.

We’d done it. Steve was excited and, with his input, we obviously had a direction worth pursuing. As a nice side effect, the stepped slots in the line-based design for Concept 3 enabled us to reduce the wall thickness of the case by nearly 40% and place well-hidden ventilation openings in any location where they were needed. Ventilation had been the focus of many of our discussions with Apple’s engineers, because the hardware would generate heat in so many places. Steve was so happy with the lines-and-slates approach, that he insisted we also apply the design to a new Macintosh (a decision later dropped due to internal opposition). While some might rightfully point out that a few hours of frantic work under stress cannot be called “strategic,” I contend that the stress of that day brought weeks of work into a clear focus, and our process remains a great example of the genesis of a creative design strategy.

I was happy that we could continue developing our best design idea. Concepts 1 and 2 had been well–founded, proven design statements, but Concept 3 was our ticket for a voyage toward a mysterious destination. It also would become the DNA for the Snow White design strategy and visual language.

Phase 2: Defining Concepts and Strategy

We shipped the first set of models to California, and after discussions with all of Apple’s teams, we agreed that Concept 3—lines, slates, no angles (except for transitions), and white (or as nearly white as possible)—was the way to go. The next phase was about getting feedback and input from Apple’s key people. Steve wanted us to look years ahead in our design process, so it was important that we hear as many ideas as possible, no matter how crazy or off-the-wall they might seem. Programmers like Andy Hertzfeld and Bill Atkinson spoke about software almost poetically, though their screens showed only lines of abstract looking code—the very lines that had supplied one of the initial inspirations for Concept 3.

I was also inspired by Bill’s prediction that the computer’s bulky, physical technology of monitors and CPU boxes would eventually give way to elegant “slates” or “pads.” Almost twenty years later Apple would introduce these innovations in form with its iPhone and iPad.

The visual DNA for Concept 3 was a good start. But, after I’d had multiple discussions about the technology and possible trends with Apple’s managers and engineers, Bill Atkinson challenged me to take my designs further. He encouraged me to focus more on projections for future developments, such as flat screens, touch interfaces and devices that merged telephones with computers. Back in Germany, frog went to work again, responding to this challenge with

conceptualizations of a wireless-mobile flip-phone, a touch pad computer—labeled Mac Slate—and a laptop computer that had a large screen the same width as a standard QUERTY keyboard and a touch interface—a design we labeled the “Mac Book”

Once again, we went to California loaded down with models, sketches and presentation materials. When Steve presented the Mac Book model to the Mac team as “the next Macintosh we will build,” a product he assured them was created just for journalists, they gasped in disbelief. But, I knew this work was extremely important. After more than a decade in electronic design, I had seen many technologies and tech companies come and go, and I was sure that Steve was moving Apple in a necessary direction—toward a design strategy that went beyond computer boxes, keyboards, mice, and monitors—that would bring the company success, not just survival. Steve loved the progress we were making although I had gone too far for some of Apple’s designers and their engineering bosses.

Phase 3: Final Design

Now we went into the final stage of the competition. We created a complete list of the product lines that would carry the Snow White design language by adding product categories such as connectors, ergonomic workstations with integrated phones, and innovations for portable computers and touch-tablets. Once again, we fine-tuned the designs and built myriads of foam models that were perfectly accurate in both scale and appearance. After shooting photos of our work, we packed up all of the materials for our final presentation to Steve and Apple’s board of directors. We put our logistics in place, also making sure that no glue, paint or filler would bubble or dissolve in the belly of a cargo airplane, and that we had an extra window of time for our materials to pass through customs. The models still arrived at Apple just two days before the Board meeting in March.

Our final presentation consisted of more than 40 hard models, a slick, professionally photographed slide presentation, and full-scale technical drawings. To showcase the presentation, we turned a room at Apple’s Mariani Building into a show room; even by today’s high standards, it was one of the best presentations I can remember. Steve was really excited and so was Apple’s Board. An hour later, we learned that we had won the competition. Although I had never doubted the outcome, it was a very exciting moment.

To make our success complete, Steve and I negotiated a sound process for implementing the Snow White design language. We agreed that frog would provide full design services under his direct report, and that Apple’s designers would be integrated into one group, reporting directly to me. We also defined design’s relationships with Apple’s engineering and marketing teams as collaborations. We knew these fundamental changes would provoke some resistance within the company, but Steve and I agreed that we had to move forward with them. I also created an economic plan for the work ahead. Steve stood by his word: Apple awarded frog an annual $2 million contract (close to $5 million in 2013 dollars) and put us in charge of all designs at the company. Even though, legally, I remained a consultant, I was named Corporate Manager of Design. Now, the real work would begin.

Steve Jobs had acquired a new look and direction for his company, but he had also advanced his understanding of his products and their effects in the marketplace. He had embraced a new way of design management and the new concept of simple, additive shapes, standing boldly in white, with no added color. For Steve, everything was black or white. That kind of direct, take no-prisoners mentality, combined with his unique ability to listen to new ideas and eventually change direction when confronted with a better way, made him an ideal partner for progress.

With our guidelines in place, we were ready to begin our work at Apple. Snow White had been kissed awake—not by a prince but by a frog.

+++++++++

Original Sketches, made during meetings with Steve Jobs

Original Sketch, made during meetings with Steve Jobs

Original Sketch, made during meetings with Steve Jobs

Original meeting notes, made during meetings with Steve Jobs

Original meeting notes, made during meetings with Steve Jobs

Apple FlipPhone 1984

Apple FlipPhone 1984

Apple Minimal Phone 1984

Apple Minimal Phone 1984

Apple Wrist & Ear Phone 1985

Apple Wrist & Ear Phone 1985

Apple //c Studies 1983-84

Apple //c Studies 1983-84

MacSlate Touchscreen 1984-85

MacSlate Touchscreen 1984-85

MacSlate Touchscreen 1984-85

MacSlate Touchscreen 1984-85

via designmind.frogdesign.com

Advertisement

Great examples of innovative navigation for inspiration

Imagem

nav

Could you imagine landing on a website with no navigation? It would be like trying to find your way in the ocean with no compass. It would be terrible.

Lucky for you, most sites have at least some kind of navigation, so you’re not completely lost. Recently, the Betterment blog featured a UX Flows post on navigation, where we discussed the importance and function of navigation in a web site. Navigation is critical — and it’s safe to say that some sites do it better than others. For this post, we’ve decided to take a look at some navigation that’s breaking the mold.

Take a look, and say “ahoy” with your thoughts in the comments!

Yar, Matey! Let’s Set Sail to 23 Web Destinations.

1. Disqusnavinsp_disqus

Disqus offers simple and effective navigation. The streamlined header is highlighted in white, which stands out against the blue background, and a footer navigation also appears with more options after scrolling down.

2. Big Spaceshipnavinsp_bigspaceship

With a different approach, Big Spaceship offers left sidebar navigation that expands from a menu icon that is similar to what you see on mobile sites. The nav is easy to find in the upper left hand corner of the main landing section, which displays a paint splash animation against a black background.

3. Dataveyesnavinsp_dataveyes

Upon loading, the Dataveyes navigation is conspicuously displayed in the center of the header, but then shrinks to a mobile navigation icon, allowing you to easily access the information without intruding on the content.

4. Glossy Reynavinsp_glosseyreyWith contrasting white text against a black background, the split navigation header is easy to locate and offers a really cool hover animation for each menu option.

5. Words Pictures Ideasnavinsp_wordpicturesideas

This single page, anti-navigation website is captivating and organized — users can still find their way around the site with ease.

6. Equus Designnavinsp_equus2

Simple, clean, and minimalist, the navigation design for Eqqus Design pops against the page’s dark background.

7. Miss Julia Piepnavinsp_julia

When you land on Miss Julia Piep’s page, the company logo is centered with a row of five menu options below it, and when you select an option, the responsive navigation moves to the top of the page. Neat.

8. Teehan + Laxnavinsp_teehan

Teehan + Lax’s mobile navigation icon flies out to offer six menu options that you can later close.

9. Danielle LaPortenavinsp_danielle

Danielle LaPorte’s nav is fancy, as the navigation responsively appears in both the header and the footer as you scroll. Best of both worlds!

10. Olympic Storynavinsp_olypmics

A mobile nav icon flies out to be a substantially sized sidebar menu that also can be closed. Boom — mobile can be anywhere and now it is.

11. Curad Mirnavinsp_carmir

Users’ attention is drawn to the upper left hand navigation icon, and without even clicking — just hovering over the icon — a menu sprawls out along the top bar while a white frame outlines the page.

12. Weyland Industriesnavinsp_weylandindust

Neatly tucked under the company’s logo with an arrow that implores you to click, the mega- navigation flies out to offer three main categories of navigation with multiple options below it. For sites that have a ton of content, neatly organized mega-menus with flyouts are where it’s at (jussayin’).

13. Lexusnavinsp_lexus

This navigation is different from most top bar menus. Lexus layers it up with a full navigation bar that flips out directly below the “MENU.” Layers of navigation = layers of fun. (Plus the option to use your keyboard!)

14. P’unk Avenuenavinsp_punk

P’unk Avenue’s navigation keeps it easy breezy for users with a horizontal grid-esque design at the top of the page that’s also numbered, titled, and provides a short, one-sentence description of what you’ll find.

15. SRGnavinsp_rg

It’s the circle of navigation! The pageless design is navigable by way of a responsive hero area circle navigation. I clicked to learn more — would you?

16. I Think I Mightnavinsp_ithinkimight

Easy to use icon navigation in the upper right hand corner of the page makes navigating this site caveman-picture simple.

17. Zaarly’s Employee Handbooknavinsp_zaarlyhandbook

Zaarly’s nav starts out as a boring mobile icon — then BOOM! Fun, full-screen navigation with color bar menu that cascades down and across the screen. I love it when designers realize the nav doesn’t have to be boring.

18. Editernavinsp_editer

Speaking of top bar navigation menus, Editer provides us with just that, but the flyout feature enhances the experience and organizes the content, which is essential for mega-sites.

19. Firestormnavinsp_firestorm

The Guardian’s completely interactive site is exploding with drool-worthy design aspects. The vertical navigation menu is easy to see but doesn’t take away from what’s going on visually — and it’s educational! Bonus!

20. Petersham Nurseriesnavinsp_cafesite

Petersham Nurseries gives you two navigation menus: vertical navigation menu on the left, providing new users with information on the company, and a horizontal navigation menu on the top right for account holders.

21. NKI Studionavinsp_nki

This site’s navigation commands attention from a different perspective in the bottom left of the page.

22. Cloud Ninenavinsp_cloud9

Cloud Nine has left side icon navigation in a blue colorblock bar, which nicely complements the responsive, pageless design.

23. Pervasive Lightnavinsp_pervasivelight

Pervasive Light’s light bulb nav is exciting with an electric wiggle mouse over feature. The nav also smartly flies up and out of the way when users reach their destination.

via dtelepathy.com

UI and UX Design – Know the Difference

Imagem

ui_ux

Do you know that UI and UX are not the same concepts? Surely, they are closely connected, even mutually penetrated and rarely exist without each other. Would you like to study the differences between UI and UX design in detail? This article will give you such an opportunity.

We believe that it is impossible to become an expert designer without a strong knowledge of both terms. We promise that some definitions will seem fun to you; some of them will seem serious and in-depth. The info you are going to read is vivid and informal as we have based it on real web developers’ thoughts and expressions. We wish you an enjoyable reading.

The Difference Between UI and UX Design

THE DEFINITIONS

Let’s start with definitions as it’s always easier to proceed when you know exactly what you are talking about.

UI

Pelfusion User Interface

The user interface is the space where interaction between humans and machines occurs. The goal of this interaction is the effective operation and control of the machine at the user’s end, and feedback from the machine, which aids the operator in making operational decisions. In other words, a user interface is the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of:

Input, allowing the users to manipulate a system;

Output, allowing the system to indicate the effects of the users’ manipulation.

The main goal of human-machine interaction engineering is to produce a user interface which allows to easily (intuitively), efficiently, and enjoyably (user friendly) operate a machine in the way which produces the desired result. Actually, it’s great when the operator needs to provide minimal input to achieve the desired output, and also that the machine minimizes undesired outputs to the human.

With the increased use of personal computers, the term user interface is generally assumed to mean the graphical user interface, while industrial control panel and machinery control design are more commonly referred to as human-machine interfaces.

Types of UIs
There are lots of UI types, but we will name just the ones related to computers as there is no need to clog your brain with the information you might never need.

  1. Graphical user interfaces (GUI) They accept input via devices such as a computer keyboard and mouse and provide articulated graphical output on the computer monitor.
  2. Web-based user interfaces or web user interfaces (WUI) They accept input and provide output by generating web pages which are transmitted via the internet and viewed by the user using a web browser program. Newer implementations utilize Java, JavaScript, AJAX, Adobe Flex, Microsoft .NET, or similar technologies to provide real-time control in a separate program, eliminating the need to refresh a traditional HTML based web browser.
  3. Administrative web interfaces for web-servers Servers and networked computers are often called control panels.
  4. Touchscreens These are displays that accept input by touch of fingers or a stylus. Used in a growing amount of mobile devices and many types of point of sale, industrial processes and machines, self-service machines etc.

User Interface Design is the actual design of the interfaces that would best facilitate for great, seamless, pleasurable and rewarding interaction between the user and your product. Observing user behavior and making informed decisions based on data collected during your observation is a large part of the UI design work. UI design feels more like a craft, since you are actually building something beautiful and tangible using skills, knowledge and techniques acquired through experience. Some UI designers apply tools like Photoshop, Illustrator, Fireworks, Cinema 4D, ZBrush and lots of pen and paper to get things done. You are unlikely to become a good UI designer without having a grasp on what UX is.

UX

Emotion Wheel

User experience involves a person’s behavior, attitude, and emotions about using a particular product, system or service. User experience includes the practical, experiential, effective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found.

User experience design starts with a solid understanding of your user-base, generating ‘personas’ for the dominant character types within your user-base, then setting specific requirements for the project at hand. Sort out your information architecture through generating a data inventory and organize a solid information hierarchy which would help a ton once the prototyping process begins. Choose the best prototyping method that would be both cost-efficient and would allow you to gather feedback and reiterate in a fast and easy fashion. Prototypes could be horizontal (broad feature-set, less depth functionality-wise), vertical (deep functionality, narrow set of features), T-prototypes (much of the design is done at a shallow level while some features are implemented in great depth) and local prototypes (used to come up with design alternatives for particular interaction model). After choosing an appropriate prototype the iteration process begins. This usually varies greatly between working on software products, services or industrial design projects.

Thanks to Wikipedia and ask question sites, now we know exactly what UI and UX are. As you see, these are two absolutely different notions and each professional designer should know that the gap between them is as large as the Grand Canyon.

Grand Canyon

UI AND UX DESIGN – THE DIFFERENCES

In fact it’s rather difficult to segregate the two concepts as they are very closely related. A UI is often a part of UX. However, a UX can exist even without a UI. It seems to us as if we speak like heroes from Lewis Carroll’s “Alice in Wonderland” book. Riddles, mind games, word juggling… But in fact the answers are not as complicated as they seem. Below you will find a list of differences between UI and UX design the way professional web developers see them.

Mice

Before we enumerate the differences, let’s firstly highlight a few similarities between “UI Design” and “UX Design”

  1. Both could be applied to (almost) any product (category type).
  2. Both refer to solving the problem statement related to the “design” aspect of the product.
  3. Both are targeted at the user’s comfort.

And finally, the promised differences
A UI is… (Gosh, it sounds exactly like the text hidden inside the bubble-gum “Love is…” pack):

  • UI design deals with the specific user interface(s) of a product or service
  • UI can be a component of UX, but many user experiences have nothing to do with Uis
  • The design of a UI will be heavily informed by the UX design
  • UI is responsible for the look of the website
  • UI is a tool, a certain point of interaction, a medium of communication between a person and a system
  • UI describes how users view, navigate and interact with a particular product – including everything the user sees and interacts with on the screen and uses as a device
  • UI shows how beautiful an app you are going to interact with is
  • UI design shows how the user interface would look
  • UI is what you see (visuals)
  • UI is how elements appear on a website
  • UI is the control panel
  • UI is a byproduct of UX design
  • UI = output
  • UI designer focuses on designing the user interface, often a screen, touch screen, keyboard and mouse
  • UI is more tactical in nature
  • UI design is a real thing, which can be designed based on the rules/laws of typography, architecture and logic
  • User interface design is the design of websites, computers, appliances, machines, mobile communication devices, and software applications with the focus on the user’s experience and interaction
  • UI is a point of interaction
  • User interface design is the part of the product that faces the user when he looks at the site
  • When designing a user interface, one considers layout, display, flow, look, etc.
  • UI is part of the discourse of software architecture
  • User interface is the front-end “look and feel” of a product
  • UI design is the process of making the actual interface of a product
  • Interface is the point of contact with a product
  • UI is a skin, shape and color
  • UI is design elements, tech, wireframes, etc.
  • UI design focuses on optimizing the interface of a digital product. It uses typography, color and layout to create the best possible user experience on an individual web page or app screen
  • UI is a part of the end product
  • UI design is the bits on the screen, how they look, etc. The UI implements the UX design
  • UI design is the design of the user’s interaction with a single artifact. It has no inherent good/bad guiding concept and at worst might be merely functional to allow a user to perform some task. At best it might produce a good experience. But UI design only fails if a user can’t perform a task that the UI was designed to support
  • UI design is pixels
  • UI design is a component of UX design
  • UI is typically a combination of visual design (the look and feel) and the interaction design (how it works)

UI-UX Division
Image credit: Bigstockphoto

Are you ready to take the right-hand fork in the road and see what they’re saying about UX?

  • UX can encompass a wide range of disciplines, from industrial design to architecture to content
  • UX design will be less informed by the UI
  • UX design shows how convenient the app is for the user
  • UX design deals with the overall experience associated with the use of a product or service
  • UX is the result of the combined direct and indirect interactions with a brand
  • UX is responsible for the functionality of a website
  • UX can be improved by improving the UI
  • UX design deals with the overall experience associated with the use of a product or service, which can include a UI
  • There are many other components that play into the experience, therefore, UX design is a more holistic view of a product’s experience from the customer’s perspective
  • UX design is emotions
  • UX is what you remember
  • UX design is the design of a whole experience from the point of view of the user to produce some affect or emotion. As such it determines and constrains the UI design of anything that the user might interact with, and it should result in good UI design
  • UX design is how the program works, how the humans interact with it, the information architecture, usability, etc. Based upon the UX design, the UI designer renders those designs
  • UX is what a user feels about what he/she saw when going on a website
  • UX is the outcome of using the product
  • UX design is an ‘umbrella’ term. It covers a range of processes and skills that shape a user’s experience of a digital product. These include: research, usability, information architecture, interaction design, visual design, content
  • UX is the result of traversing/interacting with your UI
  • UX is emotion, feeling, experience
  • UX is the big picture, the blend of design, usability and architecture
  • UX can be improved by improving the interface. But there is more to UX because there is also a “flow” of doing things
  • UX is the experience resulting from using a product. UX can be affected by other actors beside the UI, but it cannot be designed per se. For instance, having to scroll all the way down to add an answer onsite is a UI decision that results in bad UX
  • UX is a combination of all elements in any document website including color theory and navigation that make up what an end user experiences as a whole. Though many UX designers can code, they are more or the creative director of a project
  • User experience is how customers interact with the product across specified and measurable (quantitative and/or qualitative) categories: ease of use, navigation, task completion, branding etc.
  • User experience is love
  • UX is part of the discourse of HCI. It is a reflection on what it’s like to be a user – the user’s perspective
  • When designing a user experience, one considers the psychological state of the user as they attempt to achieve a task
  • UX is making the button big enough so that the end user saw it at first glance
  • UX is how they feel when they look at the site
  • UX is the interaction itself
  • User experience design is any aspect of a user’s experience with a given system, including the interface, graphics, industrial design, physical interaction, and the manual
  • UX design is the new term for so called usability – a buzz word, which many people use to make themselves feel better/sound smarter. Also, it helps people who don’t know a thing about UI to get in a way of UI designers
  • UX is more strategic
  • UX takes a wider approach where you consider other factors than the UI and computer. Often you also look at cultural factors, organizational factors etc. So you are designing the whole user experience – not just the UI. The whole user experience can e.g. involve calling customer support, getting a letter with snail mail etc
  • UX = input
  • UX is how it makes you feel
  • UX is the decision where to put elements based on priorities
  • UX design is how should a user experience after using the interface
  • UX is the overall experience a user has when working with a product, extending beyond the user interface. In addition, User experience includes many other things that users do in the course of performing in their natural routine and environment, including interactions with other people, other systems, and their physical surrounding. Thus, the user experience can be “expressed by the user’s enjoyment, satisfaction and even social aspects of working with products.”
  • UX is the overall experience
  • UX is a combination of various interfaces, with UI being an important one among them
  • UX thrives to address everything perceived by a person

We hope that you have enjoyed many of these definitions as some of them are really fun, but what is more important – they are straight to the point. We are absolutely sure that as of the present moment, you’ll never be confused with the terms.

Confused

Conclusion

All of us have already understood that a UI and a UX are not the same concepts; however, they are to be combined for a greater purpose – to interest the users in your product or to convey certain information to them. The intrigue is that a UX can exist and work very effectively having a poor UI. For example, you can have an application with a stunning design that is hairy to use (good UI, bad UX). You can also have an application that has a poor look and feel, but is very intuitive to use (poor UI, good UX). We hope that now you understand the difference between these interrelated concepts and can clearly imagine a huge gap between their meanings.

Nevertheless, for justice sake we would like to mention the following. Current UI design trends, tendencies and technologies are being developed with one and the same aim: to make online UX better, easier and more intuitive. In other words, UI developers finally began creating for people, so it’s safe to say that today’s user interfaces are aimed on excellent UX. So, if you want to create a stunning app, you should learn the principles of both (UI & UX) design types.

via onextrapixel.com

Stop Wasting Users’ Time

Imagem

Stop Wasting Users’ Time

Our users are precious about their time and we must stop wasting it. On each project ask two questions: “Am I saving myself time at the expense of the user?” and “How can I save the user time here?” What is the single most precious commodity in Western society? Money? Status? I would argue it is time.

We are protective of our time, and with good reason. There are so many demands on it. We have so much to do. So much pressure. People hate to have their time wasted, especially online. We spend so much of our time online these days, and every interaction demands a slice of our time. One minor inconvenience on a website might not be much, but, accumulated, it is death by a thousand cuts.

Steve Jobs claimed that improving the boot time on the Macintosh would save lives. A 10-second improvement added up to many lifetimes over the millions of users booting their computers multiple times a day.

Mac-Booting-preview-opt
Steve Jobs was obsessed with saving the user time, and we should be, too.

Millions of people might not use your website, but millions do use the Web as a whole. Together, we are stealing people’s lives through badly designed interactions. When I work on a website, one question is front and center in my mind:

“Am I saving myself time at the expense of the user?”

That is the heart of the problem. In our desire to meet deadlines and stay on budget, we often save ourselves time by taking shortcuts via our users’ time. Let’s explore some examples of what I mean.

Taking Time To Improve Performance

The most obvious example of wasting users’ time is website performance. This is what Jobs was getting at with boot times. If our websites are slow, then we’ll waste our users’ valuable time and start to irritate them. One more cut, so to speak.

The problem is that improving performance is hard. We became lazy as broadband became widespread. We cut corners in image optimization, HTTP requests and JavaScript libraries. Now, users pay the price when they try to access our websites on slow mobile devices over cellular networks.

PageSpeed-Insights-preview-opt
Optimizing your website for performance not only saves your users time, but improves your search engine rankings.

Making our websites faster takes time and effort, but why should users suffer for our problems? On the subject of making our problems the users’ problem, let’s take a moment to talk about CAPTCHA.

CAPTCHA: The Ultimate Time-Waster

CAPTCHA is the ultimate example of unloading our problems onto users. How many millions of hours have users wasted filling in CAPTCHA forms? Hours wasted because we haven’t addressed the problem of bots.

captcha-opt
CAPTCHA forces the user to deal with something that is really our problem.

Just to be clear, I am not just talking about traditional CAPTCHA either. I am talking about any system that forces the user to prove they are human. Why should they have to prove anything? Once again, another inconvenience, another drain on their precious time.

We could solve this problem if we put the time into it. The honeytrap technique helps. There are also server-side solutions for filtering out automated requests. The problem is that throwing a CAPTCHA on a website is easier.

Not that CAPTCHA is the only way that we waste the user’s time when completing forms.

Don’t Make Users Correct “Their” Mistakes In Forms

Sometimes we even waste the user’s time when we are trying to help them. Take postal-code lookup. I have been on websites that try to save me time by asking me to enter my postal code so that it can auto-populate my address. A great idea to save me some time — great if it works, that is.

The problem is that some lookup scripts require the postal code to have no spaces. Instead of the developer configuring the script to remove any spaces, they just return an error, and the user has to correct “their” mistake.Why should the user have to enter the data in a particular way? Why waste their time by requiring them to re-enter their postal code? This doesn’t just apply to postal codes either. Telephone numbers and email addresses come with similar problems.

We also need to better help mobile users interact with forms. Forms are particularly painful on touchscreens, so we need to explore alternative form controls, such as sliders and the credit-card input system in Square’s mobile app.

 

Then, there are passwords.

Why Are Passwords So Complicated?

Why do we waste so much of the users’ time with creating passwords? Every website I visit these days seems to have ever more complex requirements for my password. Security is important, but can’t we come up with a better solution than an arcane mix of uppercase, numbers and symbols?

Why couldn’t we ask users to type in a long phrase instead of a single word? Why can’t my password be, “This is my password and I defy anyone to guess it”? The length would make it secure, and remembering and typing it would be much easier. If your system doesn’t like the spaces, strip them out. You could even provide an option for people to see what they’re typing.

password-preview-opt
A long password phrase is as secure as a short password with numbers and symbols yet easier to remember.

If you can’t do that, at least provide instructions when the user tries to log in. Remind them of whether your website wants uppercase or a certain number of characters. That would at least help them remember their password for your website.

The important thing is to recognize that people have to log in all the time. The task demands extra attention so that it is as painless as possible.

Pay Special Attention To Repetitive Tasks

We should ask ourselves not only whether we are unloading our problems onto users, but also how we can save our users time.

Take those common tasks that users do on our websites time and again. How can we shave a quarter of a second off of those tasks? What about search? If the user enters a search term on your website, will hitting the “Return” key submit the query? They shouldn’t have to click the “Search” button.

Drop-down menus are another good example. Navigating country-pickers can be painful. Could we display countries differently, or make the most common countries faster to access? In fact, so much could be done to improve country-pickers if we just take the time.

country-picker-preview-opt
Something as simple as a country-picker can waste a surprising amount of time,especially if you are British

For that matter, a more robust solution to “Remember me” functionality would be nice, so that users are, in fact, remembered!

I am aware that this post might sound like a rant against developers. It is not. It is a problem faced by all Web professionals. Designers need to pay close attention to the details of their designs. Web managers need to ensure that the budget exists to refine their user interfaces. And content creators need to optimize their content for fast consumption.

Help Users Process Our Content Faster

We waste so much of our users’ time with verbose, poorly written and dense copy, making it hard for them to find the piece of information they need. The real shame is that we could do so much to help. For a start, we could give the user a sense of approximately how long a page will take to read. I offer this functionality on my personal blog, and it is the feature most commented on. Users love knowing how much of their time a post will take up.

We can also make our content a lot more scannable, with better use of headings, pullout quotes and lists. Finally, we can take a leaf out of Jakob Nielsen’s website. At the beginning of each post, he provides a quick summary of the page.

THE TIP OF THE ICEBERG

We could do so much more in all aspects of Web design to save users’ time. From information architecture to website analytics, we waste too much of it. Sometimes we even know we are doing it! We need to be forever vigilant and always ask ourselves:

“How can I save the user time in this situation?”

 

via smashingmagazine.com

Send large files to clients with these 10 free tools

Imagem

Send large files to clients with these 10 free tools

Using email to send large files to your clients can cause problems at both ends. Here are 10 great tools to make things go smoothly…

The age of the web may have connected continents and allowed the world to function around the clock, but to send large files by email can still be a painful experience.

But there’s no need to spend vast amounts of money on providing a solution. These free tools will help you to send large files to design clients without the hassle of bounced emails and hours of frustration with FTP connections, and some even have iPhone apps and free Android apps to make your life even easier.

01. Infinite

free tools to send large files
Infinite claims to be up to 23 times faster than the competition

The main thing that makes Infinit different is that it uses peer to peer technology rather than its cloud servers. That means, the French team of eight designers and developers behind it claims, that it’s both more secure and “up to 23 times faster” than rivals.

It’s also easy to use, and there are no limits to the number of files you can send, or their size. If your or your recipient’s web connection goes down, the service just pauses until it comes back up – you don’t gave to start again. And if you’re really in a hurry when receiving media files, you can even start playing them before the full file has been sent.

02. WeTransfer

 WeTransfer
WeTransfer makes it easy to send large files

WeTransfer is a lovely looking site that allows you to send large files – up to 2GB per transfer – as often as you like! That way, there won’t be any of those last minute e-mail woes when you run out of free transfers! You can send large files by email or grab a download link from the site; easy peasy.

03. itrnsfr

Transfer big files to anyone, anywhere with itrnsfer

With itrnsfr, you can send files up to 2GB to anyone, anywhere. Totally free, no registration is required to use this service. It also allows user to transfer multiple files at once to multiple recipients. As the website states: secure and simple.

04. Sendspace

 Sendspace
With the Sendspace app, you can send large files on the move

Launching back in 2005, Sendspace have been delivering files millions of times a week. Each file is tracked so if it’s lost into the abyss of the internet, Sendspace will do their best to find it for you. They’ve also just launched a brand-new drag and drop feature, as well as a Sendspace app – meaning you can send large files on the move.

05. Dropsend

 DropSend
DropSend lets you send large files for free

With DropSend, you can send large files of up to 2GB, making it ideal for sending jpegs, pdfs and MP3s. Fast, simple and secure to use, you’ll be sending those all-important large files in no time. There’s no software to install and it’s available with 256bit AES Security. If you’re still unsure about what to do, DropSend have also created a handy video tutorial for all your transferring needs.

06. WikiSend

 WikiSend
You don’t need an account to send large files with WikiSend

WikiSend is a free file-sharing service that doesn’t require you to create an account to use; you simply upload your file and are given a unique URL to access your file.

Files are then left accessible for seven days for your client to download as many times as they need, and you can share files up to 100MB in size. WIkiSend also provides password-protected file sharing if you register an account with them.

07. Dropbox

 Dropbox
Dropbox is the best-known way to send large files

Dropbox is possibly the most well known file sharing tool and you’ll probably find your client already has this tool installed and is familiar with using it – always a bonus.

You need to register an account to use Dropbox, though it’s free to do so. As well as a web-based application, there’s a desktop application you can install and access your files on your computer in a native.

Dropbox also benefits from having no expiration dates on upload files: you can store files as long as you need to. Plus there’s an uncapped maximum file size, so you can send the largest cat video mashups to your clients without worrying about capacity.

08. MediaFire

 MediaFire
Send large files up to 100MB with MediaFire

MediaFire is a free-to-register file sharing website which allows sharing of files up to 100MB in size. There are options to upgrade for greater storage capacity (10GB is available with the free account) and advertisement-free file and folder sharing, and there are desktop apps available for Windows, Linux and Apple, as well as iPhone, iPad and Android applications for mobile.

09. Box

 Box
Send large files to your clients with Box

Box is our next recommendation for free tools to share large files with your clients. Personal accounts for sharing are free with up to 5GB of storage space and allow you to share files of any size.

Box also features useful integrations such as with Google Apps and Salesforce. Business accounts are also available with a free trial, with the added bonus of more storage capacity for your design files and greater control over permissions for different user roles.

What really helps Box stand out from the crowd afd the customers who use its business accounts: its client list includes everyone from Procter & Gamble to Stanford University and even Skype and LinkedIn.

10. Senduit

 Senduit
Senduit allows you to set an expiry time

Senduit is intensely simple to use: simply upload your file through the website and you’re provided with a private URL to share your file.
The service has a limit of 100MB for files being shared, and allows you to set an expiry time for durations of 30 minutes to seven days.

via creativebloq.com

BLOKK – a font for quick mock-ups and wireframing

Imagem

BLOKK - a font for quick mock-ups and wireframing

BLOKK fontBLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Download font

15 Websites Free Design Resources

Imagem

15 Websites Free Design Resources

Keeping costs low and clients happy with the work you deliver can be a very difficult balance to strike, especially for freelance designers. Fortunately, there are great free design resources online to help you out.

It won’t be a stretch to say that most creatives – whether you’re a web designer, illustrator, photographer, developer, etc. – know what it’s like to work with limited budgets. It can often feel like clients barely have enough to even pay you for your time, let alone have the budget for the truly unique resources that can make a project really stand out.

Thankfully, there are some great places on the web that can provide some relief. Having these sites bookmarked can help you finish your project on time and under budget.

The following list is for all my fellow freelancers. Included are different websites that offer free, high-quality design resources. Most of the websites on this list are some of the lesser known design resource websites, along with a few well-known websites simply because they are my favorites and are too good not to mention. Hopefully, you’ll be able to find some great freebies to help you take your projects to the next level.

Free Vectors

Vecteezy

01-free-web-resources-vecteezy

Vecteezy is definitely a more well-known resource for both premium and free vectors. If you don’t yet have this one bookmarked, you may want to do so now. Started by the same owner of Brusheezy, Vecteezy is easy to use with an advanced search feature. All of the vectors display their License and explain it so that you know exactly how you can use the vector in your designs. Best of all, they seem to have just as many, if not more, free vectors as they do premium, and the premium vectors are clearly marked with a banner.

Alphateck

02-free-web-resources-alphateck

Nick G. Botner is a UI/UX designer with additional skills in areas such as identity/ print design, photography, and HTML/ CSS. His website, Alphateck.com, includes a blog on which he hosts free vector packs that he designs. All are available for use with only a payment of a Tweet or Facebook post. A few even allow you to skip the social sharing payment and pay a few dollars or less.

Images and Photos

Picjumbo

15-free-web-resources-picjumbo

PicJumbo is a rare website that provides high quality stock photos free for commercial use. Victor Hanacek is the amazing photographer behind this site, and uploads a new photo every day. If you find yourself using his photos often, be nice and donate a portion of your profits. It’s quite amazing that he offers such beautiful photos with no strings attached.

Getty Images

03-free-web-resources-getty

While Getty Images is certainly one of the most well-known resources for stock photos, it is not known for free photos. Until just last month, if you wanted free use of the photographs, you had to be comfortable with the Getty watermark. Getty changed this with an embed link that displays a credit footer at the bottom of the photo. This is perfect for your blogging clients or even those who really want the wow factor of high resolution, quality photos and don’t mind the footer. The images just can’t be used for commercial purposes.

FireShot

04-free-web-resources-fireshot

Many clients need to display screenshots of their app or software on their website. FireShot is an excellent tool for capturing high quality screenshots and making edits immediately without using another program. Right on the screenshot, you can make edits and add text annotations and then save, copy, send by email, share, or upload to FTP. If you feel like you waste a lot of time copying screenshots to your image editor only to make minimal edits, then FireShot could be the time-saving tool you need.

Free Fonts

Open Font Library

05-free-web-resources-openfont

Open Font Library is an excellent source for some really unique and creative fonts. While the catalogue is not huge, it still contains several hundred unique font families. But the really big perk of this free font website is that it contains a number of fonts from different languages, such as Latin, Persian, Farsi, and more.

Fonts for Peas

06-free-web-resources-kevinandamanda

If your client is in need of scrapbooking type fonts, then you may want to check out Kevin and Amanda’s website and their Fonts for Peas. They recently added in a new batch of fonts just a few months ago. All of their fonts are free for commercial use as long as you include their button on the website either in the sidebar or on a credits/ links page. They also offer more free fonts on their Free Scrapbook Fonts page and all follow the same Terms of Use as the Fonts for Peas.

Various Resources

Creative Alys

07-free-web-resources-creativealys

Creative Alys provides a variety of resources which include PSD and Mockups, vectors, fonts, and programming/development resources, like their definitive guide to MongoDB. While their selection is not huge, it is still a great place to look if you have exhausted all of your other resources or simply want to browse for something more unique.

Brankic 1979

08-free-web-resources-brankic

It is rare to find a web design company that will offer their old resources for personal and commercial use. Brankic 1979 is one such web design/development team that offers a rather large collection of design freebies, including widgets, UI kits, icons, and more. And all are, as to be expected from professionals, very high quality.

Sallee Design

09-free-web-resources-sallee

Sallee Design is the website of another generous designer, Jeremy Sallee. As a designer with an engineering background, Jeremy provides some incredible, top notch web design resources. Included in his list are icons, PSD files, and even a wallpaper.

Pixel Buddha

10-free-web-resources-pixelbuddha

All of the freebies on Pixel Buddha are completely free for commercial use, which is amazing because they are all very impressive and original. Included in the list of free resources are icons, UI kits, effects, animation, templates, and mockups.

Dreamstale

11-free-web-resources-dreamstale

Still in Beta, Dreamstale is a very new resources roundup website that also publishes articles, tips, and tutorials. The Dreamstale freebies is an already impressively large list of free downloads, such as icon packs, Photoshop actions, backgrounds, vectors, mockups, and much more.

KL-Webmedia

12-free-web-resources-klwebmedia

KL-Webmedia is yet another design studio that offers an awesome list of freebies. Patrick M., the incredible designer behind the studio and free resources, provides such free web design goodies as icons, buttons, PSD templates, UI templates, and more website elements.

Eamejia

13-free-web-resources-eamejia

Eduardio Mejia is an engineer and designer and also founder of an incredible website store called eamejia that also offers freebies for more than just web designers. In his free list, you will find mockups for book covers and other print designs, UI kits, website backgrounds, PSD web templates, and more, all listed under a Creative Commons Attribution 3.0 License.

Graphic Burger

14-free-web-resources-graphicburger

Many of you may already know about Graphic Burger, but it is just an amazing site that I couldn’t help but mention it here. Everything on the site is free for both personal and commercial use and every few days they post something new. Included in their resources list are mock-ups, UI kits, text effects, icons, PSD files, and much more.

Be sure to bookmark either this page or the above websites to make completing your web design projects much faster and, therefore, more profitable.

via designinstruct.com

Is Flat Design Already Passé?

Imagem

Is Flat Design Already Passé?

MAYBE IT’S TIME TO GIVE SKEUOMORPHISM ANOTHER TRY?

Over the last few years, we’ve seen an upheaval in the way computer interfaces are designed. Skeuomorphism is out, and flat is in. But have we gone too far? Perhaps we’ve taken the skeuomorphic death hunts as far as they can go, and it’s high time we usher in a new era of post-flat digital design.

Ever since the original Macintosh redefined the way we interact with computers by creating a virtual desktop, computer interfaces have largely been skeuomorphic by mimicking the look of real-world objects. In the beginning, computer displays were limited in resolution and color, so the goal was to make computer interfaces look as realistic as possible. And since most computer users weren’t experienced yet, skeuomorphism became a valuable tool to help people understand digital interfaces.

But skeuomorphism didn’t make sense once photo-realistic computer displays became ubiquitous. Computers have no problem tricking us into thinking that we’re looking at something real so we don’t need to use tacky design tricks like fake stitching or Corinthian leather to fool us into thinking our displays are better than they are. In addition, most people have grown up in a world where digital interfaces are common. UI elements don’t haveto look like real world objects anymore for people to understand them.

This is why Jony Ive took over the design of Apple’s iOS and OS X operating systems and began a relentless purge of the numerous skeuomorphic design elements that his predecessor, skeuomaniac Scott Forstall, created. To quote our own John Pavlus, “skeuomorphism is a solution to a problem that iOS no longer has”… and that’s true of other operating systems and apps too. Google, Microsoft, Twitter, Facebook, Dropbox, even Samsung, they’re all embracing flat design, throwing out the textures and gradients that once defined their products, in favor of solid hues and typography-driven design.

This is, without a doubt, a good thing. Skeuomorphism led to some exceedingly one-dimensional designs, such as iOS 6’s execrable billiard-style Game Center design. But in an excellent post, Collective Ray designerWells Riley argues that things are going too far.

Flat design is essentially as far away from skeuomorphism as you can get. Compare iOS 7’s bold colors, unadorned icons, transparent overlays and typography-based design to its immediate precessor, iOS 6. Where once every app on iOS had fake reflections, quasi-realistic textures, drop shadows, and pseudo-3-D elements, iOS 7 uses pure colors, no gradients, no shadows, and embraces the 2-D nature of a modern smartphone display. But while flat design has made iOS 7 look remarkably consistent, it has also removed a lot of personality from the operating system. It’s like the Gropius house, when the old iOS 6 was a circus funhouse. Maybe it needs to get a little bit of that sense of madness back.

Here’s how Riley defines elements of a post-flat interface:

• Hierarchy defined using size and composition along with color.

• Affordant buttons, forms, and interactive elements.

• Skeuomorphs to represent 1:1 analogs to real-life objects (the curl of an e-book page, for example) in the name of user delight.

• Strong emphasis on content, not ornamentation.

• Beautiful, readable typography.

Riley’s argument is that flat design has allowed digital designers to brush the slate clean in terms of how they approach their work, but it has also hindered a sense of wonder and whimsy. Software should still strongly emphasizes content, color, and typography over ornamentation, but why is, say, the curl of a page when you’re reading an e-book such a crime, when it so clearly gives users delight?

“Without strict visual requirements associated with flat design, post flat offers designers tons of variety to explore new aesthetics—informed by the best qualities of skeuomorphic and flat design.” Riley writes. Dust off your drop shadows and gradients, and introduce them to your flat color buttons and icons. Do your absolute best work without feeling restricted to a single aesthetic. Bring variety, creativity, and delight back to your interfaces.”

Maybe Riley has a point. Why should mad ol’ Scott Forstall be allowed to ruin skeuomorphism for everyone? With the lightest of brush strokes, skeuomorphism can be used to bring back a sense of personality and joy to our apps. For those of us growing listless in the wake of countless nearly identical “flat” app designs, he makes a good point. It is time for the pendulum towards flat and away from skeuomorphism to swing back, if only a little bit.

via fastcodesign.com

ShareDrop is like Apple’s AirDrop, but for all devices, and all you need is your browser

Imagem

ShareDrop is like Apple's AirDrop, but for all devices, and all you need is your browser

Apple’s AirDrop is a handy tool for wirelessly transferring files to other devices–but it only works for Macs and iOS. ShareDrop is an HTML5 clone of AirDrop and perhaps the easiest and quickest way to share files with others on the same local network; all you need is to visit the site and drag-and-drop files to your recipient.

There are no downloads needed, no set up required. In addition to being on the same local network, however, both devices would need an internet connection. (Unlike AirDrop’s local ad hoc network.)

As explained on ShareDrop’s GitHub page, the webapp uses WebRTC for the secure peer-to-peer file transfer, along with Firebase for presence management and WebRTC signaling.

All you have to do to directly transfer one or more files is open ShareDrop.io from each device (desktop or Android), using Chrome, Firefox, or Opera. Then, you should see all the connected devices and can drag and drop files onto their avatar in the webpage. The files aren’t ever uploaded to any server, and once the recipient accepts the file, the download starts right away.

via itworld.com

Feira de Natal e Concerto dos FireBlue no dia 7 de dezembro no Seixal

Imagem

Feira de Natal e Concerto dos FireBlue no dia 7 de dezembro no Seixal!

No próximo sábado dia 7 de Dezembro o dia começa às 10h com a Feira de Natal da Casa dos Pescadores do Seixal uma Feira recheada de expositores criativos e artigos para surpreender este Natal!
Para terminar em grande temos o concerto dos Fireblue, o projeto de Nuno Andrade, um excelente cantor, músico e compositor, que promete dar-nos muita e boa música!
Das 10h até às 19h podem visitar a Feira de Natal que irá decorrer no salão nobre da Casa dos Pescadores.
Aí poderão encontrar um leque variado de expositores que prometem trazermos as melhores sugestões de oferta para este Natal. Ofertas personalizadas, criativas, económicas e ecológicas.
Tudo o que precisamos para surpreender os mais queridos neste Natal!

Durante todo o dia vão poder encontrar

Veggie Tree | Bolos, quiches, tchai e outras iguarias

Sx Collectables | Antiguidades e artigos Vintage

A Ervilha | Receitas caseiras em tricot e crochet

Fairy Ring’s Collections | Bijuteria, gorros e bonecos de lã feitos à mão

Rita Guerra Cerâmica | Peças e acessórios em cerâmica

Ogai | Bonecos e peças em tecido

Rita Cruz | Bolsas, carteiras e bijuteria Macramé

ArteMisia | Produtos Ayurvedicos

ABC Hortas Gourmet | Agricultura biológica em casa

Três Sentidos | Sabonetes artesanais

L1B Associação cultural | Peças de arte

Madame kösta | Peças de arte com matéria reciclada

Idalina Guerreiro | Bijuterias e outros artigos

Livros e Serigrafias de | Palyground.atelier

Oficina do Cego

Editora Imprensa Canalha

Editora Montesinos

| mais expositores a anunciar em breve |

Todo o dia
Bar | Música | Animação | Pinturas Faciais

À noite, pelas 22h a ultima edição de 2013 da Casa dos Pescadores do Seixal despede-se do ano em grande com o concerto dos “Fireblue“.
Um projeto de Nuno Andrade que conta com grandes músicos à guitarra, baixo, bateria e voz e excelentes temas de blues que prometem aquecer as almas nesta noite de Dezembro.

Boas sugestões para passar um dia diferente com a família e os amigos!

Esperamos por todos e bom Natal!

Organização AMIDS