DesignM.agGraphic Design http://designm.ag Articles and Resources for Web Designers Mon, 15 Sep 2014 12:35:53 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 5 Tips for Beating the Cycle of Perfectionism http://designm.ag/graphic-design/5-tips-for-beating-the-cycle-of-perfectionism/ http://designm.ag/graphic-design/5-tips-for-beating-the-cycle-of-perfectionism/#comments Tue, 09 Sep 2014 14:57:25 +0000 http://designm.ag/?p=118603

Advertise here with BSA


Have you ever met a designer or developer who wasn’t a perfectionist to some degree or another? It’s understandable that there are probably few of them, as the aim for perfection often differentiates the good designs from the great ones. Making sure that every element is “just so” can keep designers up at night, toiling away. Being a perfectionist has its advantages. It can help you produce amazing works and dazzle clients. It can help you seal the deal with new customers. It can push you to new challenges and new creative heights. Of course, perfectionism also has its drawbacks. While it’s a good thing to be somewhat of a perfectionist, too much of anything can be bad for you. Striving for perfection means you value quality, but the stress and fear of failing can be paralyzing, reducing your productivity and arresting your creative flow. Perfectionism is a time steeler, as hours can fly by while you’re immersed in the task at hand without even stopping to take a break. You can also feel frustrated, anxious or sad when you can’t reach the satisfaction that comes with a job well done - because you’re never done! Spending too much time in “perfectionist mode” can lead to depression, burnout and even illness, any one of which can cause you to make mistakes. Your productivity can also drop and you could miss deadlines, as you spend too much time on one project before you move on to the next.

Advertise here with BSA

]]>

Advertise here with BSA


Have you ever met a designer or developer who wasn’t a perfectionist to some degree or another? It’s understandable that there are probably few of them, as the aim for perfection often differentiates the good designs from the great ones. Making sure that every element is “just so” can keep designers up at night, toiling away.

Being a perfectionist has its advantages. It can help you produce amazing works and dazzle clients. It can help you seal the deal with new customers. It can push you to new challenges and new creative heights.

Of course, perfectionism also has its drawbacks. While it’s a good thing to be somewhat of a perfectionist, too much of anything can be bad for you. Striving for perfection means you value quality, but the stress and fear of failing can be paralyzing, reducing your productivity and arresting your creative flow. Perfectionism is a time steeler, as hours can fly by while you’re immersed in the task at hand without even stopping to take a break. You can also feel frustrated, anxious or sad when you can’t reach the satisfaction that comes with a job well done – because you’re never done! Spending too much time in “perfectionist mode” can lead to depression, burnout and even illness, any one of which can cause you to make mistakes. Your productivity can also drop and you could miss deadlines, as you spend too much time on one project before you move on to the next.

Learning how to let go of a project can go a long way towards increasing productivity, creativity and job satisfaction. It can help free up your time to take on new work, while helping you to better accept feedback and criticism. Here are five tips to help you learn to let go of perfectionism so you can get on to the next project.

Admit it to yourself. Recognize that you’re a perfectionist and know that details are your weakness. As G.I. Joe used to say, “knowing is half the battle.” It’s easy to say now, but when you’re working on a project, it can be more difficult to tell that you’ve spent too much time on something. You start rationalizing, saying to yourself “Just 5 more minutes and I’ll be done.” Admitting it now, when you’re reading this instead of working on something, will help you to identify the issue later when your tummy rumbles after skipping lunch or you have bleary eyes from working until 2 A.M.

Step away from the project. Save your document, set aside the mouse and get away from your workstation. You are too close to your project and you need to take a step back to gain a new perspective, for at least a few hours if at all possible. Take a lunch break, sleep on it, run some errands – anything to get your mind away from the project at hand. If you’re on a tight deadline, take a short, brisk walk, get yourself a snack or chit chat with a coworker.  The point is to break up the thought pattern that is contributing to your minor (or major) obsession over your project.

