Archive for the ‘Web Design’ Category

May 4th, 2013

Six Secrets of Web Design Freelancers!

Web designers are a particular (and often seen as a peculiar) breed of human being. It takes something special to work effectively in this field, that's for sure. But even more so to be a freelancer in the web design field. That's an entirely different subspecies altogether. For anyone who has ever tried their hand at freelancing, they know this to be the case. It is not for everyone. But it can be.

Like with most things, being a freelancer can be learned. This beast can be somewhat tamed to work for those who have perhaps failed at it in the past.

Perhaps the reason you have been unable to take that step, or that you were unable to make a go of it when you did, was because you weren't privy to some of the secrets. Less tricks of the trade, and more ways to make this lifestyle fit more comfortably.

Six Secrets of Web Design Freelancers!
Image credit: Bigstockphotos

What this Post Isn't

If you have come to this post expecting to find the secret to banking the big bucks as a freelancer and retiring at the age of 25, then I am afraid you have come to the wrong place. This post is not going to be any sort of automatic recipe for successful freelancing. Because such a recipe does not exist.

Sorry if I burst any bubbles with that statement, but freelancing is not some sort of magical field where millionaires are made around every corner. It's a field of long days and waiting games.

This post is also not going to spell out how you can become a rockstar in the field and suddenly be designing the site for the next Avenger's film.

Becoming a rockstar is up to you. You have to have the passion and talent to shape the game in that manner as you work in the web. It is more about giving you the stepping stones you will need to have in place if you are going to rise to that level, sure. But knowing the path, and being able to see it through are two completely different things.

So below you will find six secrets that all successful, and sustained, freelancers know and work by. Day in and day out.

#1 – Community Connection is Key

First and foremost, if you are hoping to be a successful web design freelancer, then you have to understand that the community connection is key. Web design freelancers know the benefit of the online community and how being connected to said community is beneficial to them and their brands. So they engage. They become an active part of the community and contribute. This is not only good for growing your business through referrals by others whom you have connected with, but it allows you to grow as a web designer too.

Community Connection is Key
Image credit: Bigstockphotos

Being an active part of the community keeps you up to date and plugged in to the latest developments in the field without having to make any sort of costly investments. While it might be a fantastic thing to do for your business, you might not always have the openings in your schedule or the funds available to attend every web design conference that is held. But the community will respond and actively share what was learned and discussed at these conferences. So you have the learning potential.

And just like with any community you are a part of, they can offer useful advice and reviews of products or services that you are considering, but haven't the means to risk spending funds on them that might just end up being wasted. Like if you are trying to find a good, reliable host, you are going to trust what those who have used them have to say about their service. Same applies elsewhere in the web design community.

So there are many ways that being part of online web design community is beneficial to freelancers. We are not always backed by big corporate budgets that we can play somewhat loosely and riskily with. So we have to do a little more research and planning before we spend. Nor do we have the budgets to continue educating ourselves in the field without tapping our free community knowledge pool from time-to-time to assist us. So the community can be and often is a freelancer's savior.

#2 – Rome Wasn't Built in a Day

…and neither will your projects be. This is not something that applies strictly to web design freelancers, and we know this. But it is something that many of us forget when we start diving in and taking on projects. We forget to pace ourselves and allow for said pacing when we set up a timeline with the client. There are not enough hours in the day, we hear this all the time, so we have to learn to effectively manage them. We must also learn how to balance the work hours and the non-work hours to keep us refreshed and productive.

Rome Wasn't Built in a Day
Image credit: Bigstockphotos

This is an area where a lot of freelancers fall down and lose themselves. They let the work completely consume them and their schedules until they are consistently putting in 16 hour days, and not giving themselves any time to decompress and unwind. To have their mind unplugged from their projects and offering their creative energies a chance to recharge. This can spell disaster for anyone, but for a freelancer, it could be the end of our very brands.

Once we lose the confidence of our clients because we have been unable to deliver on their expectations and our promises, we begin to lose the credibility we as freelancers rely on to keep clients coming in. So we need to be sure that we are managing our time effectively, but also responsibly. An overwhelmed and overworked web designer is good to no one. If our creativity is faltering, then so too is our freelance business.

#3 – Inspiration is a Hydra

Freelance web designers also understand that inspiration is a hydra. It is like that mythic beast of legend in a couple of ways. And treating it as such, is a game changer that can really take your work to the proverbial next level we all should be striving for. Now this is not saying inspiration is a deadly beast to be feared, but more that is has many heads. You cannot get your inspiration from just a single source.

Inspiration is a Hydra
Image credit: Bigstockphotos

Doing so is a recipe for stagnating and having your creative drive and output slow. We need to be influenced by other fields and inspired by other formats in order to be taking our work to exciting new places. It is simply not enough to find our inspiration from the wealth of web design offerings that are out there and filling the portfolios and collections of works. We have to reach outside of our own field to find new ways to approach our work within it.

