Camotocouture

Hello world!

2018-04-25T20:25:23Z

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

The post Hello world! appeared first on Camotocouture.

A Few Different Ways To Use SVG Sprites In Animation

2015-04-17T08:00:10Z

There are some things we know and like about SVGs. First, SVGs have smooth, clean edges on any display, so using SVGs can reduce the number of HTTP requests for image replacement. Second, it’s easy to make an SVG scalable to its container for responsive development. In this article we’ll cover a few ways of using SVG sprites to describe motion on the web. I’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.

Technique #1: Complex Responsive Animation With An SVG Sprite

Most of us have been using sprites for development for a long time now: using SVG in a sprite is not new business. This article by Ilya Pukhalski breaks down Joe Harrison’s responsive icons technique in a very impressive way. In this first example we’ll take it one step further and use SVG sprites not just for iconography, but for complex, fluid animation as well. Animation has soared in popularity this year due to increased browser support for animations and user experience benefits of movement that supports content. But until now, we have not thought about this medium in the same way we have about so many other design concepts that shift for different screen sizes. Even if the animation is complex, we can still get the most bang for our performance buck while still catering to our users’ needs. Responsive web development adapts content for different displays for so many elements of UI interfaces. Animation can modify with the same considerations as the typography and layout, adjusting to the viewport and clarifying the design. In this example, I’ve made a modern day Book of Kells initial illustration to show a complex animation in the context of page content. First, I’ve made three different designs based on small, medium and large viewports. I use this as my map for the rest of the project and refer to it often. Other people plan differently, working in the browser or making sketches. Choose the method that makes you most productive.

GROUPING AND DRYING IT OUT

Now that we have a map, we can start reducing the repetition of elements. We identify the shapes that the first and second versions have in common so we can reuse them. A class can be assigned to the rect in the background and so that we can change the fill using a media query. All the objects are named and grouped for easy reference, such as “mountains”, “bridge” or “tower”. We’ll also put a class on all detailed shapes, such as building windows or bridge ropes that will be removed in the medium screen size. Any group that’s too different to modify, we put together in a larger group that we can then hide or display. If the first illustration is kells_1, the group particular to the second illustration is kells_2, and the last is kells_3. In order to make the whole SVG similarly scalable to the same container values, the last illustration becomes the same size as the first.

The post A Few Different Ways To Use SVG Sprites In Animation appeared first on Camotocouture.

How To Get Started With Sketchnotes

2015-04-17T06:42:55Z

Have you ever seen someone make creative notes at a conference and wished that your own notebook was more presentable? It’s probably much easier to do than you think. You don’t have to be an aspiring lettering artist, and you don’t need to develop top-notch drawing skills. Making your notes more interesting doesn’t have to be a huge undertaking. It’s not like learning to play the piano or taking up diving. If you think sketchnoting looks fun, I have some tips to get you started.

Creative Note-Taking For Anyone

People make all sorts of visual notes. An army of sketchnoters is out there, and everyone has their own style. Some do amazing sketches and lavish letters. Some translate complicated concepts into easy-to-grasp diagrams. But for the sake of this article, let’s keep it simple. It doesn’t matter whether you call it sketchnoting or doodling or scribbling or simply “adding some joy” to your notes. Just aim for something visual that takes your notes to the next level. Combine this with an effort to slow down when forming letters, and I’ll bet you will surprise yourself at the difference it makes. The goal is to create something that you would want to take out again and look at — and, hey, perhaps even show others.

You Are Your Own Target Audience

Sketchnotes done live over 45 minutes can’t capture everything. They won’t be a perfect structured summary. My notes are not intended to stand on their own feet. They have value for me and perhaps other attendees at the conference. Make the notes for yourself first. Share them if you want — other attendees will probably love to take a look. Sketchnotes can spread the word to the outside world about an interesting talk or about the conference itself. But people who have not heard the talk can’t expect the sketchnotes to carry much meaning on their own. I mention this because people sometimes misunderstand their purpose. Keeping this in mind will help you get started on your own sketchnotes. You don’t have to try to “instantly” explain everything or worry that you’ll miss one of the speaker’s key points. It’s OK — they’re just your personal notes.

A Bit More Useful And A Lot More Fun

