Art Direction And Design - Vanseo Design

---

Art Direction And Design Posted: 28 May 2015 05:30 AM PDT What is art direction? Is it the trend from a few years back to give every blog post a different look? Not really. That was called art direction, but the trend wasn't quite art direction, even if it did present different aesthetics to different sets of content. Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes What is design's relationship to art direction? Are they the same thing? Similar? Is one a subset of the other? What's the connection between art direction and design? A few week's ago I listened to an episode of Andrew Clarke's Unfinished Business podcast. The guests on this particular episode were Dan Mall and Jeffrey Zeldman and all three had a very interesting conversation about design and art direction. The conversation arose out of a question about why the current state of web design is considered by many to be boring and lacking creativity. A lack of art direction was suggested as the main reason or one big reason for the less than exciting web design currently online. If you haven't listened to it, do yourself a favor and listen. It was definitely interesting and worth the time. While I listened I realized a lot of what I think of as improving the sites we design with meaningful aesthetics and communicating extra levels of communication is really art direction. I've probably misused the terms art direction and aesthetics at times and thought I would do a little research to make sure I understood art direction and design and their connection. Naturally since I put in the time to learn, I thought I'd share what I learned and offer some thoughts I have in general. I want to talk today about what art direction is as well as the relationship between art direction and design. I also want to offer some other reasons why the web doesn't look as aesthetically interesting as it might. Next week I'll share some additional thoughts and try to answer the question of how important is art direction to the web. What is Art Direction? I thought I'd start my research with a dictionary definition and found this. Art direction (n) — the management of the artistic and design elements of a project, esp. in film, television, advertising, or publishing. Seems reasonable enough. In a larger organization there are usually multiple people contributing to the content, art, and design of something like a magazine article. One person writes the article, another edits, a third designs the page layout or creates the illustrations or choose the photos or all of those things. Someone needs to direct all these people and ensure the work maintains the vision. Everything should be working in harmony, in unity, to communicate the same message. One part of art direction is having someone direct all the people who'll work on the project. Another part is having that someone create the vision, the concept, in the first place. Art direction is concerned with the message, the story being told. It's concerned with delivering an emotional impact. Art direction wants the reader or visitor to feel something that enhances the experience they get reading or viewing content. When you come up with a concept for a website, you're art directing. If you're thinking of words to describe the site and the emotion its aesthetics should carry, you're art directing. When you decide a site should be sophisticated or playful or adventurous or elegant, you're art directing. Art direction creates the vision, defines the tone, style, mood, and emotion that should be conveyed. Then it oversees the project to ensure the design remains in harmony with the vision and that the proper emotion is communicated. The Connection Between Art Direction and Design Design is the execution of art direction. If the art direction calls for a playful mood, the design might use a color scheme made from bright primary colors. Does this the right image convey the message? How long should a line of text be? Is a grid the best layout choice? Decisions likes these are design. It's how the art direction is executed. Art direction says the site should be dynamic and design uses diagonal lines to show dynamic. Design choose colors that work well together. Art direction ensures the color scheme is in harmony with he communication, the brand, the message. Art direction provides the guiding vision. It tells you one typeface is better than another because the face aligns better with he overall vision, even if the other typeface looks better out of context. Art direction provides the context for design. It answers questions about how the site should feel. Art direction is the concept, the strategy, the why. It's concerned with the whole, even beyond the site. It wants to unify the brand message. Design is the tactics, the execution of the strategy. It's the how. It implements the concept and it's concerned with the details in the parts. Is a Lack of Art Direction the Reason the Web Looks Boring? As I mentioned earlier, the subject of art direction came up in response to a question about the lack of creativity exhibited by most websites today. Is a lack of art direction the reason why the web looks boring? I'm not sure. I do think more art direction online would lead to less websites looking the same and I do think you would see more creativity and less sameness. I'm not sure that a lack of art direction is the reason for the current state though. Here are a handful of other causes and contributing factors. Flat Design Trend We all have our own tastes and something that looks good to you may not look good to me and vice versa. Either of us could thing something looks good while the other thinks boring. There will always be trends that appeal to certain tastes. Some people will like every trend and some people won't. Trends come and go. If you don't like the current trend, just wait awhile. A new trend will replace it. Today's trend is flat design, which strips away ornament and gets back to the basics of type, color, and layout. Designers work with less so there are less ways to differentiate one site from another. It can certainly be boring when so many sites aren't distinguishing themselves from one another. I'm sure the aesthetic details will come back. Prior to flat design the web was too far in the other direction. Flat design is the reaction. Before long you'll see the reaction to the reaction. The detail and depth will start to come back, though not to the extent it was before. Frameworks More people are working with frameworks like Bootstrap and Foundation and insert your favorite framework here. If you start in the same place, you aren't going to end up in vastly different places. The more the industry turns to frameworks, components, and patterns, oh my, the less the industry is doing anything resembling art directing or even designing as so many decisions are made for us and out of context of a particular project. The idea with frameworks is not so much the art as it is the efficiency. it makes a lot of sense for business. It's less work for the same or sometimes more money, but it doesn't help with creativity, uniqueness, and differentiation. However I don't think the use of frameworks and components and pattern libraries means we can't also be creative. Tools don't make you creative and they don't take away your creativity. They're just one way to express your creativity. You can be creative using a framework. Just because most aren't, doesn't mean you can't. Instead of using someone else's framework, build your own and keep it to yourself. It'll at least be unique to your work that way. The Technical Medium We work in a technical medium so more thought goes into the technical aspects of web design. Many people who design a site also develop the site. Time spent learning to develop and rapid changes in web development mean less time for visual design. Less time for visual aesthetics and art design. Perhaps the answer is more specialization, though we've learned through responsive design that design and development are better when they work together throughout a project. Less barriers between the two is good for the finished product. There's more focus on the technical though, because there needs to be and creativity could potentially suffer with it. Ideally you'd put in more time to both design and development, but practically you can't. Lack of Design Education I think part of this could be attributed to the design education (or lack of education) for many in the industry. I assume most print designers had some formal training, though I could be mistaken. I'm sure plenty didn't, but I would think more did. That's unlike web designers where I'd guess most don't have any formal design education. I'm speaking about myself here, but I'm pretty sure most web designers are similar. We started as web designers because we could build web pages with HTML and CSS and we wanted to make them look better and function better. We entered web design from the front end development side. I knew how to develop web pages first and then learned how to design them after. That probably contributes to less interesting designs as many in the industry haven't been exposed to design thinking. They know development thinking, but less about design thinking. It's a the Natural Cycle To a certain extent this is just a cycle. Like I said, a trend will emerge before it too becomes tiresome. A few years ago people criticized web sites because they were all style and little to no substance. Skeuomorphic details were everywhere though they often had no real connection to the content they were dressing up. Many were rightly criticized for being style without substance. Flat design is the reaction. Now it gets criticized for not having what skeuomorphism had. Most skeuomorphic designs weren't exactly art directed. They went after a style, but few if any were truly art directed. They weren't called boring though. I think a flat design can still be art directed despite the lack of depth and details. Choose colors, type, and layout all based on the emotional impact you want to create. Color is especially good at setting mood. That kind of art direction would probably still be called boring by some people. I'm not sure the reason for what some perceive as boring web design is a lack of art direction unless art direction requires more than making design decisions that are unified with the concept and vision for the site. If it requires all sorts of images and illustration then sure more art direction would lead to more interesting sites. But I don't think art direction means add images and illustration for the sake of adding images and illustration. I don't think a lack of art direction is the reason for boring design, but I do think more art direction would lead to less boring design and more original sites Closing Thoughts I often say we could do a better job with our aesthetics. It's not my strong suit, but I think we should all do better aesthetically. The aesthetics we add can and should be meaningful and add another layer of communication to our designs. I think what I've always meant is that we should art direct more. We should communicate the emotion to trigger a response with visitors. We should make our sites look better while we enhance our communication visually. The trend to give every blog post a different look was not art direction, though I suspect the trend did come from a desire to add more art direction to the web. Still it wasn't art direction because the aesthetics were more random than they should have been. They were often added at the end instead of being the guide from the beginning. They weren't purposeful or from a unified vision. The trend wasn't so much art directing as it was visually dressing up web pages just to visually dress them up. Art direction is more than a different look for each page. It's about creating a concept and vision for what will be communicated to emotionally impact the viewer in a way that helps the site achieve its goals. Design is how that vision is executed. While it's probably true that a lack of art direction contributes to the current boring state of web design, it's hardly the only reason and I think plenty of sites could be art directed and still be seen as boring by the same people. One question I haven't really answered in this recording and probably have't really asked yet is how important is art direction to the web? You can probably tell I like it and would like to see more online, but how important is it to the success of a site or business? I think the answer is more complex than a simple yes or no and I want to try to answer the question in another recording. I'll pick things up again next week. Download a free sample from my book Design Fundamentals. The post Art Direction And Design appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