Also, just like with a hydra, cutting off one head (or excluding one source of inspiration) simply means replacing it with another. The more perspectives we allow to shape and ourselves to hone our creative voices through, often the more potent it will prove to be. Our creative experiences will be that much deeper and richer, and so too will be that which is wrought from it.

#4 – It's Feast AND Famine, Not OR

You often hear when people are talking about freelancing the whole feast or famine comparison. That this mode of operation is what you can expect while working within the freelancing machine.

It's Feast and Famine
Image credit: Bigstockphotos

You will either be enveloped in times of feast or times of famine. And when many people hear this, especially those considering getting into the field, they mistake that it is kind of an either/or situation. This is what will often lead to a freelancer over-committing themselves and booking too many projects at a time. To stave off any chance of famine.

But that is unfortunately, not often how it actually plays out. You will have periods of both. For most freelancers, there are times when you will be feasting and riding high upon a successful wave of projects that have come your way. But there will also be times when you will be in the grips of famine as the waters are still and no waves are present. You need to prepare for it. Being caught off guard in this respect is not something that tends to produce favorable results.

Being unprepared for the times of inactivity on the work front will also hopefully keep you out of that desperate place that has you accepting work from a client who comes with all sorts of red flags and warning signs. The fewer of these jobs we find ourselves forced to take, the more enjoyment we reap from our work. This helps feed our longevity and stamina for staying in the field. Even when times are tough.

#5 – Good is the Enemy of Great

This is something that I was taught a long time ago in another job, but that seemed to resonate with me more once I got into freelancing and started working for myself. This gem was handed down from a manager I worked under over a decade ago, and it holds true still. Good is the enemy of great. And even if they do not realize it themselves, the most successful freelance web designers live by this old adage. If we become too satisfied with being good at what we do, then we will never be great at what we do.

Good is the Enemy of Great
Image credit: Bigstockphotos

Freelancers cannot afford to fall into this trap. Especially in such an innovative and changing field as web design is. Instead, if we view every opportunity that we take on, as a new chance to prove ourselves to the client and the web design community at large, then we will always be striving for greatness. We will never be satisfied with our current level of skill and design prowess and we will constantly be seeking out new learning opportunities and challenges.

This is a recipe for keeping us at the very top of our games, and should be considered a priority for us all. You always hear that you should never stop learning, and this just furthers that idea and drive. For if we allow ourselves to stop growing, then we in turn prevent ourselves from moving forward on a path of upward mobility. We instead wander along a plateau until we reach the end and start declining. That's not a route we should ever be satisfied with taking.

#6 – Not Every Innovation Will be Welcome

As we work with various client types and brands, we have to remember that not everyone is on the same page as we are with this push for constant upward mobility and growth. So while we may be wanting to always broach new areas and break new ground, that's not necessarily where the work will be. And while we know trying daring new things can provide amazing and unique break-throughs in the field, we understand that we are ultimately working for the client.

Not Every Innovation Will be Welcome
Image credit: Bigstockphotos

They get to decide the full trajectory of the project and where it ends up. So not every innovative thing we suggest will be welcomed and be able to be implemented into every project. This is just the way the game is played. Some clients just aren't willing to take chances in that way, and we have to be willing to let those things go and not push the client into being our guinea pig.

Learning to work within the constraints of the client's wishes is just as important as being able to convince the client to trust in your judgement and expertise.

No More Secrets to Tell

But that doesn't mean that the conversation is over. There are bound to be more secrets that you are holding on to waiting to share. Or at least some thoughts on those we have.

Now is your turn. Take a few moments to drop us a line or two in the comments.

May 4th, 2013

Sites of the Week: AppFog, Enigma, Unheap and more

Sites of the Week: AppFog, Enigma, Unheap and more

The collection of sites we made today is full of nice services and stuffs for you can use some day, such as AppFog and Unheap. Also, a special mention to Enigma, who won the TC Disrupt this week! Check out these and other sites in the whole selection, share with us what you think and stay tuned for the next week!

Take a look on all the other sites we're featuring today. Also you can keep sending me your suggestions via Twitter twitter.com/learnertuts and include sites in the message.

DESIGN / CSS

AppFog - appfog.com

The Best Public Cloud PaaS, Now Available on Private Clouds.

AppFog

Flipboard - flipboard.com/

Now You Can Create Your Own Magazines on Flipboard.

Flipboard

APP / WEB APP / SERVICE

iDoneThis - idonethis.com

Reply to an evening email reminder with what you did that day. The next day, get a digest with what everyone on the team got done

iDoneThis

Enigma - enigma.io

Enigma empowers the discovery of hidden facts and connections across the universe of big public data.

Enigma

COMMUNITY / PORTAL / STORE / EVENT

Microlancer - microlancer.com

Fast and affordable digital services. Microlancer simplifies the process getting small jobs done right by providers you can trust.

