1stwebdesigner

---

How to Embrace Imperfection and Turn It Into Creativity Posted: 14 May 2014 06:00 AM PDT The frailty of creatives is that they never get 100% content with their creation. As Leonardo Vinci said, "Art is never finished, only abandoned." It resounds true to most designers. There's always a little bit of regret when closing a project they've spent several hours to a couple of weeks refining to the pixel. Creatives seem to have a problem on how to embrace imperfection. As a writer I understand this too. I paint pictures with words and there are literally hundreds of ways to project an image, but only a handful of them put together will give the "right feel". Here are some questions for you: When designing, do you trust intuition or reason? Do you simply know what will work perfectly together or do you have a set of checklist to follow? This article may be a bit gnomic in nature, perfect with your morning coffee when you are about to start your day with a flair but terrible to act as an "emergency" advice. In any case, how can you turn imperfection into creativity? Let's find out! A Little Bit of Disorder Is Okay "What is normal for the spider is chaos for the fly."  – Morticia Addams One of the problems new designers face is the fear of criticism. And rightly so, words should be feared, for they can return and haunt. Realize that you can't please everyone, and that everyone will have their own opinion about what you create. Take Facebook, for example, with its redesigns over the years. With every redesign, a lot of its users clamor for the old interface, saying that the new one is terrible. But do you hear anyone complaining now? Thought so. Another example is to look back to your very first design. I bet you were completely satisfied with it, singing praises for it even, but if you will look at it now, you'll most likely spend a good chunk of time laughing and cringing. Here's a short story I've always loved that demonstrates my point. A priest was in charge of the garden within a famous Zen temple. He had been given the job because he loved the flowers, shrubs, and trees. Next to the temple there was another, smaller temple where there lived a very old Zen master. One day, when the priest was expecting some special guests, he took extra care in tending to the garden. He pulled the weeds, trimmed the shrubs, combed the moss, and spent a long time meticulously raking up and carefully arranging all the dry autumn leaves. As he worked, the old master watched him with interest from across the wall that separated the temples. When he had finished, the priest stood back to admire his work. “Isn’t it beautiful,” he called out to the old master. “Yes,” replied the old man, “but there is something missing. Help me over this wall and I’ll put it right for you.” After hesitating, the priest lifted the old fellow over and set him down. Slowly, the master walked to the tree near the center of the garden, grabbed it by the trunk, and shook it. Leaves showered down all over the garden. “There,” said the old man, “you can put me back now.” Beauty of Procrastination Two possible scenarios exist if you will skip this post: either you'll actually skip this post and read it later or totally forget about it. What does this demonstrate? Another problem many creatives experience: procrastination. Well, everyone has their bouts with procrastination, but I would argue that creatives experience this more in a grander scale. You see, starting something is always the hardest part. What colors should I use? Should I place this element here or there? Is this the way my client envisioned his website? How many hours will I spend working on this project? How many versions should I present as a prototype/draft? So many questions, yet so few answers. This is what happens at the beginning of any task. You get loaded up with questions that the thing in front of you appear to be a very big and daunting task waiting for you to (squirrel!) start working on. But nah, you still have three weeks to finish it, right? Why not watch two episodes of Hannibal first then play one game of League of Legends, then finally start working. What do you think? That's the story of my life. It's the reason why I submitted this article to my editor two days late. As a procrastinator to another, I am learning to deal with this problem by accepting that there is indeed a problem. And look where it got me, it got me to write this article! That is actually my main motivation behind this post. So, how do you turn procrastination into creativity? 1. Figure out why you procrastinate. Is it because you had a similar experience before that didn't register well with your mind? Like, say, instant rejection of your first draft? There is this thing called experiential avoidance where you will do anything it takes to avoid experiencing discomfort, hence looking elsewhere to delay the inevitable. But as it turns out, procrastination is in the genes. So, the first step is to realize there is a problem and that you want to solve it. Sure, running away from the big and scary stuff is easier, but it won't get you near your goals. Once you accept that there is one, and you pinpoint exactly what that is, you are ready for step two. But don't do it this way, though. 2. Stop asking yourself questions and instead list them all down. Then answer them one by one. This is the most basic form of this beautiful thing we call planning. By listing down the questions you need to answer, you are giving yourself a smaller view of the pieces that comprise the whole. 3. You don't have to do anything at all. As it turns out, procrastination helps with creativity. Well, unless your life is being ruined by your procrastination, please go back to the first two steps. 3. Burnt out? Rise like a phoenix. One way or another, you will burn yourself out. It doesn't matter if you hold great passion with the work you do, you will get burnt out at least once in your life. And you know what? That's okay. It's your mind's way of telling you that you have run out of creative juice, that you'll need a respite from your routine. While it may seem counterproductive, it's actually the opposite if you will spend some time doing the second best thing you love, or the third, fourth, even fifth. Remember when everyone loved Gangnam Style? Yeah, everyone listened to that song too much to the point where they started hating it. It's the same with work. No matter how much you love your work, even if it's your priority in life- you will hate it at some point in your life. I love writing. I consume four notebooks a year and write on my blogs daily, at least I used to blog that hard. Then I burned myself. For weeks, I stopped writing simply because I can't. Starting a sentence was a…death sentence. Nothing felt right. How did I combat it? I spent an entire weekend away from my trusty tools: pen, notebook, laptop, and my phone. My entire Saturday afternoon was spent reading Wuthering Heights in a cafe I've never been to, without care for the outside world. The next day I attended a meditation class (which turned out to be a recruitment center for some sort of cult *laughs*), got lost in the city I grew in, got off the bus five kilometers away from my home just to walk, and slept like a baby when bedtime arrived. Monday came and I felt absolutely refreshed. Prior to this, I spent my weekends thinking about work. My point? Learn how to separate your work from your personal life. If your number one passion is making beautiful designs, don't spend your day-offs designing. Spend time doing something else, like gardening. I can't fully emphasize the importance of this since you'll have to experience it first. So, how about trying it on your next day off? To End There are three main problems people in the creative field experience on a daily basis: perfectionism, procrastination, and running out of creative juice. Yes, perfectionism is an issue. In a way, it kills creativity by adding anxiety to every step taken; there's a pressure that keeps creativity at bay. But once you manage to overcome your tendency to look at things as either perfect or trash, you will realize that little cracks or imperfections here and there are actually essential. That brings us to procrastination. That anxiety I mentioned earlier is most likely the reason why you are procrastinating. Subconsciously, your mind tells you to avoid that feeling. But it still depends, maybe, you just want instant gratification. To end, I want to share a Japanese repair technique called Kintsukuroi. It means to repair broken things with gold. Broken things don't necessarily mean they should be thrown away; they can still become more beautiful.

