Helping You Rock Out Your Site Like A Rockstar!

I am always looking for different tools out there for bloggers who have at least a minimal knowledge of putting together simple graphics. I stumbled upon Pixlr, which is a free online image editor.

Now, the site looks promising at a first glance and has an editor that you can use without having an account. The setup looks clean and has plenty of options, except for the fact that I could not use vector imaging to create.

(You can right click and open the image in a new window to see the full size of the image.)

This program even with just creating a simple image was a bit disappointing. When merging the layers of the background and text, and then saving as a JPEG at 100% quality, the image was a bit rough around the edges of the text.

Example:

For me, this is a big problem. Most of the people I know who have little knowledge of graphic design at least know how to put text on an image. If the text looks like this in the end result, the graphic editor is not worth using. Maybe in the future the editor may improve, but right now, even for basic text on graphics, this was a fail.

I did mess around with some of the brushes and effects, but it was nothing like using GIMP or Paint Shop Pro or even Photoshop. In fact, far from it. I think the best tool out of it was the free hand pencil. It has this shading feature that reminds me of studio art drawing.

Have you tried Pixlr? Are there other online graphic editors that you have tried?

There are so many images online, and so many more being created every day. Some are free, some are royalty free, some have licenses that you have to purchase in order to use the image, and some you just cannot even legally touch.

Are you using images that you have permission to use?

For those who have been in the blogging community for more than a decade, especially the “personal blog” niche, during 2004 through 2007, there were a lot of websites that used celebrity images. Some of these images were “blended” or pics spliced and mixed together in a way that made the image attractive. This was great practice for newbie graphic designers who played with Photoshop or other graphic editors to make their images look great.

Unfortunately, licensing on pictures of celebrities, including actors, musicians, and editors required graphic artists to personally contact the original photographer for permission. Even some artwork, like paintings, and other types of photography were required that the user either ask for permission to use and sometimes even require credit back to the original source/ artist.

Of course, a lot of webmasters were not found of this, but did remove what creative works did not comply.

However, since those years, stock photos, free images, and other types of licensed works have come into play.

For a dollar or more, website owners can use a cool vector image created by another, or perhaps a stock photo of some place relevant to what they are writing about. However, for every person who pays to legally use images that require licensing, there are many more who just take and use on whim.

While the main party to blame is the actual person illegally using an image that requires licensing, Google has also been fairly responsible for this. Think about it.

Go to Google. Click on the images tab. Do a search on an image. When Google displays the results, slowly hover over the first 4 rows and see how many links to stock photo sites come up. It should be a few, especially if you do a search on vector images (any type)…

However, next time you search for an image you need for your website or even graphics… think about it… do you have permission to use it???

How much time do you spend on designing your web interface? Why do I ask this question? The reason is simple. While 90% of our time is spent on SEO, we spend hardly any on tweaking our web interface. By web interface I don’t mean content but navigation buttons, interactivity, look, feel, heart, soul and life – in reverse order of importance.

Is your site hip and happening?

Do you know that most web masters never change their web pages after the initial design? The problem lies in the way websites are designed. You hire a front-end design company, get another to do the coding, throw in the content and hey presto, the website is ready, up and going. The web design guys depart from the scene and you, the webmaster takes over. You either add content yourself or use a WordPress blog to post your stuff. Meanwhile, the look, feel and soul of your site remains the same.

Over a period of time, this makes your website look stale and outdated. What visitors want is a hip and happening site. Look at Google. Google search page is quite simple, actually nothing great. However the “Google” text transforms according to the season and situation. Google art is almost a cult activity. I eagerly look forward to their logo every day. It is exciting and happening. What would happen if you were to see the same Google every time for the next five years? If people stop visiting your site you will surely lose money. I am sure you get the point.

Are you leading the way?

Web interface has been used by clever designers, to lead visitors to pages which they want them to visit. Navigation within a website must never be left to chance and whims of visitors. Once you get someone to visit your site, which is by itself a difficult proposition, you must never let them exit without making them do what you intend them to. Bounce rate in this context is an important indicator. I would say that a bounce rate over 20% is way too much. In actual fact, most sites report a bounce rate over 50% – what a waste. At the same time, I am against the irritating strategy of thrusting the ‘Buy Now’ button on the face of visitors every second or two. This is sure to put them off. The navigation buttons, which you want them to click, must be a shade larger and more prominent than others.

If you ask someone working in a web design company and open to experimenting with different types of navigation buttons, you would be surprised to know that in 20-30% of cases, they succeed in getting visitors to go where we wanted them to. Web interface design is a subtle art which can make or mar your profitability.

Conclusion