Microlancer

Unheap - unheap.com

We’ve put a lot of effort into organizing, categorizing, thumbnailing and tagging plugins on our site and making sure things are as consistent as possible.

Unheap

STUDIO / PORTFOLIO / BLOG

Sensorama - sensoramadesign.com.br

We are specialized in surprise you with surrounding and intuitive interface.

Sensorama

Map Icons Designer - webiconset.com/map-icons

Map Icons Designer is a set of 200 Map icons in PSD Vector Shape & PNG format. They can be used as Google Map Icons, Location Markers, Point of Interests (POI) on any Maps.

Map Icons Designer

THEMES

907 - themeforest.net

Great one page WP theme with tons of options and features.

907

Designy - themeforest.net

Good for everyone: Portfolio, Marketing, Business, Corporate, Creative, Blog – there are so many options the possibilities are endless!

Designy

May 1st, 2013

35 Website Designs with a Great Concept

You may very well be wondering what we mean by the title of this article! Aren't all websites built on a concept? Well, yes, of course they are, but this collection is full of designs that you wouldn't necessarily marry up with the product or service being offered, or are just very off-beat or different in terms of scrolling, images used or just general presentation.

Some tell a story as you scroll through the site, some give an insight on the product being offered, then others grab your attention by being too busy, too bright, too big, etc. These types of designs can make you determined to figure out how they work – of course, on the other hand, they can simply make you move on if you really don't have time right now!

35 Website Designs with a Great Concept

Website Designs with a Great Concept

James Bond 007 Cars Evolution
James Bond 007 Cars Evolution

My Hangover Hoody
My Hangover Hoody

Visit Bruges
Visit Bruges

CoolApps
CoolApps

Don & Dona
Don & Dona

Kinder Fotografie
Kinder Fotografie

Sanissimo
Sanissimo

Jacqui Co
Jacqui Co

Apologie Paris
Apologie Paris

Bullet PR
Bullet PR

Rit Team
Rit Team

Kunal Chhajer
Kunal Chhajer

Cilantro Cafe
Cilantro Cafe

Ben the Bodyguard
Ben the Bodyguard

Jan Ploch
Jan Ploch

Cascade Brewery Co
Cascade Brewery Co

Amazee Labs
Amazee Labs

Accept Joel
Accept Joel

Nintendo: Mario Cart
Nintendo: Mario Cart

Bagigia
Bagigia

FK Agency
FK Agency

Asics: Stop at Never
Asics: Stop at Never

Design Made in Germany Magazin
Design Made in Germany Magazin

Tag Reaction
Tag Reaction

TokioLab
TokioLab

The Horizontal Way
The Horizontal Way

Ladio
Ladio

SkullCandy
SkullCandy

Carmilla Vampire
Carmilla Vampire

Skittles – Experience the Rainbow
Skittles - Experience the Rainbow

Paolo Cavanna
Paolo Cavanna

Eutem
Eutem

Sensi Soft
Sensi Soft

Ted Rosedale
Ted Rosedale

Layrr
Layrr

Conclusion

Hopefully, if you have visited some of the selected websites, you now understand the title. Whether the concept is in the graphics, the scrolling, the animation or just the general overall design, these sites have great concepts!

April 30th, 2013

30 Wireframe Templates and Toolkits

Creating wireframes doesn’t necessarily require the use of special wireframing software. It is entirely possible to plan and prototype user interfaces using established tools like Adobe Illustrator, OmniGraffle or even PowerPoint and Keynote. These tools are tried and tested and incorporate a rich set of features that allow users to quickly and easily create wireframes without the need for specialist software. What’s more, they are designed by reliable software providers and it’s highly likely that they will continue to be around in a few years’ time.

To help you get started with wireframing using your tool of choice, I have compiled a list of useful resources and templates that are available in different file formats.

Webpage Wireframe Stencil Kit (Adobe Illustrator, EPS)

Webpage Wireframe Stencil Kit - Wireframe Template & Toolkit

A collection of high-fidelity wireframe controls and icons in .ai and .eps vector format; free for use in both personal and commercial projects.

Webpage Wireframe Stencil Kit →

Wireframe/Blueprint Kit (Adobe Illustrator)

Wireframe/Blueprint Kit - Wireframe Template & Toolkit

A small kit of beautifully designed website wireframe elements in light-grey with flecks of blue.

Wireframe/Blueprint Kit →

Sketching & Wireframing Kit (Adobe Illustrator, SVG, EPS)

Sketching & Wireframing Ki - Wireframe Template & Toolkit

A free wireframing kit that contains typical websites elements such as form controls, banners, icons and indicators.

Sketching & Wireframing Kit →

Sqetch Wireframe Toolkit (Adobe Illustrator)

Sqetch Wireframe Toolkit - Wireframe Template & Toolkit