Get a fresh mindset. Prepare your mind to reapproach your project with a new attitude. What should that attitude be? “My time is precious, I can’t waste more of it on this project that is basically complete.” If it helps, create a list of other projects you can’t start until you’ve completed this one. Seeing what is ahead of you could change your attitude quickly. If you can get a fresh perspective, you may find you’re feeling less critical of your work and better able to complete what is left. Even better, you may just realize that it’s truly finished and you can’t possibly look at it for another minute.

Avoid getting sucked in again. It can be tempting to fall right back in to working on your project. After all, making minor adjustments to something that is complete can be easier than trying to move on to the next project, knowing that when you do you’ll have to start from scratch.  If you already know that you’ve invested too much effort into the task at hand, don’t be afraid to cut yourself off. Let yourself imagine for a moment that your client or boss will love the work. Honestly, until you send it off to them for your approval, you will never know if they do.

Modify your behavior. If you get stuck obsessing on perfecting one project, odds are you’ve gotten stuck before and will get stuck again. If knowing about the problem is half the battle, trying to reduce its impact on your life is the other half. Simply acknowledging that you’re a perfectionist can go a long way towards helping you keep your perfectionism in check. In the future, try to recognize sooner when you’re spending too much time on a project. Try to take more breaks so you can step away and come back to the project with a new mindset. Try not to get lost in the tiny details that aren’t as important to your client as they are to you.

There’s nothing wrong with being a perfectionist; it probably makes you really good at your job. It’s only when your perfectionism starts interfering with your work/life balance or other design projects that you might need to adjust your working style. Keeping these tips in mind can assist you to work through it and help you to become more efficient on future projects. With greater efficiency and increased productivity, you may find further job satisfaction, happiness and new-found creativity to dazzle even more clients.


Advertise here with BSA

]]>
http://designm.ag/graphic-design/5-tips-for-beating-the-cycle-of-perfectionism/feed/ 0
Getting Started with Graphics Design for the Web http://designm.ag/graphic-design/getting-started-web-design-graphics/ http://designm.ag/graphic-design/getting-started-web-design-graphics/#comments Mon, 30 Jun 2014 15:19:52 +0000 http://designm.ag/?p=85262

Advertise here with BSA


Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

macbook imac desk designer photo

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.


Advertise here with BSA

]]>

Advertise here with BSA


Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

macbook imac desk designer photo

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.

Practice your Weaknesses

A lot of people hate to hear this advice, myself included, but it’s the absolute truth. Objectively speaking it’s the best and quickest method I’ve found to see rapid improvement. You need to understand what you can already do and what you can’t do. Focusing on a weakness will be awkward at first, but eventually you’ll hit a stride and the task becomes much more comfortable.

If you stay caged in a single process then you never really advance beyond that skillset. So you may know how to use a small segment of Photoshop/Illustrator but you can’t really create any type of graphic for the web. You should try to understand the shape tools and layer effects – and yeah the pen tool is a huge plus. Most designers are not comfortable with the pen tool so that’s a great place to start.

photoshop practice design screenshot

When you’re brand new almost everything could be considered a weakness, so any time spent designing is time spent practicing. I’ll go out on a limb and guess that nobody is paying you to practice so it’s okay to screw up. Once you accept this fact your hours of toil will seem less stressful. There is a final goal to achieve and it’s not perfection. You should work to become more enlightened about any subject that will help you create better graphics.

Keep this in mind when you start each practice session. Any subject that you consider a weakness will stay a weakness unless you can tackle it head-on. Better to learn while you’re still new rather than once you’ve landed a job or started doing freelance work.

Study Great Websites

If you have a lot of weaknesses and don’t know exactly where to start I’d recommended keeping a list of brilliant website graphics. Save bookmarks to anything that catches your eye from a menu bar to a footer or anything in-between. This will give you a nice visual library of design ideas that could be practiced.

Often times you’ll stumble onto a beautiful graphic or effect that you wish to recreate, but have no idea how to do so. Hit Google first with some keywords and see what comes up. You may be surprised at how many similar tutorials can help you recreate the effect. Otherwise I’d recommend the Graphic Design Stack Exchange forum where you can post up detailed questions and typically get some helpful responses.

This graphic design Q&A forum will be more helpful as you learn the basics and keep practicing. The designers on Stack Exchange are quite knowledgeable but prefer to answer more specific questions rather than vague “help me design this” requests.