So, why bother with any of this? Because the act of writing stuff down helps you to remember. This is a basic study technique. The sound bites you capture from a talk will jog your memory when you flip through the notes later. By drawing something to create connections, you will increase your ability to remember. Notes that combine words with sketches are more useful than text alone. Chances are you don’t even hang onto boring old regular notes anyway. Making something you will look at later might be the most helpful benefit. But all in all, you could do worse than to have “fun” be your main reason for taking sketchnotes. When the primary purpose is fun, you’ll let yourself play around. Write something silly, draw objects that talk, and in general don’t be so serious. I reckon fun is reason enough.

The post How To Get Started With Sketchnotes appeared first on Camotocouture.

How To Transform Your Problem-Solving And Creativity

2015-04-17T06:23:20Z

Think of all the people you know who inspire you, whether family and friends or public figures. Who are the most interesting, engaging and stimulating to be around? The ones with the great ideas and energy for life? These people almost certainly always ask questions and have an insatiable thirst to learn new things. According to Donald N. MacKinnon, who is considered to be a world-leading researcher on creativity:

“Creative people have considerable cognitive flexibility, communicate easily, are intellectually curious, and tend to let their impulses flow freely.”

Creative thinkers tend to be balls of energy and productivity machines. Think ofRichard Branson and Elon Musk. Another is Yoshiro Nakamatso, a Japanese inventor who claims to have his best ideas while underwater suffering from oxygen starvation. He invented the floppy disk in 1952, apparently seconds away from death by drowning. Creativity is generally perceived to be something external, out of our control, or an inherent talent for a chosen few. But consider that creativity is fundamentally about ideas (the Oxford Dictionary defines a creative state as relating to or involving imagination or original ideas). Ideas are generated by thinking, and skills for thinking can be learned. Therefore, creativity, thinking and idea generation are skills that can be learned. Jose G. Gomez says this in “What Do We Know About Creativity?” (PDF):

“Perhaps the most prevailing view today is that beyond a minimum level of intelligence necessary for mastery in a given field, additional intelligence offers no guarantee of a corresponding increase in creativity.”

Some people do have a greater aptitude for thinking creatively and laterally, just as some people are more logic-based, but it’s a misconception that creativity is the exclusive right of a select group. Research indicates that anyone can tap into this energy and be more productive.

“Creativity is not a talent, it’s a way of operating.” – John Cleese

Learning a variety of thinking skills will have a dramatic impact on your productivity and output. Although often considered technical and, therefore, logical disciplines, coding and web design (like mathematics) require a highly creative approach and superior problem-solving skills. Anyone can increase their creativity by learning the practical skill of thinking. The five books we’ll explore below are my recommended reading list. This selection of material will stimulate your thinking and reflection on creativity, as well as provide valuable, practical exercises that will improve your thinking and problem-solving skills.

The post How To Transform Your Problem-Solving And Creativity appeared first on Camotocouture.

Icons Of Digital Design

2015-04-17T06:16:34Z

Apple launched the Macintosh personal computer in 1984. It was more user-friendly than other PCs at that time — and, with its desktop publishing software, graphical user interface and mouse (all novel at the time), the Mac was uniquely geared to designers. Compared to what we can create on the computer today, the original Macintosh, with only 128 KB of memory, had limited capabilities. At the time, though, it opened up so many new possibilities. Of course, using a computer didn’t automatically make designers better at their craft. Instead, the new technology gave them more control and sped up their exploration process. As with anything unfamiliar, the Mac sparked debate among designers during this time: While some saw the computer as simply another tool for creating work, like a drawing pen, others saw its potential as a medium in itself. Emerging digital technology also changed typography, exploding the number of typefaces available and giving designers the tools to create and distribute their own fonts. Some digital typefaces were updated versions of classics, while others were brand new: type that was made for low-resolution screens, and type that was less functional and more illustrative. It was easier to break the rules. There was a refreshing jolt of youthful experimentation as people moved past the limits of the rational and functional. I wrote my book Graphic Icons: Visionaries Who Shaped Modern Graphic Design to highlight the era’s influential designers, from El Lissitzky in the early 1900s to Stefan Sagmeister today. Each of these designers broke from tradition and changed the world of design in some way. Those who designed not only on the screen, but for the screen, ushered in a new era of digital design, mixing media and incorporating motion, sound and interactivity. Below are a few of those pioneers.

Wim Crouwel