How To Apply SVG Linear Gradients To A Fill Or Stroke - Vanseo Design

---

How To Apply SVG Linear Gradients To A Fill Or Stroke Posted: 26 May 2015 05:30 AM PDT There are three ways to fill or stroke SVG elements. You can use a solid color, a pattern, or a gradient. So far in this series we've seen the first two. Now it's time to talk about the third, gradients. SVG provides for both linear and radial gradients. I'll cover linear gradients today and take a look at radial gradients next week. SVG Linear Gradients If you've followed this series you'll recognize a lot of familiar aspects to gradients. You define them inside <defs> and reference them for later reuse as a fill or stroke. You define a linear gradient with the <linearGradient> element. Let's start with an example of a simple gradient that transitions from blue to green. Aside: Is it just me or did the creators of SVG do a good very job naming SVG elements and attributes? 1 2 3 4 5 6 7 8 9 10 <svg width="660" height="220"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#05a"/> <stop offset="100%" stop-color="#0a5"/> </linearGradient> </defs> <rect x="10" y="10" width="600" height="200" fill="url(#linear)" /> </svg> The example defines a linear gradient inside <defs> tags and gives the gradient and id of linear. The id is then referenced by the rectangles's fill property. We've seen this before with patterns, symbols, and groups. You define your graphic in one place and reference it in another. Let's turn our attention to what's new. Have a look at the <linearGradient> element and it's four attributes. The x and y values determine the starting and ending points of the gradient. In this case the gradient will start at 0% and end at 100% in the x direction and it remains at 0% in the y direction. In other words this will be a horizontal linear gradient. While I chose to use percents, both x and y values can be either a percent or a number between 0.0 and 1.0. If no value is specified 0 or 0% is the default. Inside the <linearGradient> tags are two color stops defined by <stop> elements. The first color stop sets a blue color at an offset of 0% and the second sets a green color at an offset of 100%. Here's the resulting graphic. I assume the result is what you expected or close to it. The first color stop (blue) is the color at the left edge (0%), the second color stop (green) is the color at the right edge (100%), and in between is a transition from one to the other. Here's the result when I change the x2 value to 50%. You can see the fill is entirely green at 50% of the way across the rectangle and remains green from 50% to 100%. The transition occurs between 0% and 50%. The gradient can be added to a stroke as well as a fill. Here I changed the rectangle from the previous example (with x2 set at 50%). I set the fill of the rectangle to a solid color and added the gradient to the stroke. A stroke-width of 20 should be more than enough to see the gradient. 1 <rect x="10" y="10" width="600" height="200" stroke="url(#linear)" stroke-width="20" fill="#630" /> Here's the result. You can see the gradient is now added to the stroke instead of the fill and hopefully I made the stroke wide enough so you can see that the gradient transitions between 0% and 50%, the same as in the previous example. You aren't limited to start and end color stops. You can define as many as you want. Here I added a third color stop so the gradient passes through red in between the blue and green. 1 2 3 4 5 6 7 8 9 10 11 <svg width="660" height="220"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#05a"/> <stop offset="50%" stop-color="#a55"/> <stop offset="100%" stop-color="#0a5"/> </linearGradient> </defs> <rect x="10" y="10" width="600" height="200" fill="url(#linear)" /> </svg> The resulting graphic shows blue at 0%, red at 50%, and green at 100%, with transitions in between. Those are the very basics of linear gradients and hopefully you agree they're easy to work with. However, there's more we can do with them. Attributes of the <stop> Element I showed some of the attributes on both the <linearGradient> and <stop> elements, but there are more. Let's start with <stop>, because I get to make that silly pun about starting with a stop and also because there's only one attribute for it we haven't yet seen. The <stop> element accepts three attributes, offset, stop-color, and stop-opacity. We've seen the first two already, but here they all are defined. offset — For linear gradients offset represents a location along the gradient vector. It defines where the gradient stop is located. You can set it as a number between 0 and 1 or a percent from 0% to 100%. stop-color — defines the color at the offset. stop-opacity — defines the opacity of the stop color at its offset as a number between 0 and 1 or as a percent between 0% and 100%. So far I haven't used the stop-opacity attribute, though I expect you already know how to use it. The default value is 1.0 and since I haven't set it in any of the examples, we've seen a fully opaque color at each color stop. Here's an example where I set the first color stop to show at 50% opacity (0.5) and the second I kept at 100% (1.0). 1 2 3 4 5 6 7 8 9 10 <svg width="660" height="220"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#05a" stop-opacity="0.5" /> <stop offset="100%" stop-color="#0a5" stop-opacity="1.0" /> </linearGradient> </defs> <rect x="10" y="10" width="600" height="200" fill="url(#linear)" /> </svg> Here's the result, which I again assume was at least similar to what you expected. Attributes of the <linearGradient> Element There's more than one attribute left to show you on <linearGradients>, however, if you've been following along with the series, most will be familiar. x1, x2, y1, y2 — define starting and stopping points for the gradient. The 1s are start points and the 2s are end points. id — the hook to reference the gradient. xlink:href — a way to reference one gradient inside another. The attributes on the referenced gradient are inherited, but can be overwritten. Here's an example showing one gradient referencing another, inheriting its values, and then overwriting a couple of them. 1 2 3 4 5 6 7 8 9 10 11 <svg width="660" height="220"> <linearGradient id="gradient1"> <stop id="stop1" offset="0%" stop-color="#05a" stop-opacity="0.5" /> <stop id="stop2" offset="100%" stop-color="#0a5"/> </linearGradient> <linearGradient id="gradient2" x1="0" x2="0" y1="0" y2="1" xlink:href="#gradient1"/> <rect x="0" y="0" width="600" height="200" fill="url(#gradient2)" /> </svg> The first gradient is from the previous example. The second gradient references it and changes the direction to vertical by setting new values for x2 and y2. You can see in the resulting graphic that the gradient is the same blue to green transition, but now it runs vertically instead of horizontally. The next two attributes are new, but again they should look familiar. Markers had markerUnits and patterns had patternUnits to allow the marker or pattern to scale or not to scale. Guess what attribute gradients have and guess what it does. The gradientUnits attribute takes two familiar values, userSpaceOnUse and objectBoundingBox, which determine whether the gradient scales with the element that references it or not. It determines the scale of x1, y1, x2, y2. userSpaceOnUse — x1, y1, x2, y2 represent coordinates in the current user coordinate system. In other words the values in the gradient are absolute values. objectBoundingBox — x1, y1, x2, y2 represent coordinates in a system established by the bounding box of the element to which the gradient is applied. In other words the gradient scales with the element it's applied to. The elements we've encountered through this series can be transformed and gradients are no different. The gradientTransform attribute allows you to add transforms like rotate() and transition() to any gradient. Here I added a gradientTransform to the second gradient from the previous example and rotated it –50 degrees. 1 <linearGradient id="gradient2" x1="0" y1="0" x2="0" y2="1" xlink:href="#gradient1" gradientTransform="rotate(-50)" /> The rotation is harder to see with gradients than with patterns, but hopefully you can tell the gradient here as been rotated. If not, compare it to the previous result and you should see the difference. That brings us to the last of the <linearGradient> attributes, spreadMethod, which is entirely new. The spreadMethod attributes takes one of three values pad, reflect, or repeat. It defines how the gradient is spread out over the element when the start and end color stops are inside the shape instead of at 0% and 100%. pad — (default) uses the start and stop colors of the gradient to fill the remainder of the region. For example, if the first stop is at 20%, the region from 0% to 20% will be filled with the same color. reflect — reflects the gradient pattern from start-to-end then end-to-start then start-to-end, continuously until the region is filled. repeat — repeats the gradient pattern from start-to-end continuously until the region is filled. All three are easier to understand with an example. Here's an example of a horizontal gradient with the spreadMethod attribute added. Since the color stops need to be inside the rectangle before spreadMethod has any effect, I changed the value of x1 to 40% and the value of x2 to 60%. 1 2 3 4 5 6 7 8 9 10 <svg width="660" height="220"> <defs> <linearGradient id="linear" x1="40%" y1="0%" x2="60%" y2="0%" spreadMethod="pad"> <stop offset="0%" stop-color="#05a"/> <stop offset="100%" stop-color="#0a5"/> </linearGradient> </defs> <rect x="10" y="10" width="600" height="200" fill="url(#linear)" /> </svg> This first result uses a spreadMethod of pad and it looks similar to the original example with color stops at 0% and 100%. There's a little more full color and a little less transition in the middle, but otherwise it's similar. Note: Unfortunately there are browser issues with the reflect and repeat values of spreadMethod. Neither works in Safari, though they should work in other browsers. I'm including screenshots of the results (from Firefox) so you can see what the results should look like even if the code doesn't work in your browser. Here's the same gradient with the spreadMethod set to reflect. The gradient transitions back and forth between blue and green. At 40% the color is the blue set on the first color stop and at 60% it's the green set on the second color stop. SVG Screenshot The reflection leads to a gradient transition back and forth between the two color stops. It almost looks like it comes into focus at the point where a solid color is displayed and falls out of focus somewhere in the transition. Here's the gradient one more time with the spreadMethod set to repeat. It starts the same way by transitioning from blue to green, but at the exact point where it previously reversed itself and transitioned back to blue, it now abruptly changes to blue and transitions back to green. SVG Screenshot The pattern then continues with another abrupt change to blue and transition to green and it continues until 100% of the rectangle is filled. If you compare this example to the previous one, you'll notice the fill is still entirely blue and green at the color stops of 40% and 60% respectively. Closing Thoughts Like patterns, markers, and symbols, gradients are defined in one location and then referenced and used as the fill or stroke on another SVG element. Inside each <linearGradient> you include color stops with the <stop> element and attributes on both the gradient and the color stops provide options for you to get creative with your linear gradients. Using the xlink:href attribute you can have one gradient inherit from another, making it easy, for example, to define color stops on one gradient and change the direction of the transition on another. SVG allows for radial gradients as well as linear gradients and that's where I'll pick things up next week. If you understand how to work with linear gradients, radial gradients should be pretty easy to understand and work with as well. Download a free sample from my book Design Fundamentals. The post How To Apply SVG Linear Gradients To A Fill Or Stroke appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