Visualize Data Beautifully With Chart.js Library Posted: 13 May 2014 06:00 AM PDT Creating charts that look presentable can be a bit of a pain sometimes. Most often, web designers or developers use graphics to display data using Photoshop or Illustrator, which may take a lot time to be done. Good thing, there are many available free JavaScript libraries online that web designers or developers can use to display data beautifully. The web designer or developer can then present data without creating graphics in Photoshop or Illustrator. Chart.js library is one of the great online JavaScript libraries which builds data using HTML5 canvas element to draw graphs and charts, complete with documentation. To see chart.js in action, we’re going to build the following charts using web programming languages as our labels with their fictional data. Line Chart Bar Chart Radar Chart Polar Area Chart Pie Chart Doughnut Chart Resource you need to complete this tutorial Chart.js Library Time and Patience Download Source Files View Demo Getting Started First, we need to copy the chart.min.js out of the unzipped folder to our js folder or your preferred directory. Setting Up The next thing we need to do is to create a new HTML file and put on the following codes. This will include the HTML5 doctype and then the CSS file directory followed by our Chart.js library file directory. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Visualize Data Beautifully Using JS Charts</title> <link href="css/style.css" media="screen" rel="stylesheet"> <script type="text/javascript" src="js/Chart.min.js"></script> </head> <body> </body> </html> Drawing a Line Chart To draw a line chart, we need to create an HTML5 canvas element first on our body section of our HTML file. <canvas id="canvas" height="450" width="600"></canvas> Next, we need to create a script that will initialize the chart class (in this example, I used myLineChart) and then retrieve the 2D context of the canvas where we want to draw the chart. Copy the code before the closing body tag. var myLineChart = new Chart(document.getElementById("canvas").getContext("2d")).Line(LineChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"}); Note: You can also add some styles you want on the each chart, such as the text color and font size using the Chart options. In the example above, I used scaleFontSize and scaleFontColor to change the font size and the text color of the data. You can check the Chart.js documentation to see more available chart options for each chart. For our data structure, we will initialize an object (for this example I used LineChart) that contains all labels for our line chart. The data for the line charts will be broken up into an array of data sets. You should define the values of each datasets such as the fill color, stroke color, point color, point stroke color and the data itself. var LineChart = { labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"], datasets: [{ fillColor: "rgba(151,249,190,0.5)", strokeColor: "rgba(255,255,255,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", data: [10, 20, 30, 40, 50] }, { fillColor: "rgba(252,147,65,0.5)", strokeColor: "rgba(255,255,255,1)", pointColor: "rgba(173,173,173,1)", pointStrokeColor: "#fff", data: [28, 68, 40, 19, 96] }] } You will get a similar result like the image below: Drawing a Bar Chart To draw a bar chart, we need to create an HTML5 canvas element first on our body section of our HTML file. <canvas id="canvas" height="450" width="600"></canvas> Next, we will create a script that will represent the bar chart class (in this example, I used myBarChart) and then retrieve the 2D context of the canvas. Copy the code before the closing body tag. var myBarChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(BarChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"}); The bar chart has almost the same data structure to the line chart. Let’s use an object (for this example, I used BarChart) to hold on the labels and values for bar chart. As you can see, we are showing the same data as the previous line chart example. var BarChart = { labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"], datasets: [{ fillColor: "rgba(151,249,190,0.5)", strokeColor: "rgba(255,255,255,1)", data: [13, 20, 30, 40, 50] }, { fillColor: "rgba(252,147,65,0.5)", strokeColor: "rgba(255,255,255,1)", data: [28, 68, 40, 19, 96] }] } You will get a similar result like the image below: Drawing a Radar Chart Next, let's draw a Radar chart. So, first put on the HTML5 canvas element code on our HTML file. <canvas id="canvas" height="450" width="610"></canvas> Then, we will create a script that will initialize the radar chart class (in this example, I used myRadarChart) and then retrieve the 2D context of the canvas. Put the code below before the closing body tag. var myRadarChart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(RadarChart, {pointLabelFontSize : 13, pointLabelFontColor : "#ffa45e"}); For the radar chart, we need to show a label to each point of the chart. This will include an array of strings and then display it around the chart. To do this, let’s again instantiate an object (for this example I used RadarChart) as a container of the labels and values of our radar chart. var RadarChart = { labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"], datasets: [{ fillColor: "rgba(151,249,190,0.5)", strokeColor: "rgba(255,255,255,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", data: [10, 20, 30, 40, 50] }, { fillColor: "rgba(252,147,65,0.5)", strokeColor: "rgba(255,255,255,1)", pointColor: "rgba(173,173,173,1)", pointStrokeColor: "#fff", data: [28, 48, 40, 19, 96] }] } You will get a similar result like the image below: Drawing a Polar Area Chart To draw a Polar Area chart, we need an HTML5 canvas element code on our HTML file. <canvas id="canvas" height="400" width="610"></canvas> Next, let’s create a script for our object (in this example, I used myPolarAreaChart) and then retrieve the 2D context of the canvas. You can copy the code below before the closing body tag. var myPolarAreaChart = new Chart(document.getElementById("canvas").getContext("2d")).PolarArea(PolarChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"}); Polar area charts are almost the same as the pie charts; however, each segment has the same angle and the radius differs depending on the value. Let’s create the data structure of Polar area chart by instantiating first the object (for this example, I used PolarChart) to hold the labels and values. The value attribute should be a number, while the color attribute should be a string. var PolarChart = [{ value: Math.random(), color: "#fac59c" }, { value: Math.random(), color: "#c9fadd" }, { value: Math.random(), color: "#a2efff" }, { value: Math.random(), color: "#e6d1ff" }, { value: Math.random(), color: "#ffd1f9" }, { value: Math.random(), color: "#ffd1d1" }]; You will get a similar result like the image below: Drawing a Pie Chart Next, let’s draw a pie chart. First, we need the HTML5 canvas element. <canvas id="canvas" height="450" width="610"></canvas> Then, let’s create our object (in this example, I used myPieChart) and then retrieve the 2D context of the canvas. Copy the code below before the closing body tag. var myPieChart = new Chart(document.getElementById("canvas").getContext("2d")).Pie(PieChart); For a pie chart, we need to pass in an array of objects with a value (which is a number) and a color property. So let’s do that. Copy the code below. var PieChart = [{ value: 40, color: "#fcc79e" }, { value: 30, color: "#beefd2" }, { value: 90, color: "#ffddfb" }]; You will get a similar result like the image below: Drawing a Doughnut Chart Lastly, we will draw a doughnut chart. We need to create an HTML5 canvas element first on our body section of our HTML file. <canvas id="canvas" height="450" width="610"></canvas> Next, we need to get the context of the canvas and to instantiate the chart. var myDoughnutChart = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(DoughnutChart); Finally, let’s create the data. For the doughnut chart, just like the pie chart, we need to pass in an array of objects with a value and a color property. var DoughnutChart = [{ value: 60, color: "#fcc79e" }, { value: 30, color: "#beefd2" }, { value: 50, color: "#ffddfb" }, { value: 120, color: "#cdecff" }, { value: 90, color: "#fff5bc" }]; You will get a similar result like the image below: Final Words Chart.js is a great JavaScript library to create charts in a way where you can be creative. This tutorial has taken you through the steps on how to use this cool library. However, there are some drawbacks in using Chart.js, like, it doesn’t have tooltips and no interactivity on it. That’s being said this JavaScript library has a long way to go and eventually be improve by different developers. Play around it and let me know if you have some demo where you came up with a cool nice design using the Chart Options. Hope you enjoyed this tutorial. See you again next time!

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610