This is a comprehensive collection of carefully hand-drawn templates and elements that can be used for web and mobile wireframes.

Sqetch Wireframe Toolkit →

iPad Sketch Elements (Adobe Illustrator)

iPad Sketch Elements - Wireframe Template & Toolkit

A collection of typical iPad controls offered in a sketch-like style for use in Adobe Illustrator.

iPad Sketch Elements →

iPhone Wireframe Elements (Adobe Illustrator)

iPhone Wireframe Elements - Wireframe Template & Toolkit

A set of wireframe elements for iPhone apps in .ai and .pdf format; released under a Creative Commons Attribution license.

iPhone Wireframe Elements →

PowerMockup: Wireframe and Storyboard Tool (PowerPoint)

PowerMockup: Wireframe and Storyboard Tool - Wireframe Template & Toolkit

An add-on for PowerPoint that provides a searchable library of over 250 wireframe stencils and icons.

PowerMockup: Wireframe and Storyboard Tool →

Windows 8 Wireframe Templates (PowerPoint)

Windows 8 Wireframe Templates - Wireframe Template & Toolkit

A free collection of PowerPoint slides for wireframing Windows 8 apps; includes 240 app icons.

Windows 8 Wireframe Templates →

Wireframe Stencils (PowerPoint)

Wireframe Stencils - Wireframe Template & Toolkit

A small set of UI shapes for creating wireframes of desktop and web applications in PowerPoint 2003 and newer releases.

Wireframe Stencils →

Keynotopia: User Interface Design Libraries (Keynote, PowerPoint, OpenOffice Impress)

Keynotopia: User Interface Design Libraries - Wireframe Template & Toolkit

Keynotopia is a huge commercial collection of low and high fidelity UI components for use in Keynote, PowerPoint and OpenOffice.

Keynotopia: User Interface Design Libraries →

Keynote Kung-Fu: Wireframe Toolkit (Keynote, PowerPoint)

Keynote Kung-Fu: Wireframe Toolkit - Wireframe Template & Toolkit

Similar to Keynotopia, Keynote Kung-Fu provides dozens of UI templates for use with Keynote and PowerPoint.

Keynote Kung-Fu: Wireframe Toolkit →

Sketchit for iPhone App Wireframes (Keynote)

Sketchit for iPhone App Wireframes - Wireframe Template & Toolkit

Sketchit is a collection of Keynote slides that can be used for creating wireframes of iPhone apps.

Sketchit for iPhone App Wireframes →

WireKraft Wireframe Kit (Keynote)

WireKraft Wireframe Kit - Wireframe Template & Toolkit

Another collection of templates for wireframing iPhone, iPad, Android, and Windows Phone apps using Keynote.

WireKraft Wireframe Kit →

Stencils for Information Architects (Visio)

Stencils for Information Architects - Wireframe Template & Toolkit

Visio stencils that are designed to aid the work of an information architect. The resource includes stencils for wireframes, sitemaps, and process flows.

Stencils for Information Architects →

Spoon: Mobile Wireframe Kit (Photoshop)

Spoon: Mobile Wireframe Kit - Wireframe Template & Toolkit

A clear and elegant kit of wireframe controls for use with iPhone and iPad apps. The collection also includes hand gesture illustrations.

Spoon: Mobile Wireframe Kit →

Photoshop Wireframe Kit (Photoshop)

Photoshop Wireframe Kit - Wireframe Template & Toolkit

A free, simple website wireframe kit that includes elements such as headings, bullet lists, form fields, image and video controls, etc.

Photoshop Wireframe Kit →

Photoshop Wireframing Tool (Photoshop)

Photoshop Wireframing Tool - Wireframe Template & Toolkit

A wireframing kit that consists of 175 vector-based custom shapes for use in Photoshop. It is priced at $19.

Photoshop Wireframing Tool →

Wireframe UI Kit (Photoshop)

Wireframe UI Kit - Wireframe Template & Toolkit

A free kit containing 60+ editable wireframe templates for many of the typical elements used in web design.

Wireframe UI Kit →

Web Design Wireframe Kit (Photoshop)

Web Design Wireframe Kit - Wireframe Template & Toolkit

Another kit for creating website wireframes in Photoshop and Adobe Illustrator. The kit consists of over 120 UI elements.

Web Design Wireframe Kit →

Mini Wireframing Kit (Photoshop)

Mini Wireframing Kit - Wireframe Template & Toolkit

A PSD template for cute little miniature wireframes, includes a pixel font for dummy text.

Mini Wireframing Kit →

Web UI Wireframe Kit (Photoshop)

Web UI Wireframe Kit - Wireframe Template & Toolkit

A free collection of scalable Photoshop shapes and smart objects that can be used to create website wireframes.

Web UI Wireframe Kit →

Konigi Wireframe Stencils (OmniGraffle)

Konigi Wireframe Stencils - Wireframe Template & Toolkit