First, though, let’s step back. Twenty years before the Macintosh was released, Dutch designer Wim Crouwel had an uncanny sense of how computers would influence design and vice versa. In the 1960s, developments in printing technology gave designers more control over their work: Instead of relying on a printer to compose type and position images in a layout, designers used rub-down type and photomechanical transfer to do it themselves. This DIY approach gave designers more freedom and flexibility in using, manipulating and creating type. The computer was in its early stages at the time, and Crouwel saw an exhibition in Germany on digital type production. The limitations were clear to him. Dot-matrix printers and computer screens couldn’t reproduce traditional type with curved letterforms. So, he created a groundbreaking typeface to work with this emerging technology. Starting with the Swiss typographic grid, Crouwel based letters on the rectangle, using only vertical, horizontal and diagonal lines. The result was 1967’s New Alphabet, so radical in appearance that it was almost abstract. It was never meant to be used; it was just an experiment. Crouwel must have been surprised to see the New Alphabet used on the cover that Peter Saville designed for Joy Division’s Substance album 20 years later. Still, that concept influenced his future work, like his poster for Vormgevers(“Designers”), for which he hand-rendered the lettering based on squares in a visible grid. Crouwel developed a system for Amsterdam’s Stedelijk Museum where each piece — posters, brochures, advertisements — used the same grid. Although these pieces promoted art exhibits, they never depicted the art itself. The type-centric design and common grid unified the museum’s communications, yet the system was flexible enough to remain fresh and interesting. Crouwel also broke new ground in how Dutch designers worked. In the 1960s, Dutch companies with large projects often hired larger firms in cities like London, thinking that the local designers who usually worked solo wouldn’t be able to handle the workload. In order to attract those large projects, Crouwel and four partners, with a range of experience in graphic and industrial design, formed Total Design. It was the country’s first multidisciplinary studio, where teams handled complex two- and three-dimensional projects. It was successful: Private corporations, government agencies and arts organizations hired Total, and their designs for postage stamps, airport signage and museum posters made a distinct mark on the country’s visual culture.

The post Icons Of Digital Design appeared first on Camotocouture.

How To Streamline Creative Dialogue

2015-04-16T13:04:19Z

In the beginning of my professional career, I often struggled with status meetings. They regularly turned into back-and-forth conversation with a client who was making weird design suggestions. I often left these meetings feeling very confused, uncertain and demotivated after weeks of passionate effort. It took me a while to figure out what was happening and how I could improve my workflow. With this article, I want to share my learnings after years of streamlining creative dialogue.

A Clear Understanding

Looking back at these confusing meetings, I noticed that we often discussed visual or technical issues without a clear understanding of the business goals — sometimes even without clear objectives at all! Instead of identifying the true problems and expectations, we immediately jumped to design suggestions that were based on personal opinion, assumption and gut feeling. One of the most important improvements I made was introducing a learning phase in every new project we did. Its purpose is to make sure the entire team has a clear understanding of the problem(s) we are going to address, both for the business and the user. We approach this simply by asking the right questions and listening carefully. Here are a few of my favorite questions, which I’ll fire off during a strategic workshop with a client or while interviewing current or potential customers.

Why would you recommend this product to a friend?
What problems do you see that really concern you?
What’s the first change you want to see?
Why is this project or product so important for the company?
What story about this project would you like to read in the newspaper?
What would be the biggest compliment a customer could give your organization?

If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions. – Albert Einstein

RUNNING INTERVIEWS

Running interviews shouldn’t be complex. It’s all about facilitating the conversation and helping to detect the real needs, problems or expectations. Start the interview by asking some of the questions above, and let others do the talking at first. Here are a few guidelines we use to process the answers and turn them into valuable learnings and observations.

Keep it simple. Ask only one question at a time, and always focus on the person being interviewed. The question itself should be as simple and direct as possible, without any assumption or hidden opinion.
Give them a second. Simple questions are often not so simple to answer. Give people some time and space to think and formulate their thoughts. A few seconds of silence does not have to be awkward!
Remove contextual information. Prepare for long answers that provide all sorts of explanations. Try to summarize and fine-tune these answers by removing the contextual information. Only when no context is required will an answer truly be crystal clear. You can aim for this by asking more questions and diving deeper into the subject. Repeat the core of what they are saying — according to you, that is — and ask if you’ve understood correctly.
Aim for the one-minute answer. Coach people towards an answer that can be given in less than one minute. This little trick also helps to remove irrelevant context and keep answers short and easy to understand.
Record the interview. I have found that recording interviews on video is a great way to easily capture and share the output. You can even produce a short documentary to distribute internally. Works like a charm!

The post How To Streamline Creative Dialogue appeared first on Camotocouture.

Five Characteristics Of An Innovation

2015-04-16T12:01:51Z