Retina Displays

Keep in mind that modern web graphics have changed a lot over the past 5 or 10 years. Retina displays were never a thing before Apple created the iPhone 4. Then some Android devices started following with HiDPI resolutions and now even MacBooks are using this display. Retina screens fit double the amount of pixels into the same physical space.

This means your icons and graphics will look the same size, but require more pixels to appear “crisp” on retina screens. So if you’re creating a 50×50 icon it will always be 50×50 pixels on the website. But retina screens need 100×100 pixels to make that same 50×50 icon, otherwise it looks blurry and stretched out.

apple retina display macbook iphone ipad

As you continue practicing get into the habit of designing @2x sizes whenever possible. It’s usually easier to scale down rather than scale up with pixel graphics. But even if you don’t create 2 sets of graphics it might be better to use a double-sized icon fitted into a 50×50 square rather than a smaller icon forced to appear larger.

You can find many blog posts discussing this trend and how you might design for retina screens. It’s obviously possible to design @1x first and scale up if you have the ability to use vector shapes. Scaling down requires elements that use even-numbered dimensions because odd numbers will get split in half on a subpixel. Try both and see what you like best. Just keep in mind that retina is likely here to stay so it’s worth creating both sets of graphics.

SVG Icon Design

Another modern trend worth mentioning is the popularity of SVG icons. These are Scalable Vector Graphics which behave much like a vector in Photoshop or Illustrator. Except now you can embed these into a website and have them respond to the layout size. Pretty neat huh?

Older browsers still do not fully support SVGs and unfortunately not everyone is running an updated browser. But since you can also animate SVGs they bring a lot to the table. It’s not something that you need to learn in order to design website graphics. Just keep in mind it is an option and it’s a fun graphic style to learn whenever you have some extra time.

Starter Tutorials

The quickest way to improve your skillset is to start with a few online tutorials. Designers frequently publish free tutorials which relate to web design, icons, banners, logos, and many similar topics. If you already have access to Adobe Photoshop or Illustrator then you’ve got everything you need.

Although there are hundreds of amazing tutorials out there, I’ve put together this brief collection which is perfect for new designers who want to build graphics for the web. All you need to do is follow along and really try to retain the information. If you keep up with lots of tutorials then you’ll eventually find yourself getting more comfortable designing graphics from scratch.

Address Book Icon

leather texture address book icon photoshop

Banner, Label & Badge Templates

photoshop howto banner label badge design template

Green Web Badge

illustrator graphic tutorial green web badge design

Animated Banner Ad

photoshop animated banner advertisement graphic

Simple Notebook Icon

simple vector notepad icon design tutorial

Gearbox Settings Icon

gear ios settings icon design photoshop tutorial

Dark Web Button

beautiful dark web button glossy tutorial

Manipulating SVG Icons

animate manipulate svg icons css howto

“Almost Flat” Icons

vector icons iconset design tutorial illustrator

Creating Buttons for the Web

tutorial photoshop creating website buttons part1


Advertise here with BSA

]]>
http://designm.ag/graphic-design/getting-started-web-design-graphics/feed/ 0
50 Free CSS-Only Icons for Website Graphics http://designm.ag/graphic-design/50-css-only-icon-graphics/ http://designm.ag/graphic-design/50-css-only-icon-graphics/#comments Thu, 22 May 2014 16:22:11 +0000 http://designm.ag/?p=84587

Advertise here with BSA


Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn't have much practical use but it's definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source


Advertise here with BSA

]]>

Advertise here with BSA


Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn’t have much practical use but it’s definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source

Pure CSS Cloud

pure css cloud icon design

Map Marker Icon

css animated map marker pure css design

Tech Devices

iphone ipad macbook computer device icons

Animated Compass

animated compass icon design css open source

Full NES Console

nintendo entertainment system css icon open source

Pure CSS MacBook

pure css icon macbook computer laptop

Tweetbot Icon

ios7 tweetbot app icon design css

Computing Devices

computer laptop monitor device icons css

Hanging Picture Frames

hanging picture frame icons css