A rather large set of shapes for making wireframes of websites and mobile apps in OmniGraffle.

Konigi Wireframe Stencils →

Web Wireframe Stencils (OmniGraffle)

Web Wireframe Stencils - Wireframe Template & Toolkit

Another OmniGraffle stencil that is designed to allow users to quickly create simple wireframes of websites and web applications.

Web Wireframe Stencils →

Wireframe Sketch (OmniGraffle)

Wireframe Sketch - Wireframe Template & Toolkit

An awesome template of hand-sketched wireframe controls for OmniGraffle.

Wireframe Sketch →

elwebUI: Web Wireframe Kit (OmniGraffle)

elwebUI: Web Wireframe Kit - Wireframe Template & Toolkit

A relatively complete collection of commonly used user interface elements for web projects.

elwebUI: Web Wireframe Kit →

ZURB iPad Stencils (OmniGraffle)

ZURB iPad Stencils - Wireframe Template & Toolkit

A great looking stencil and some sketch sheets for quickly creating low-fi wireframes for the iPad.

ZURB iPad Stencils →

Adobe Fireworks Wireframing Kit (Fireworks)

Adobe Fireworks Wireframing Kit - Wireframe Template & Toolkit

A free and handy wireframing kit, handcrafted by Hannah Milan with Adobe Fireworks.

Adobe Fireworks Wireframing Kit →

Dragnet Website Wireframes Kit (Fireworks)

Dragnet Website Wireframes Kit - Wireframe Template & Toolkit

Another wireframing kit for Fireworks. The kit consists of over 25 common web design elements such as scrollbars, buttons, menus, etc.

Dragnet Website Wireframes Kit →

Wireframe Kit (Google Drawings)

Wireframe Kit - Wireframe Template & Toolkit

A set of blue-colored wireframe templates for use in Google Drawings, a component of Google Docs.

Wireframe Kit →

iPhone Wireframe UI Kit (Sketch)

iPhone Wireframe UI Kit - Wireframe Template & Toolkit

A kit for creating wireframes of iPhone applications in Sketch (a powerful vector-based design tool for Mac OS X).

iPhone Wireframe UI Kit →

Conclusion

I hope you have found our compilation of helpful resources useful and that there is something in the list that suits your needs. Please share your thoughts and experiences in the comment section below. I’d also be glad to hear of any further resources that I may have missed in the collection and you would like to recommend.

April 27th, 2013

High Quality Photoshop Grass and Plant Brushes

Graphic designing has become extremely popular in the recent time. These are required for creating different types of designs as well as animations. Majority of the graphic artists are totally dependent on Photoshop for creating different varieties of graphical designs and they make use of the diverse kinds of applications like brushes present in this platform for creating attractive designs.

Apart from the integrated brushes, many brushes have also been developed by the expert Photoshop users for giving a realistic touch to the designs created by them. Specialized sets of Photoshop brushes are present on the internet that will help in designing diverse kinds of plant and grass with precision. So if you are in need of designing plants and grasses for your next project take help of these tools to get the desired result. With the use of these brushes the time required for completing a project is also much less and the works of the artist is bound to get noticed as well as appreciated by the viewers.

Here is a list of the twenty seven qualitatively superior brushes that are going to help the designers in creating perfect designs. We have hand picked these high quality plant and grass brushes after searching the internet thoroughly. If you are looking for this kind of brush, then go through this post as you are going to get hold of all the viable options. Add this in your library and use them whenever you need it to design plants and grass conveniently.

1. Photoshop Plant Brushes Bsilvia

Download Photoshop plants brushes for free, that’s it. High resolution, set of 23.

HQPGPBDW 01

2.  Angela 3D Plant Brushes

Five plant brushes made in Photoshop 7.0

HQPGPBDW 02

3. The Ultimate Collection of Grass Brush Set

Charfade’s Ultimate Grass Brush Set, Made in Photoshop CS3, but can also work in CS, CS2, CS4, so far some can use it in PS elements and versions of gimp.

HQPGPBDW 03

4. 5 Bonsai Brush set for Photoshop

This free Photoshop Brushes Set – 5 Bonsai Brushes is made by me – Ewa Sajdak – Pink On Head. You can download it and use for personal use. You are not restricted in how you use my works as long as you do not claim authorship, sell them, use them for any offensive or unlawful purpose.

HQPGPBDW 04

5. Grass Brushes by Diana’s Creation

This is a set of 10 Hi Res grass brushes. All brushes are crisp, large and clear just wonderful for all your nature art projects and more..!!

HQPGPBDW 05

6. Sagbot Grass Brush Pack

Sagbot is local definition for grass. First attempt on making brushes and grass brush files. Hope you can find a good use for this grass brush pack.

HQPGPBDW 06

7. Grasses and Photoshop Plant Brushes