The “diffusion of innovations” theory of communications expert and rural sociologist Everett Rogers attempts to identify and explain the factors that lead to people and groups adopting innovations (new ideas and technologies). Design teams that account for both usability and how people adopt innovation stand a much greater chance of having users accept and use their products. The diffusion of innovations is a complex process; design teams can use their knowledge of the theory to create a road map for how they will address critical factors in the design and marketing of their product. I covered the types of adopters and the steps in the process of adoption in the first article of this series. This second article presents the five characteristics of an innovation that determine its use. According to the diffusion of innovations theory, how well an innovation addresses these characteristics will determine people’s long-term adoption of an innovation. Design teams can address many components of these characteristics.

Characteristics Of An Innovation

Individuals do not automatically adopt new products. They make a conscious decision of whether to use a particular one. That is, their decision to adopt an innovation is deliberate. This is the third step in the process of adopting an innovation, covered in the first article. Design teams must proactively address this step if they want individuals to decide on long-term use of their product. The diffusion of innovations theory identifies the following five characteristics that determine people’s use of an innovation.

RELATIVE ADVANTAGE

Relative advantage measures how improved an innovation is over a competing option or the previous generation of a product. Potential users need to see how an innovation improves their current situation. Improvements can be in one or many of these areas:

better service,
consolidation of multiple functions into one tool,
decreased need for supplies and equipment,
empowerment of users,
improved interface,
increased customizability,
increased longevity,
increased productivity,
reduced user effort,
reduced environmental impact,
saving of money,
saving of space or storage,
saving of time.

In the 1980s and early ’90s, computer word-processing programs WordStar and WordPerfect demonstrated relative advantage over existing products. Most offices used typewriters, which took up a lot of space, performed only one function and required servicing, supplies (type ribbons, whiteout, etc.) and parts on a regular basis (they were also pretty loud). As computers became more prevalent, WordStar and WordPerfect freed users from typewriters. The relative advantage was obvious. The word-processing programs didn’t require any additional physical space aside from the personal computer, which already did a number of other office tasks; they reduced the need for ink and correction tape; documents could be easily edited prior to printing; and files could be saved and transported for editing on other computers using floppy disks. Soon, typewriters were being phased out of offices and replaced with these computer word-processing programs.

The post Five Characteristics Of An Innovation appeared first on Camotocouture.

Help Your Content Go Anywhere With A Mobile Content Strategy

2015-04-16T11:09:57Z

You’ve put a lot of thought, time and effort into creating great content, and you want users to have a great experience with your content. While you might have created the best content in the world, you don’t get to choose how users access it. That’s why it’s important to make sure your content works beautifully on every platform and device, desktop, mobile or something else entirely. Before you panic, I’m not advocating that you create individual content strategies for each device or network that your content is published to. That would be crazy, and it wouldn’t necessarily work better for your users. It’s not because you wouldn’t do a good job — it’s because it would be impossible to plan and keep up with special content strategies for every device that exists now (not to mention ones that haven’t been invented yet). While there’s no magic bullet to make sure your content is publishable and useful on every device, you can change the way you think about, plan for and create content so that it can go anywhere it needs to go. Developing a mobile content strategy isn’t just about making content look as good on phones and tablets as it does on the desktop. As Sara Wachter-Boettcher writes in her book, “Content Everywhere“, It’s about creating portable, flexible content structuresthat go wherever your users are, without sacrificing quality. It’s an intimidating task, but not impossible. We’ll start with an example, then cover some of the things you can do to make your content more flexible and accessible. mp

The post Help Your Content Go Anywhere With A Mobile Content Strategy appeared first on Camotocouture.

Designing For Smartwatches And Wearables To Enhance Real-Life Experience

2015-03-23T10:13:58Z

Imagine two futures of mobile technology: in one, we are distracted away from our real-world experiences, increasingly focused on technology and missing out on what is going on around us; in the other, technology enhances our life experiences by providing a needed boost at just the right time. The first reality is with us already. When was the last time you enjoyed a meal with friends without it being interrupted by people paying attention to their smartphones instead of you? How many times have you had to watch out for pedestrians who are walking with their faces buried in a device, oblivious to their surroundings? The second reality could be our future – it just requires a different design approach. We have to shift our design focus from technology to the world around us. As smartwatches and wearables become more popular, we need to create design experiences that allow us to create experiences that are still engaging, but less distracting.

Lessons Learned From A Real-Life Project