You must not take web interface for granted. Making small but strategic changes to your navigation buttons can have a big impact on the way visitors respond to visual clues and make a purchase. Web interface design is usually left to people with experience in manipulating images and sticking them together on the web canvas. What you require is a visual artist who can read the minds of people.

What have you done lately to your website to improve its design?

The Web Design trends for 2011 are yet to unleash. But, to look at 2010, it was all set with new horizon, and hot trends of design industry. Though, not a drastic departure from 2009, there was a definite shift in design aesthetics.

Even if you were not the part of the movement, be encouraged to dabble into these trends.

You may ask “Why”? Trends help designers to push forward and discover – What is next or what needs to be explored for perfection? In fact, ideas behind design trends are more important and designers should recognize it aptly. It helps you prepare for the coming seasons and of course, improve your site response rate.

Let us take a quick look what made web design trends of 2010 so popular?

Sketch or Hand drawn designs

Well, it is not exactly a new concept, but we know – it is still on the fringes of web design. Sketch in 2010 was more elemental part of corporate design. It was more of creating personalized standard web copy than fulfilling main focus of web design. However, it was not a smooth sailing for the traditional designers.

Many designers appreciated such designs but suffered from “I can’t really draw” attitude. However, such designs convey sense of closeness and improve the gap between web and personal interaction – The ultimate goal of Website development.

Large Headers and Over-sized logos

2010 has to keep an unforgettable impression on visitors. And, it did it well with over-sized logos and matching large headers. The header could take up to the entire screen but leave an important message (the catch line) for the visitors. The idea was brilliant. Visitors need not to face clicking phobia. Just a simple scroll down and the message were convincing enough to the visitors.

Slab Typefaces

Slab Typeface is a good visual treat to readers. Though, it has been used in traditional media for quite a long time, for Web, it was relatively new. Slab typeface is a particular font style where all the letters are capital and bold – to create a strong impact.

Initially, designers were reluctant to use it, as smaller logos and headers seemed understated. With new trend towards larger headers, slab typefaces got brave expression.

Typography

One of the most innovative, difficult and fresh design alternatives in 2010 – Typography simply rocks. The concept of mixing font sizes, twisting and moulding them to fit your purpose were unmatchable. Correct placement and creativity was all what enticed the readers. No need of overloading the site with tons of images and your job is done.

On page layout

The idea of single page message was challenging. However, it was rewarding too. In 2010, the approach was more minimal and seemed perfect for personal profile, blogs.

Large images

2010 Designers had a comfortable journey with humongous size images. It helped them using big statements in designs and conveys site’s voice.

Modal boxes

These were the latest add on, virtually everywhere in 2010. Modal boxes look like pop up and are easy to design and use. Designers realized this well, and it has a great future too.

Interactive design

The year showed – Flash is no more an annoying web design application. In fact Flash designs became more relaxed and professional last year. As visitors are getting more web savvy, Web designers moved towards the redeeming elements of flash.  The days of interactive design are back in track.

Want to explore more on latest web design ideas? Ask design experts and researchers.

Whether you have a site that sells products or if you blog, I have said many times that you are selling. Your visitors that you engage with and keep coming back identify and connect with you through your site. They remember things like your content, your layout, and your logo.

When it comes time that you want to take your site brand to the next level, these factors will change. How can you successfully take your site brand to the next level without confusing people?

Well, change is inevitable… which whomever came up with that phrase, I do not know, but it is true. You will have to change in order to grow as a brand. McDonalds has, Pizza Hut, Adidas, IBM, Apple, Chris Brogan’s site, and so on are brands that have had some brand changes for the better throughout the years. Whether it was through advertisements or actual logo tweaks or changes, they have done it.

As a blog owner or business owner, you will have to do this at some point. While I am sure you like to keep hold of some things, it might not always be the best idea, especially when you want to improve your image. You may have an idea of how you want to take your site, and have a web designer try to fulfill those wishes, but find out that you may have taken two steps back instead of two steps forwards with improving your brand.

While you do not want your site to look exactly like other sites, you can certainly learn from what is already out there on what you like or do not like, what works best for some of the leaders in your niche, and from articles like this one, how to improve your site.

Before even doing a design tweak or redesign, remember that as long as the general message you already convey on your site, through your content is consistent and that you keep engaging with your visitors (or even customers/ clients.)

Logo Branding

If you are doing a logo tweak, keep some part consistent in the transition, whether it be the words of your site or company, colors, or if you have a specific image you use, something needs to still tell people “You are you.” It might seem silly, but it is not uncommon for people to become confused and think your site was taken over by another company or person when you change up your logo.

Layout Design Branding