Animated Trash Icon

css only animated trash can icon

Mail Icon

blue mail envelope icon css only

Hamburger Menu Icon

pure css menu icon hamburger design

Pure CSS Ribbon

pure css ribbon open source code

Google Browser Icons

icons browser google chrome chromium canary

Opera Logo Icon

red opera logo design icon vector css

CSS Microphone

css mic microphone icon open source

Pure-CSS Owl

pure css owl icon design website ui

Animated Clock

animated clock interface ui css open source

Taj Mahal

pure css open source taj mahal icon

Squirrel

squirrel css pure open source icon animal

Pure CSS3 Arrows

pure css3 arrow icons animated open source

Google Logos

flat google icons youtube drive gmail css

Santa Icon

pure css flat santa icon open source

Peeling Sticky

pure css sticky peel effect animation icon

CSS3-Only Animals

css3 animal vector icons open source

Minions in Pure CSS

open source css minions icons

RSS Feed Icon

pure css icon design rss feed icon

Credit Card

css open source credit card icon

Flat Camera

flat camera icon css open source

CSS3 Calendar

css3 calendar open source icon code

Burger App Icon

burger app icon flat css open source

Currency Icon

currency icon pure css open source

Flat Gift Icon

flat gift icon open source freebie

WordPress Icon

open source wordpress css icon responsive

Passcode Locks

passcode icon animated effect css3

Stewie Griffin

stewie griffin icon pure css

Eric Cartman

eric cartman open source css icon

Pure CSS Folders

pure css folders open source code icon

Google Voice Search

google voice search icon design animated

Envelope Transition

envelope letter css icon transition effect

iOS7 Icons

ios7 icons css pure open source

iOS6 Camera Icon

ios6 camera icon open source css code

Animated Printer

animated printer icon pure css open source

CSS3 Preloader

css3 preloader open source icon animated

Color Picker

pure animated css color picker icon

Checklist Icon

pure css open source checklist icon

CSS Smileys

smiley open source icon css code

Apple Mice

icons apple computer mice css only code

CSS Circle Logo

pure blue css circle logo open source


Advertise here with BSA

]]>
http://designm.ag/graphic-design/50-css-only-icon-graphics/feed/ 0
Inky Deals Massive Design Library & 630 Premium Vector Illustrations worth $8,228 – Just $59 (sponsored) http://designm.ag/resources/inky-deals-massive-design-library-630-premium-vector-illustrations-worth-8228-just-59/ http://designm.ag/resources/inky-deals-massive-design-library-630-premium-vector-illustrations-worth-8228-just-59/#comments Thu, 27 Feb 2014 05:54:47 +0000 http://designm.ag/?p=83280

Advertise here with BSA


About Inky Deals

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work. They’re the only ones who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

Testimonials

testimonials

Advertise here with BSA

]]>

Advertise here with BSA


About Inky Deals

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work. They’re the only ones who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

Testimonials

testimonials

DesignTNT Massive Library & 630 Premium Vector Illustrations worth $8,228 – Just $59

Inky Deals has recently launched this premium bundle packed with thousands of resources valued at $8,228, which you can now get at the small price of $59. It’s the perfect deal for both graphic and web designers looking to save precious hours (and thousands of dollars), but without sacrificing the quality of their works.

preview-600x408

You will get:

- 630 Vector Illustrations worth $2,520

- 233 Vector Sets worth $2,290

- 101 Web & Print Resources Packs worth $1,070

- 109 Photoshop & Illustrator Addons worth $1,036

- 69 High-Resolution Texture Packs worth $729

- 67 Brushes Sets worth $486

- 10 Premium Tutorials worth $97

30% Off All Deals

spring-madness-bara

Check out the original deal page of the DesignTNT Massive Library & 630 Premium Vector Illustrations worth $8,228 – Just $59 and take advantage of their latest promotion: a discount coupon which takes an extra 30% off all deals. Use this coupon code: SPRINGMADNESS during checkout until February 28th!


Advertise here with BSA

]]>
http://designm.ag/resources/inky-deals-massive-design-library-630-premium-vector-illustrations-worth-8228-just-59/feed/ 0