A set of Photoshop & GIMP brushes composed of various grasses and plants. Includes: bamboo, cattails, numerous grasses, hay, barley, bushes, and several other plants

HQPGPBDW 07

8. Grass Brush Set by Slizzie

This is a set of 6 grass brushes that I use in my digital artwork. They can be used to add realism and give your artwork a more natural painterly feel.

HQPGPBDW 08

9. 5 Grass Brushes

Made with PS 7.

HQPGPBDW 09

10. Lush Grass Brushes

HQPGPBDW 10

11. Grass nature brushes

HQPGPBDW 11

12. Tree Brushes by Falln Stock

The Brushes here are made by me, for Photoshop.They do not work in PS 7 or lower – they were made with Photoshop CS.

HQPGPBDW 12

13. Grass Plant Brushes

This brush file contains the three ones you can see in the image, made from very large source files. You can use it both as plant, or smaller as grass. Made in Photoshop CS4.

HQPGPBDW 13

14. The Grass Lands by Mid Night Touch

HQPGPBDW 14

15. HD Grass Brushes

HQPGPBDW 15

16. Grasses

HQPGPBDW 16

17. Photoshop Plant Brushes

There are 9 Photoshop brushes (16 bit) in 1000x dimension.

HQPGPBDW 17

18. Stock Photoshop Brushes Plants

HQPGPBDW 18

19. Tree Brushes by Winerla

It’s a tree pack brush for Photoshop CS3 and more. We can find all these trees in European forest !

HQPGPBDW 19

20. Dill Brushes

This set contains 18 brushes of various sizes created in Photoshop 7.0. They are perfect imitation of trees and branches in graphic designs, but of course it all depends on your creativity .

HQPGPBDW 20

21. Woodland Brushes

Set of tree brushes made in Photoshop CS. These are for personal use only – please read the rules inside the zip folder.

HQPGPBDW 21

22. Photoshop Brushes Tree

HQPGPBDW 22

23. Tree Border Brushes

HQPGPBDW 23

24. Jax Grass Brushes

A set of brushes perfect for clone stamping and for filling out with different shades of green and earth tones.

HQPGPBDW 24

25. The Grass Lands

A very ambitious set of 45 grass brushes. Done in PS 7. Image Pack is included for those with older versions, Be patient, it’s a big download.

HQPGPBDW 25

26. Nature 2 Brushes

Everything you need to make your own Micro cosmos Jungle(need Bugs)

HQPGPBDW 26

27. Plants

HQPGPBDW 27

April 27th, 2013

Improving Your Site’s User Experience

When it comes to web design, the quality of experience that users have with a site determines whether it’s successful or not – regardless of how visually catchy the design is. A positive experience drives sales and conversions, while a negative one deters visitors from staying or returning. Therefore performance optimization should be a central part of your design process if you’re aiming for high conversions and user satisfaction. Here are some ways to improve your site’s user experience.

Increase Site Speed

Consider how many people take out their phones to quickly check email or look something up when they have a spare second in the day. Whether it’s while waiting for the bus, standing in line for coffee or running to a meeting, they expect to achieve their goal on the web in that short amount of time. Forty percent of users will abandon a page after waiting longer than 3 seconds, and many people share their bad site experiences with others. It’s your job as a designer to make sure your site is loading fast enough to satisfy these standards and to make sure yours provides an experience that gets positive feedback.

To begin the process of improving your speed, first use a site speed testing tool to measure how it’s currently performing. Then make changes like:

  • Resize or remove large images and files
  • Reduce the number of plug-ins in your site
  • Eliminate flash files, which greatly weigh down performance
  • Cache your site so that it won’t have to take time to fully assemble every time a user accesses it
  • Always retest your speed after making changes so you know what is effective in improving it.

Clean Up Your Navigation

Reassess your navigation system: does your menu and search field honor conventions in that they are easily identifiable and usable? Minimize the number of options users have when entering your site by combining pages/content and getting rid of low-traffic pages. The fewer options there are, the more direct your site’s purpose is, and the easier it is for users to decide where they want to go. You can evaluate how users currently use your site by carrying out usability tests and referring to your site analytics data.

Mercy Online

Mercy Online

This site has a visible search box, an option to easily subscribe to a newsletter and a few clickable links to navigate to other pages.

Aim For High Conversion Rates

You can be sure that a high converting website is also highly usable. Focus on the usability of your site, and user satisfaction (and in turn, conversions) will follow. To maximize usability:

  • Make your purpose clear. Use recognizable and concise calls-to-action so that users know exactly what they are meant to do with your site. Show users the value your product or service will add to their lives.
  • Be consistent. Make sure each page of your site sends the same message, and shares the style of design elements and layout.
  • Make text readable. Tailor your content to be easily perceived while users scan the page. Headlines, variations in font sizes and weights, and breaks in text blocks create a breathable set of information that can be retained even while glancing through it.
  • Keep it simple. Comparable to the fact that simple navigation makes it easier for users to decide what to do, simplicity in your entire site design keeps users from being overwhelmed with information. Ample white space and a unified style give users a sense of comfort and professionalism, and builds their confidence that they’ll find what they’re looking for quickly.