When taking your layout to the next level, you have to really put it in your mind to not be attached to your previous site. Think of it as a good investment for the future. With a better image, you are. It is unfortunate that part of what attracts people to a website brand is the visual aspect. Even in simply designed websites, the visual aspects of it being clean, user-friendly, and legible are attractive. However, if you have a site that needs improvement, you might want to consult with someone on what they think. You might be surprised from whether it be a knowledgeable friend, your web designer, or a branding coach on how much you need to do to get to that next level.

Do not accept mediocrity. If you are being told that something cannot be done, especially for WordPress design, you are being told wrong. There are a lot of things you can do and next to nil that cannot be done. Imagination is the only hindrance, so break free being stubborn about change or being told “no” and embrace what could lead to further success.

Content Branding

As I said before, your content should be consistent with the message you want to convey to visitors, potential customers, or long time customers. You usually do not have to do much except make sure with your design format that you are showing the way to visitors on what you want them to see on your website. If you have an ebook, that needs to be somewhere visible. If you have special blog posts that are must reads, that too needs to be in a prominent place.

Have you done a site re-brand lately? Do you feel you have taken it to the next level? Are you still uncertain if your brand is still needing that extra oomph? For those who brand consulting, what advice do you have in this matter?

Design is not that hard for some, but others, it might not be as great. Designing a website should convey its own type of message to your visitors that enhance what content is already available on your website. Design elements that are strategically made to attract your visitors to certain places are certainly things you want to apply in order to successfully convert your visitors. Here are 5 ways to make your site’s design pop in a way to convert your visitor to other places on your website than just the front page.

Colors

Color is important. People are visual creatures. It does not matter whether you are male or female, things that attract people are well put together palettes or tasteful, yet attention grabbing colors.

Typography

Years ago, it was not possible to properly implement different types of fonts on a site to dress up a site. This took encouraging visitors to download fonts they did not have. Since those days, people can use Typekit or what I like to recommend, Cufon Text Replacement to change elements in their site- like headings (h1, h2, h3, etc…) or using it in their graphics.

When considering the right font, choose them not just on how cool it is, but also for legibility.

Sliders/ featured post tools

Featured content sliders really have made a great element for converting websites. While some of the theme developers out there are implementing the content slider just for your posts, you can break out of that and use images and direct to different pages or areas of your site, much like a banner ad, but with some tweaks, you can really make a successful conversion tool. One of the plugins I like for sites that do not have built in featured content sliders is the Easing Slider for WordPress by Matthew Ruddy. You can use custom images or use it for your posts. A similar example of this is here on the front page of Blondish.net

A featured article widget is nice to have in your sidebar. You can show people the way to articles you think they really should read.

Design format

Your design format is important. If you have too much space or things seem smashed together, it becomes a problem for visitors wanting to read your site or go where you want them to go. Good code and clean design is good. If you made your site by yourself, consult a web design friend for advice. They will know or they SHOULD know the best practices in web design.

Interactivity/ forms

Leaving a way for your visitors to communicate with you is an excellent feature. Whether it is the comment form for your blog entries, a lead form, newsletter subscription, social network icons, these will build that dynamic that other sites may not have. Make sure to give the impression to your visitors that your door is open to them and they can contact you. The number of doors, or methods you choose to leave available will exponentially increase that engagement factor on your website.

Of course, the methods above are very basic, but with some clean design and proper placement on a web page, your website can attract those you are trying to reach.

What methods do you like to use on your website to attract visitors?

This tutorial is designed to help you get an idea how to vector. For this tutorial, the photo to the bottom of this article will be the one that will be referenced throughout the tutorial. The same techniques can be used for other pictures and even freehand vector images. Although I am going to be using Paint Shop Pro, these same things can be done in Photoshop and Illustrator. Also, because some of the images are quite large, they will be resized, so you will have to right click and open in a new window or tab to see the larger version. Some images may only be opened in a new window to view.

1. Choose an image. As said, for this tutorial, you can download the image HERE. You will have to right click and open it in a new window before saving it to your own computer.

2. Posterize the image. This will help you be able to differentiate which layer is which. In this case, for Paint Shop Pro, go to Edit> Artistic Effects> Posterize. For the best layer separation in this particular photo of a lily, use 10.

3. For this image, you can either use your own colors or the ones in your image. For this tutorial I am using ones closest to what the image has already. To get the colors for your first layer, choose the dropper tool and click in the color that you will start with. My suggestion is to pick a starting place that will be best, like a base color. When I create vectors, I start with a base and then continue with my lighter colors before going back for the darker shades. It makes less work as some vectors are difficult and require that you move some layers around.

4. You will need to zoom in on the image to help you focus on outlining. Use the pen tool and with your first color, outline the flower. Using 1.0 width. You do not want it to be a wide line.