We create a future of excessive distraction by treating our devices as small PCs. Cramming too much onto a small screen, and demanding frequent attention on a device that is strapped to your body means you can’t get away from the constant buzzing and beeping right up against your skin. Long, immersive workflows that are easily handled on a larger device become unbearable on a device that has less screen area and physical navigation space. I noticed this on my first smartwatch project. By designing an application based on our experience with mobile phones, we accidentally created something intrusive, irritating and distracting. That meant the inputs and workflows demanded a lot of attention and were so involved that people had to stop moving in order to view notifications or interact with the device. Our biggest mistake was using the vibration motor on all notifications. If you had a lot of notifications, your smartwatch would buzz constantly. You can’t get away from it and people would actually get angry at the app.

HOW THE REAL WORLD INSPIRED OUR BEST APPROACH

In a meeting, I noticed the lead developer glancing down at the smartwatch on his wrist from time to time. As he glanced down, he was still engaged in the conversation. I wasn’t distracted by his behavior. He had configured his smartwatch to only notify him if he got communications from his family, boss or other important people. Once in a while, he interacted with the device for a split second, and continued on with our conversation. Although he was distracted by the device, it didn’t demand his complete attention. I was blown away at how different his experience was from my smartphone. If my phone buzzes in my pocket or my bag, it completely distracts me and I stop focusing on what is going on around me to attend to the device. I reach into my pocket, pull out the device, unlock the screen, then navigate to the message, decide if it’s important, and then put the device back. Now where were we? Even if I optimize my device settings to smooth some of this interaction out, it takes me much longer to perform the same task on my smartphone because of the different form factor. This meeting transformed our approach to developing our app for the smartwatch. Instead of creating an immersive device experience that demanded the user’s attention, we decided to create something much more subtle. In fact, we moved away from focusing on application and web development experiences to focusing on application notifications.

DESIGNING WITH A DIFFERENT FOCUS IN MIND

Instead of cramming everything we could think of on these smaller devices, we aimed for a lightweight extension of our digital virtual experience into the real world. You could get full control on a PC, but on the smartwatch, we provided notifications, reminders and short summaries. If it was important, and it could be done easily on a smartwatch, we also provided minimal control over that digital experience. If you needed to do more, you could access the system on a smartwatch, or a PC. We had a theory that we could replicate about 60% of PC functionality on a smartphone, and another 20% of that on a smartwatch. Each different kind of technology should provide a different window on our virtual data and services depending on their technical capabilities and what the user is doing. Byproviding just the right information, at just the right time, we can get back to focusing on the real world more quickly. We stopped trying to display, direct and control what our end users could do with an app, and relied on their brains and imaginations more. In fact, when we gave them more control, with information in context to help solve the problem they had right then and there, users seemed to appreciate that.

Design To Enhance Real-Life Experiences

After the initial excitement of buying a device wears off, you usually discover that apps really don’t solve the problems you have as you are on the move. When you talk to others about the device, you find it difficult to explain why you even own and use it other than as a geeky novelty. Now, imagine an app that reminds you of your meeting location because it can tell you are on the wrong floor. Or one that tells you the daily specials when you walk into a coffee shop and also helps you pay. Imagine an app that alerts you to a safety brief as you head towards a work site, or another app that alerts you when you are getting lost in an unfamiliar city. These ideas may seem a bit far off, but they are the sorts of things smartwatches and similar small screen devices could really help with. As Josh Clark says, these kinds of experiences have the potential to amplify our humanity. How is this different from a smartphone? A smartphone demands your complete attention, which interrupts your real-world activities. If your smartwatch alerts you to a new text or email, you can casually glance at your wrist, process the information, and continue on with what you were doing. This is more subtle and familiar behavior borrowed from traditional wristwatches, so it is socially acceptable. In a meeting, constantly checking your smartphone is much more visible, disruptive, irritating and perceived as disrespectful. If you glance at your wrist once in a while, that is fine. It’s important to remember that all of these devices interrupt our lives in some way. I analyze any interruption in our app designs to see if it has a positive effect, a potentially negative effect, or a neutral effect on what the user is doing at the time. You can actually do amazing things with a positive interruption. But you have to be ruthless about what features you implement. The Pebble smartwatch design guide talks about “tiny moments of awesome” that you experience as you are out in the real world. What will your device provide?

The post Designing For Smartwatches And Wearables To Enhance Real-Life Experience appeared first on Camotocouture.

Sit dolor nonumes intellegebat

2013-03-21T16:12:13Z

Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque. Sit dolor nonumes intellegebat cu, ut per error interpretaris. Et eam appareat theophrastus. Ea autem congue pertinacia mei, mazim iisque.

The post Sit dolor nonumes intellegebat appeared first on Camotocouture.