Red Digital Agency

Red Digital Agency

Red presents a good balance of white space, imagery, text and color to reveal its purpose and capture attention.

Build Trust

Visitors to your site will have a more positive experience if they can trust you. Whether it’s the validity of your information, your protection of their personal information or confidence in the quality of your product, it’s important to give them reason to trust you. You can do this by providing visible contact information, allowing customer feedback, presenting previous customer testimonials and/or client logos, and displaying your SSL certificate if you have a registration or checkout page.

When working to improve your site’s user experience, just remember to consider what your audience is looking for, and test and measure the changes you make to create a more effective and usable site.

April 27th, 2013

Inspiring Examples of Negative Space in Logos

When properly applied, the negative space effect can result in a clever and elegant logo. Negative space is the empty space between the main elements of a design and good designers know how to take advantage of this to create something that is memorable and captures the imagination. So, today we gathered some inspiring examples of negative space in logos to show you.

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

Inspiring Examples of Negative Space in Logos

April 26th, 2013

What’s new for designers

The February edition of what’s new for web designers and developers includes new web apps, jQuery plugins and JavaScript resources, productivity and project management tools, CMS’s, CSS and HTML frameworks, web development tools, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Dropzone.js

Dropzone.js is an open source, simple drag and drop file uploader with image preview. It’s easy to set up (especially if you use Component, as you can add it as a dependency) and implement as either a form or programmatically.

 

Flowtime.js

Flowtime.js is a framework that makes it easy to create HTML presentations or websites with full page fluid layouts, multiple navigation controls, transitions, parallax support, and more.

 

Notism

Notism is a great tool for working on visual content with a team. You can upload, stack, and review visual project ideas, create working prototypes of static templates, discuss drafts, and more. There are even tools for signing off on layouts.

 

Dropify

Dropify makes it easy to make files available for download on your Facebook fan page. There’s a free plan available (which doesn’t offer Like-gating), as well as premium plans. It’s great for artists, authors, creatives, brands, and small businesses.

 

Onepager

Onepager lets you easily build simple websites for small businesses. The resulting sites work great on both desktops and mobile devices, are cloud-hosted, include custom form capability, and are search-engine friendly. Starter sites are only $8/month, with more robust plans available.

 

Cashboard

Cashboard makes it easier to run your business. It includes project management tools, tracking of time and expenses, invoicing, and even payment acceptance. The free plan offers support for one employee and two active projects, while the premium plan offers more features.

 

Kirby

Kirby is a file-based CMS that’s easy to setup and use, and incredibly flexible. It uses your design and your templates, doesn’t require a database, and supports Markdown syntax, among other features. It’s just $39 per site.

 

QuoteRobot

QuoteRobot makes it easy to create professionally designed proposals, invoices, and quotes. It works well with Highrise, FreshBooks, SalesForce, Google Apps, and Xero, and only costs $10/month after the 30 day free trial.

 

Dispatch

Dispatch is a tool for organizing teams and projects. It works with the things you already have in Dropbox, Google Drive, Evernote, and Box. It includes full previews that stay up-to-date within Dispatch so you don’t need to download or update manually.

 

Reamaze

Reamaze is a cloud-based helpdesk that works through email, Facebook, or Twitter. It includes support for response templates, has collision detection, and conversation tagging.

 

Hint.css

Hint.css is a SASS tooltip library which uses only HTML/CSS (no JavaScript) for creating simple tooltips using data-* attribute, pseudo elements, content property, and CSS3 transitions. It degrades gracefully without any transitions in browsers where CSS3 transitions aren’t supported.

 

Mueller Grid System

Mueller is a modular grid system based on Compass that works for both responsive and non-responsive layouts, with full control over column width, gutter width, baseline grid, and media queries.

 

Extra Strength Responsive Grids

Extra Strength Responsive Grids is a grid system that includes a fluid percentage-based layout, media queries, easy alignment, nested grids, and more. It’s great for prototyping and is SASS-enabled.

 

Ink

Ink is an easy to use toolkit for creating web interfaces. It uses HTML, CSS, and JavaScript for building layouts, displaying common interface elements, implementing content-centric interactive features, and more.

 

Top Drawer

Top Drawer uses CSS3 transitions to smoothly reveal menus, rather than JavaScript animations. It uses Modernizr to detect browser compatibility for CSS3 transitions, and uses JavaScript as a fallback.

 

Cool Kitten

Cool Kitten is a beta framework that includes HTML, CSS, and JavaScript files that’s responsive and includes parallax scrolling support.

 

scrollUp jQuery Plugin

scrollUp is a lightweight jQuery plugin that lets you add “scroll to top” functionality to any website.

 