5. Once done with the first layer, put that on invisible in your layer toggle area. With the next layer, you will outline the next lighter color from your base color. Make sure to click on New Drawing Object to start your next layer.

6. ( Second Layer Screenshot |First 2 Layers | Three Layers | Almost done)Repeat each layer until you get to the lightest layer. You may improvise with more layers if you like a smoother vector. When the light layers are done, touch up with the dark layers.

7. Once all layers are completed, toggle all layers to be visible to check work. Make appropriate changes until satisfied. Delete the background rastor image to leave background transparent. You can make your own background if you want.

8. Save in raw form so you can make later alterations if needed. To save for use, merge only the layers visible. Do not merge all or you will have a white background.

[This is a guest post by Lawerence Hall. Lawerence Hall is working as community manager at Go-gulf, a Dubai based web design company that
provides affordable web design and development solutions in the Middle East. ]

Choosing the right color scheme is vital in successful web design. Colors express feelings while bringing attention to areas of interest even before imagery or text begins speaking to a user. The goal here will be to understand what to use and when to use it, that’s where color theory comes in.

Color theory is the set of rules that say which colors work well together and why. Following these rules during your color selection can improve the efficiency of color in design. Here I’ve outlined some popular tools for color selection including color schemers, color palette resources and a few general color theory information sites below.

Kuler : Color Scheme Tool from Adobe

Kuler is Adobe’s free online color schemer. Kuler makes color exploration educational and social. Themes can be generated from scratch or from uploaded images. Using the community functions of the site can provide inspiration. Many user-generated themes are posted and rated here, waiting to be downloaded directly into adobe programs.

ColorsOnTheWeb : Color Wizard Color Scheme Generator

The Color Wizard is a great tool with many options. The greatest function it may have over the others is a quick way to check color variations. When you select the main color you want to work with, there are three boxes that provide various color tones by hue, saturation, and tint. This is a great way to experiment with fine toning your color selection quickly.

Color Scheme Generator 3

This easy to use tool has both a color wheel, and will generate color palettes. It allows for selection of many color theory algorithms and is easy for anyone to understand. It will also has settings to display the chosen color palette for various states of color blindness. The exports are plentiful with options for GIMP, text, HTML, Photoshop, and xml.

Color Hunter

Color Hunter is a nice tool for designing a scheme around a specific picture. After you upload a url or picture file the tool returns a light and a dark set of colors. If you create a login to the site you can save, tag, and rate schemes that you create for other users. Also schemes can be rated to see which ones are the most popular.

WebsiteTips : Colour Scheme Chooser

The SitePro Color Scheme Chooser users sliders instead of a color wheel to aid in color selection. This may be more familiar to people not accustomed to advanced design programs. It also has a drop down menu with seven values to choose from. This is a nice tool to perform quick color scheming tasks.

ColorSpire : Create Website Color Schemes

ColorSpire is a simple scheming tool. It uses a color wheel for color selection on the palette. Instead of working with known color theories it uses the selected base color and users can adjust for brighter, darker, saturation, or just make a random palette. It won’t help sort out usability issues like other tools I’ve listed but its quick and intuitive.

ColorBlender

The Color Blender is another simplified tool. It develops a 6 color pallete based on the main color you select from the slider. Like some of the tools here it includes functions to export pallete files to photoshop or illustrator. They can also be sent by email.

ColorDB

ColorDB is a very robust tool. Upon selecting the base color, variations and harmonies are all shown at the same time. Amongst the harmonies are complimentary, opposite, neutral, shades, split opposite, split complimentary, triadic and tetradic, which you can use to build color schemes from. There is also a color map and memory functions so that you can return to the site later and learn more of its many many functions.

ColorSchemer

The online ColorSchemer is an extremely simplified version of the popular desktop ColorSchemer. Once you simply pick a color it will show you 16 matching colors on the palette. Great way to get a quick look at some possible color combinations.

If any of the above terminology went over your head. Or you if just couldn’t figure out some of the terms and need a good root understanding of how color theory works check out the following sites.

Color Worqx
The Color Worqx website provides a step-by-step tutorial on color theory. It starts from the very basics and builds to very complex ideologies involving color that transcend the boundaries of just web design.

Color Theory – Wikipedia
This is a basic article on the Wikipedia on color theory. It is not as in-depth as the one by Color Worqx, but that makes it a great resource for picking up a quick overview on color theory.

Do you know any more online resources for color scheme generators? Do you use them?

Incredible online testking 1z0-536 training programs & Testking 000-105 help you in pass 000-977 exam regarding braindumps oracle. We offer best quality testking 646-205 training tools for your success.