Cycles of Inspiration — How To Regain Passion For Your Work - Vanseo Design

---

Cycles of Inspiration — How To Regain Passion For Your Work Posted: 21 May 2015 05:30 AM PDT What do you do when the passion for your work isn't there? What do you do when you don't like working on any of your ideas? When designing a website or writing an article is drudgery and the last thing in the world you want to do? Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes Recently I was listening to David Smith's Developing Perspective podcast. If you don't know David Smith, he's an iOS developer. While I'm not an iOS developer, I find David has good insights into design and development as well as what it's like to work for yourself. More than a few of his thoughts have inspired content here over the years. In this particular episode, David explained why he hadn't recorded in about a month and how he's lost passion for Developing Perspective. He talked about the ups and downs of recording regularly and how he's been through it before. This time it sounds like David is going to end the podcast and move on to something else he feels more passionate about. I think his plan is to wind down Developing Perspective and perhaps start a new podcast. Regardless of his decision, David offered some thoughts about what you can do when you're in a down cycle to keep you moving forward and regain the passion for what you were doing. Since I have some experience with the ups and downs of creating I thought I would offer some thoughts as well. Waning Passion I'm pretty sure this happens with just about anything you feel passion about. I know it's happened to me with both writing and design. It's easier for me to talk about in terms of writing (specifically for this site) as I've been writing regularly and consistently for years and have experienced the ups and downs more often with writing than design. While I may approach the topic from the perspective of writing I'll offer some design and development examples and know that most everything I say here applies beyond writing or design or development. I think you can apply what's here to life in general and anything that inspires you. Sometimes everything you create and produce feels good. You're in a flow of sorts that can last for days, weeks, even months. You feel good about the process of creating and the result of the process. You feel confident others will like what you've written or designed. Then there are times when you don't like your ideas and can't turn any into something worthwhile. Every part of the process is a struggle and no matter how much work you do and how much effort you give, you aren't happy with the finished product. These are the up and down cycles. The first time you're in a down cycle you might you're think your done. You feel you no longer have anything to say or contribute and it's time to find something else to do. If you stick with it longer though, you'll find it's a natural pattern that everyone goes through. You'll experience the ups and you'll experience the downs at various levels of intensity. Some days are better than others. Some days are worse. The good or the bad can last weeks or longer. Hopefully the up cycles last longer than the down cycles, but you'll experience both. The downs can be hard to deal with at any point whether you're experiencing them for the first time or the hundredth time. What can you do to get out of the down cycle and back into an up cycle? While listening to David's podcast I listed the things I do when the passion for my work is below it's usual levels. Later when seeing them all together, I realized they fall into three general groups. I wait it out. I fill myself with new possibilities. I work differently, shake up routines, and break out of comfort zones. Wait it Out Once you've been through the up and down cycle a few times you know that each gives way to the other if you let it. If you simply wait it out you'll likely feel the passion again. Wait and in time the down cycle will go away and be replaced with an up cycle. Keep Working If you keep working, the work might be a grind, but you'll make it through. It's work and you're a professional. Suck it up and keep working. Before you realize it your passion will come back. It's hard to know how long it will take, but much more often than not it won't take long. While you're grinding through, you probably won't feel great about some of the things you create, but the odds are the work is better than you think and only you notice any difference. I know I've written plenty here that I didn't think was my best work. I hesitated to publish and people responded as though it was the most important thing I've ever written. There are also times I thought something I published would make an impact and no one seemed to care. When you're in a down cycle your perspective usually isn't great and you become less of a judge of your own work. You likely think it's worse than it really is. If you regularly put effort into your process, you can generally trust that what comes out the other side will be more than good enough. It's one reason I talk about writing or design as a process. Put in the effort and the work created through your process will be above your minimum standard of quality regardless of whether or not you think it's good. I go through this all the time. Some weeks I don't feel good about the things I'm working on. However, I've learned if I'm not feeling inspired one week, I likely will be the next. Most of the times that I feel a loss of inspiration for my work I push through it. More often than not the inspiration comes back quickly. Take Some Time Away Sometimes that's not enough. It's possible the loss of passion is an indicator of something more and it's a sign you need to take some time away. A few years ago I wasn't happy with anything I was writing here. I couldn't think of new ideas I wanted to write about and when I did, I realized I didn't have anything to say about the topic. For a time I kept plugging along as best as I could, but I knew something wasn't working. I took some time away from the blog. It was hard at first, but then I found a good excuse to skip a post, which made it easier to skip another and then another. It was eight or nine months before I was publishing regularly again. The time away enabled me to look at the blog with a fresher perspective and without the pressure of having to produce anything for the site. It gave me time to think about why I wasn't happy with the work. I realized I wasn't interested in my blog as it was. I asked myself if I would read my content if I didn't write it? The answer was no, I wouldn't. At the time I was writing more about marketing and search engines, with an occasional post about design and development. The marketing posts were quicker and easier for me to write, but for the most part they weren't good. The realization led me to think about what I wanted to read and that's what I decided to turn this site into. Now I write more about design and development, which is what I initially wanted to do when I started. I didn't because I was afraid I couldn't do what I wanted to my standard of quality. I thought I lacked the experience and the knowledge and I know I lacked the confidence at the time. I felt mostly the same during my time away, however I decided to go ahead and do what I wanted. I trusted that I'd figure it out. and I haven't looked back since. Now the content here is something I'd want to read. It doesn't mean I'm never low on passion for it, but not to the extent when I took the time away. There is some danger in taking so much time away. It's very easy never to come back, though I suspect if you don't return, it's because you didn't have the passion to begin with or maybe it was a temporary passion and you've gotten what you wanted from it. You're ready to move on to something else. If you're somewhere in between the extremes of pushing through for a few days and needing some serious time away, there are things you can do. Fill Yourself with New Possibilities This usually works well for me. If I fill my head with new possibilities it almost always renews my passion quickly. With the general category of filling myself with new possibilities I do a handful of things. Take in more information Learn something new Learn a different, but related topic Practice with exercise Take inspiration from another Take in More Information I'm sure you know the expression garbage in, garbage out (GIGO). You have to feed your creative process and take in new information constantly. This is particularly true where technology is concerned and the pace of change is sometimes overwhelming. What was true a couple of years ago may not be true today. You have to take in quality information if you want to produce quality information. More input should lead to more output that you can shape into something better. Reading is my preferred way to take in new information, but I also listen to podcasts and watch videos. I also do my best to pay attention and observe what's going on around me. Mostly I read a lot of RSS feeds. There's not a lot of pressure to read or generally take in information. For me reading leads to inspiration and as I take in more information it usually generates new ideas I feel inspired to work on. Learn Something New Sometimes you need to be more purposeful in what you take in. Learn something new that you want to learn. When I start to learn a new subject my thoughts tend toward the possibilities. I don't yet know the subject well enough to understand the difficulties and limitations so my mind races with the possibilities. The possibilities inspire me. I think it's because I'm too dumb in the beginning to see why something can't be done and I focus on what might be done. With writing I might pick up a book on the craft of writing or on a subtopic of writing. With design I might spend time learning more about color or type. With development I might read through a CSS spec or I might learn some new technique for developing a form or a navigation bar. Learn a Different, but Related Topic What you learn doesn't have to be directly related to the work you do. You could learn something indirectly related. For example design, writing, development, photography, painting, and music are all are a combination of general creativity with specific craft. They're different forms of creativity. If your particular craft isn't inspiring you, try another that's also creative. Again there's something in the newness. The craft you take up is might be new to you so you can see it with beginner eyes. You can apply what you know about creativity so you aren't an absolute beginner, but you will be new to the specific craft. You'll learn about creativity from a new perspective by learning and practicing a new craft. You're being creative under a different set of constraints. The different perspective often brings back new and different inspiration. Practice with Exercise You might also accept that the passion isn't there for the moment. You aren't worried because you know it'll come back, but the work isn't going well. You can spend more time doing things that will help you be better in the future when your passion is back. You can practice with exercises directed toward learning and getting better. You might not feel passionate about doing the exercises, but they will help you get better. Working the exercises keeps your hands busy, which helps you grind through the down cycle. This is about practicing what you already do. The inspiration isn't there and you aren't producing, but you can still use your time productively. Stay connected to your work and improve your skills. Keep your hands busy. Inspiration tends to come after you start working and not before. Take Inspiration from Another If your own work isn't helping, take inspiration from another. Read an author you like or look through the portfolio of a designer you admire. Find something you like online, view the source code, and figure out how it was built. Let the work of those you admire inspire you with their work. You can copy their techniques and ideas, not for real work and projects, but for your own practice. Learn from those you admire. In your effort to copy you'll no doubt add something of your own to the finished product. You'll probably find you can produce what they produced and it'll improve your confidence. The danger here is feeling you aren't good enough because you're making an unfair comparison with someone you admire. You need to have some confidence in yourself to do this. If lacking confidence is part of why you're lacking passion, this may not be the best way to get the passion or confidence back. Assuming you have enough confidence in your abilities, you might find that enjoying and studying the work of those you admire helps restore your passion. It does mine at times. I see what someone else has done to push writing or design or whatever forward and it tends to make me want to do similar. I let someone else's success inspire me to have success for myself. Work Differently This last group is about working differently, shaking up your routines, and breaking out of comfort zones. For me a few things work well. Dive into a new project. Challenge yourself with constraints. Work in a different medium. Do the same old thing in a new way. Dive into a New Project Sometimes when one project isn't inspiring I find another one will get my creative juices flowing again. There's newness in the project and having something to do keeps me busy. I may not have the time to think about my lack of passion because I have to keep working. In a sense I'm waiting by distracting myself from the actual waiting. Obviously you can't always drop a project, but with something like writing an article here I might drop the specific article I'm working on and start on another idea. I'll leave the first article for another time or for never again. It might have been the specific article causing the problem and not something in general. You can't always drop one project in favor of another, but where you can it can help restore your passion. Challenge Yourself with Constraints You can challenge yourself with constraints. On your next writing project set a work count far less or far more than what you usually write. Write about a topic you know nothing about and research it. Write about a personal topic if you usually avoid the personal. Pick a common word or phrase and refuse to use it for one article or post. Choose the constraint first and then write. If you design restrict yourself from using certain colors or typefaces. If you develop force yourself to build a common component in a different way. Do you normally use floats to develop a navigation bar? Develop one using inline-blocks, CSS tables, or flexbox. You have to choose something that's still a good solution to the problem, of course, but there are usually multiple solutions that are equally effective. Pick one you don't normally choose. The challenge will get you to stop focusing on your loss of passion and have you diving into new work to solve a new problem. The challenge should be inspiring. If you're a designer or developer or writer, you solve problems. You should generally be inspired by solving new problems and overcoming new challenges. Work in a Different Medium Similar to learning a different creative outlet, you can work in a different medium. I suppose this is also a specific kind of constraint. If you write, try recording audio or video to express your idea. Create a slideshow presentation or interactive demo. A specific constraint that can work well to inspire you again. If you're a web designer try your hand designing a logo or brochure or business card for print. If you're a print designer work with a material you don't usually work with. You still have to faithfully serve the project. You can't do something different just to be different, but you can usually find something different that still serves the project. You are creative, right? Do the Same Old Thing in a New Way Along these same lines, but a little more general, do the same old things in different ways. For example if you work in an office take a different route. Go to sleep or wake up at a different time. Do you work for yourself? Try working at different times or in different rooms. Any routine is free game. Shake things up. Do the usual differently. The change can be a good way to get you out of a rut and back to feeling more passionate about whatever you do. Your routines likely get too mechanical after a time. They'll become something you do unconsciously. Shake things up so you have to do them consciously again. Closing Thoughts Your passion for your work, for your life, for anything, will go through cycles. Sometimes everything is great and you're in a flow whenever you work. You like what you produce and how you produced it. Sometimes you feel the opposite. You don't like what you're working on and you don't like what you produce. Understand it's a cycle. You're likely going to go through these ups and downs many, many times in your career and your life. You can wait it out. Push through the lack of passion. Just keep at it and be professional. Trust that the passion will come back. It usually does if you give it time. Take some time away if you have to. Sometimes you do need to get away from things for awhile to come back to them fresh and renewed. Be aware of the danger of not coming back, though. You can fill yourself with new possibilities. I usually do this by reading and learning something new. For me reading a book about a topic is typically enough to regain my passion. Generally you want to find a way to see what you do with fresh eyes and a different perspective. We tend to be more passionate at the beginning when things are new. We tend to be more optimistic at the start. Think any relationship you've ever been in. The new brings passion. You can regain passion by doing things differently. Different forces you to work with beginner eyes. You're focused on the new and don't have time to worry about your lost passion. You distract yourself with whatever you're doing and forget about the lack of passion while your hands are busy working away. Shake things up. Break out of routines. Leave your comfort zone. Change, challenge yourself, and explore new things or the same old things in new ways. I have one last thought to leave you with. I've found that inspiration and passion for your work doesn't strike unless you've set up the conditions for them to strike. This requires you to be working at something. Inspiration doesn't lead to to work. The work comes first. The work leads to inspiration. Keep doing something. Keep your hands busy and the passion will come back. If it doesn't it's possible you aren't doing the right thing, which is good to know sooner rather than later. Assuming you are doing the right thing, know that your passion will come back if you keep working and let it come back. Download a free sample from my book Design Fundamentals. The post Cycles of Inspiration — How To Regain Passion For Your Work appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