Mobile Chief

Mobile Chief is a free mobile site plugin that includes custom elements and Font Awesome integration, and is built on HTML5 and CSS3 for a consistent experience across mobile devices.

 

Textillate.js

Textillate.js is a plugin for CSS3 text animations that combines a number of awesome libraries to provide an easy-to-use plugin. All you have to do is include it and its dependencies in your project and then start creating awesome effects.

 

Flight

Flight is an event-driven JavaScript framework that maps behavior to DOM nodes, from Twitter. It uses ES5-shim and jQuery, as well as an AMD implementation like loadrunner or require.js.

 

Chime

Chime is a Google Chrome extension that aggregates all of your notifications across various social media channels, including Reddit, Gmail, Twitter, Facebook, Flickr, and more.

 

Cloudship

Cloudship is a task management and note taking app that lets you easily collaborate with your team. It’s simple to use, with support for nested tasks, attaching files, time tracking, and more.

 

Conditionizr

Conditionizr is a JavaScript utility that detects your browser and pixel ratio to serve conditional JavaScript and CSS files. It’s been rebuilt so that it’s 50% faster than its jQuery predecessor.

 

Behave.js

Behave.js lets you add IDE style behaviors to plain text areas so that writing code is more enjoyable. It requires no dependencies, supports hard and soft tabs, and auto opens and closes characters like parenthesis, brackets, braces, double, and single quotes.

 

Free Travel Icon Pack

This Free Travel Icon Pack from Obox includes a lighthouse, ski goggles, a camera, a bus, a tent, binoculars, and many more travel- and geography-themed icons.

 

MFG Labs Icon Set

MFG Labs Icon Set was created for their own internal use, but has since been made available for public use. It’s a simple, minimalist set with icons for everything from social media sites to video/audio players.

 

RoughDraft.js

RoughDraft.js makes it easy to prototype interactive HTML mockups without duplicating a bunch of code. It also eliminates the need for faking content (like lorem ipsum text or filler images).

 

Toolbar.js

Toolbar.js lets you set up tooltip-style toolbars for web applications or websites, and can be customized with Twitter bootstrap icons.

 

Attitude + (free)

Attitude + is a display typeface inspired by Japanese pop culture and American hip hop subculture, and is influenced by geometric fonts with ornaments.

 

Higher (free)

Higher is a geometric display font with an Arts & Crafts vibe. It was created as a student project, and is available in TTF and OTF formats.

 

Salt & Foam (free)

Salt & Foam is a beautiful unicase display font in two styles, with a subtle 3D effect. It was designed by Anna Karatcheva, inspired by her first time surfing.

 

Apollo ($5)

Apollo is a rounded sans serif typeface designed as a student project by Kevin May.

 

Zerb (free)

Zerb is an abstract geometric display typeface that’s available for free for both personal and commercial use. It comes as an Illustrator vector file.

 

Fassade Display ($10)

Fassade Display was inspired by lettering on 1930s travel posters, with exaggerated graphic elements similar to geometric Art Deco lettering.

 

Roccia ($10)

Roccia is an experimental sans serif typeface with two styles and all uppercase characters.

 

Faux Tangram (free)

Faux Tangram is a tangram-inspired font that makes great use of basic geometric shapes and negative space.

 

Niewe (free)

Niewe is an abstract display font that comes in four different weights, free for personal use. Commercial use requires permission from the designer.

 

FM Ephire ($30)

FM Ephire is a retro, hand-drawn script type family with five weights and compliment italics. It’s great for banners and posters, greeting cards, and more, and even holds up well at smaller sizes.

 

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments.

April 26th, 2013

Retro Branding

While Generation Y may be too young to remember, there was a time in the 70s and 80s when the coolest gadgetry was inevitably “Made in Japan” — especially a series of 35 mm SLR cameras that set the industry standard.

When the design consultancy group Antrepo analyzed the logos and typography of these vintage cameras, they were struck by the line-based logos and extended-outline fonts that designers utilized for the majority of these products. The switch to the “less-bold” typefaces presumably cut down on production costs.

So, like any good creative, the team at Antrepo asked “what if….” Specifically, what if the hottest digital brands of the current day were done in this same vintage style? From there, the Instanbul-based company reimagined logos for such web leaders as Google and Amazon to social media sites like Twitter, and Pinterest.

The result is a cool mashup of modern-day tech with retro branding. It’s also a good reminder of how trends in design are constantly changing and evolving — but that there’s enduring merit in revisiting the ideas of the past.

 

April 26th, 2013

21 Examples of Texture Use in Web Design

Here at WDL we believe that textures can add a beautiful touch to a web design, giving a page personality and depth. From subtle textures to bold and colorful ones, there are a lot of different approaches on using them in a web design, and this is why today we gathered a few examples to give you ideas of how to incorporate textures to your next project.