SVG Patterns — Build More Complex Patterns With Images, Attributes, And Nesting - Vanseo Design

---

SVG Patterns — Build More Complex Patterns With Images, Attributes, And Nesting Posted: 18 May 2015 05:30 AM PDT Patterns for web design elements are usually created with images. While some patterns can be created using CSS alone, most involve images of some kind. Fortunately SVG makes it easy to create simple and more complex patterns that can scale with your design and likely require fewer http requests. Last week I began a look at the SVG <pattern> element. I walked you through an example and showed you how to create and work with simple patterns. We looked at pattern basics including some of the attributes of the <pattern> element. Today I want to continue and talk about a few more pattern attributes, one of which will help us build up more complex patterns by referencing one pattern inside another. First a quick review to show you something I skipped last week. Using an Image as the Pattern In all of the examples last week I used SVG shapes to create the pattern. I did, however, mention that you could also use images to create the pattern. To show you how to use an image as an SVG pattern I created this one in Pixelmator. It's 50px wide, 50px high, and you can see it's a couple of green squares that will form a checkerboard pattern. Here's how we can use it as a pattern. 1 2 3 4 5 6 7 8 9 <svg width="660" height="220"> <defs> <pattern id="pattern-image" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"> <image xlink:href="images/pattern-50.png" x="0" y="0" width="50" height="50"></image> </pattern> </defs> <rect x="2" y="2" width="600" height="200" stroke="#630" stroke-width="5" fill="url(#pattern-image)" /> </svg> Here I used an <image> element and through its xlink:href attribute I referenced the image I created. The path to the image was the local path to the file while I was working on this post. I changed it to the path on the server and you'll likewise have to adjust the path to wherever you store the image. Here's the resulting SVG, which you can see is the image repeated both horizontally and vertically to fill the rectangle. Now let's look at the different attributes you can add to the <pattern> element. Attributes of the <pattern> Element I covered about half of the <pattern> attributes last week, but there are more. First here are the five we've covered so far. x — where the pattern starts in x-direction y — where the pattern starts in y-direction width — the x-distance to start the next occurrence of pattern height — the y-distance to start the next occurrence of pattern patternUnits — defines the coordinate system for the pattern and whether or not the pattern scales with the SVG object that references it. Since I covered these in more depth last week, I'll refer you to that post if you need more details about any of these attributes and continue with the ones I didn't cover last week here. Some of the remaining attributes may be familiar as we've seen them before when talking about other reusable SVG elements. First every pattern can have a viewBox as well the preserveAspectRatio attribute. The latter defaults to xMidyMid. Both work the same as they do on other elements and I'll direct you to more detailed posts about the viewBox and preserveAspectRatio if you want the details. The <patternContentUnits> attribute Similar to patternUnits is patternContentUnits and it takes the same two values, userSpaceOnUse and objectBoundingBox. The patternContentUnits attribute defines the coordinate system for the content of the pattern and not the pattern itself. userSpaceOnUse — (default) doesn't scale objectBoundingBox — scales Up until now patternContentUnits has always been equal to userSpaceOnUse as I haven't set it otherwise. Here's an example where I set patternContentUnits to objectBoundingBox instead. 1 2 3 4 5 6 7 8 9 <svg width="660" height="220"> <defs> <pattern id="pattern-2" x="0" y="0" width="0.25" height="0.25" patternContentUnits="objectBoundingBox"> <circle cx=".125" cy=".125" r="0.125" stroke="none" fill="#393" /> </pattern> </defs> <rect x="10" y="10" width="600" height="200" stroke="#630" stroke-width="5px" fill="url(#pattern-2)" /> </svg> The code looks similar, but because the content scales, you need to reduce the coordinates and the radius of the circle below 1.0. Here I used 0.125, which means the width and height of the circle will be 0.25 units. Setting both width and height of the pattern to the same 0.25 or 25% ensures that the pattern will repeat by placing the next circle adjacent to the previous one. Here's the result. Notice that the circles are no longer circles, but elongated ovals instead. Because the circle, defined by a single radius, is allowed to scale inside a rectangle with different x and y dimensions, the circle will distort in one direction unless the x and y of the rectangle are the same. The xlink:href and patternTransform attributes Another attribute that should be familiar if you've been following along with this series is the xlink:href attribute. You can use it to reference other patterns in the SVG document. You can also transform patterns with the patternTransform attribute. Let's look at an example using both xlink:href and patternTransform. Here I created two patterns. The first (id="pattern") is the same pattern of green circles we used last week and in the previous example here. The second pattern (id="pattern-transformed") refers to the first pattern through it's xlink:href attribute. It inherits everything defined on the first pattern. I added a 10 degree rotation to it through the patternTransform attribute as well. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <svg width="660" height="480"> <defs> <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" stroke="none" fill="#393" /> </pattern> </defs> <defs> <pattern id="pattern-transformed" xlink:href="#pattern" patternTransform="rotate(10)"> </pattern> </defs> <rect x="10" y="10" width="600" height="200" stroke="#630" stroke-width="5px" fill="url(#pattern)" /> <rect x="10" y="250" width="600" height="200" stroke="#630" stroke-width="5px" fill="url(#pattern-transformed)" /> </svg> Each pattern is referenced by a different rectangle and here's the resulting SVG graphic showing both of them. You can see that even though the graphic element was defined only for the first pattern, the second pattern inherited everything from it and added a transform. It's a nice way to set up variations of the same pattern. Nested Patterns You can also nest patterns by referencing one inside another. Here I created two patterns, an inner pattern and and outer pattern. The inner pattern is a series of repeating green squares and the outer pattern is a series of repeating circles with a dark red stroke and the inner pattern as a fill. 1 2 3 4 5 6 7 8 9 10 11 12 13 <svg width="660" height="220"> <defs> <pattern id="pattern-inner" x="2" y="2" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="4" height="4" stroke="none" fill="#6a6" /> </pattern> <pattern id="pattern-outer" x="13" y="13" width="50" height="50" patternUnits="userSpaceOnUse"> <circle cx="22" cy="22" r="20" stroke="#900" stroke-width="4px" fill="url(#inner-pattern)" /> </pattern> </defs> <rect x="10" y="10" width="600" height="200" stroke="#630" fill="url(#outer-pattern)" /> </svg> Here's the resulting SVG, which as you can see is a repeating pattern of circles (outer pattern) filled with a repeating pattern of squares (inner pattern). Here's the example again, this time without the stroke on the outer pattern. Hopefully this second example of nested patterns is giving you some ideas for creative ways to nest patterns. Closing Thoughts Patterns are another element you can add to your SVG toolbox for defining a graphic in one location and referencing and using it in another. If you've followed along with the other reusable elements in the series, patterns should be fairly easy to understand and use. While they're similar to other reusable SVG elements, patterns might be more fun to work with as you add them to elements and see the results. Perhaps that's just me, though the ability to nest patterns can be used for some very creative results. Next week I want to continue with another element that's similar to a pattern and that you can add to the fill or stroke of graphic elements. I'll talk about how to create and work with gradients in SVG. Download a free sample from my book Design Fundamentals. The post SVG Patterns — Build More Complex Patterns With Images, Attributes, And Nesting appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States