Stefano Mallozzi Sviluppo web professionale

The similarities between an artist and a designer are quite easy to see, in fact those unaware of the distinctive differences might even assume that they are the same occupation. However for those that understand the functions of both creative endeavors, they know that is far from the case. An artist is a creative who creates to satisfy their own aesthetic pleasure, unconcerned with the wants and needs of others. A designer is a creative who creates in hopes of satisfying the wants and needs of others with their art, casting aside their own individual creative desires.

With that understanding in mind, it is clear that both creative paths differ by one being a creative for the people and the other for oneself. As designers, there is always some level of artistic input that must be imputed into a design for it to be affective. The problem many designers have is trying to incorporate the desires of their inner artist into their work as a designer. There can’t be too much artistic perspective used because then it will lean away from the intended audience, however too little and the design will likely look very generic and uninspired. That is why we are going to go over how a designer can find that inner balance between artist and designer.

What is Your Favorite Style of Art?

Image Credit: jiruan

In the design world it is the popular choice to renounce ones own true favorite artistic style and to design according to whatever style is currently trendy. An current example of this would be the universal fascination over minimalism. This is a great artistic style, with a really engaging philosophy behind it. However it is still not a perfect mesh for everyone.

So with that in mind, let’s go over a couple of questions that can lead anyone to the art style that best represents them.

What Does Your Personality Say About You?

Art is nothing more than an outward manifestation of the current mental state, and personal qualities, of the artist creating the work.. This makes artwork personal, and the need for a personal connection from a viewer of the work and the artist must be able to be formed from the art. Understanding this about art puts better perspective onto how and why some artwork appeals more so to some than it would to others.

So before anyone can go around looking at artwork to find what suits their creative palettes, there must be an understanding of oneself. That way when passing by and viewing artwork, the true connection with the work and yourself can be established.

Can You See Yourself  in the Artwork?

As already mentioned, art is very personal and allows for the inner workings of an artist to come out onto their canvas. It is important to be able to sense a connection with the artist  through looking at their work alone, however it is more so important when aiming for inner balance between artist and designer to be able to see oneself in the work.

This isn’t so much literally seeing yourself of course. It’s about looking at something and being able to see the inner workings of your mind, person, past, future, and/or soul in the work you are looking at.

How to Incorporate Your Taste into Your Work

Image Credit: Fifth World Art 

As designers, it is our predetermined thought that our craft has no real room for personal creative interpretation, surrendering our individual tastes for that of the masses at large. It is quite easy to see how this thought process came to be when considering how community driven we are. From creation to final product, our main goal is to create something that is liked by a vast amount of people. If that happens to lead to something that we like, then that is just a little extra bonus in the project.

Now with that ideology thriving in anything designers create, it is quite hard to see ways in which any true personal artistic preference can be placed. Here are a few tips on how to awaken your inner artist in your designs.

Look for that “One Thing” when Finding Inspiration

Everyone takes that walk, or surfs the internet, trip, etc., to find inspiration for what they are working on. However, often the case is that instead of looking for that one thing in particular that stands out, the object of attention is the environment at large. That is of course fine for any other instance, but specifying your hunt for inspiration will lead to better results. This result should then lead you to an ample amount of creative thoughts that will easily lend themselves to your design project.

Ignore Best Practices…to an Extent

There is no such thing as a proven theory for success in the art world, so there shouldn’t be any perceived one anywhere near your mind when trying to bring out the artist in yourself. With so many proven success methods, guides, tutorials, and things of that nature, it’s hard for anyone to actually want to be adventurous. We design for financial gain after all, so this really isn’t such a bad thing. It’s just from the artistic standpoint, the only thing you’re doing by blindly adhering to these is suffocating your artistic expression. Understand the ones that make sense for what YOU are trying to do, and just leave the rest alone.

Lessen the Community Input

It is quite tempting to want to post what you’re working on to a social network full of creatives eager to see what everyone is doing, but it is not necessarily the best move. The vision for what you are to create can’t be translated to anyone perfectly, no matter how hard anyone tries. So of course there is no way that anyone elses input can actually lead to a better way of bringing out your inner artistic vision. Just leave this aspect for down the line when the project is close to completion, and needs that designer touch.

Don’t be Afraid

We all are afraid of creating something that is not well received, or easily understood by anyone else. This is so because art is not mean to be understood, only to express the thoughts of the artist. Don’t worry about the fear of rejection and just create, you could end up with something that the rest of us will be personally interpreting for years.

In Conclusion

Image Credit: fiveforefun

The work of an artist and designer is nothing alike, only the means they go about in creating their work. A designer can learn many things from art and artist like personal expression, relieving oneself of the fear of rejection, and the drive to fulfill one’s creative vision among other things. Just make sure as a designer you don’t let your inner artist consume your work too much, your job description still says that you create for the community at large.

How many forms are filled out each day across the web? Billions of them, for sure. From small household blogs to government portals, it’s hard to imagine a website not having at least one form. And this comes naturally, since forms are the quickest way of having users:

• subscribe for a newsletter
• add comments to an article, pose questions or ask for support
• fill out applications (e.g. job applications)
• answer surveys
• perform purchases
• join clubs and forums

Styling web forms for both usability and aesthetics is a usual practice for any web designer working on a project. However, at the very beginning of the Internet forms were so dreadful that no modern user would have had the slightest desire to fill in one of them – no customized design, no smart capabilities, scarce consideration towards user experience.

Let’s see the evolution web forms over the past 10 years. It’s simply a lot of fun!

1. Pre-web era forms – the prints that we all despise

Yes, yes, these ones do bring bad childhood memories of endless queues at public administration desks. Perhaps this is the reason most of us don’t enjoy filling out any kind of forms. Hopefully, those prints will become out of fashion before we run out of wood.

2. The early days of WWW: 1991 – 1998

The first years of the Internet (1991-1996) remain obscure as far as web forms are concerned. Since we don’t have NeXT software on hand anymore, there’s no possibility of taking screenshots from back then to see how forms looked (if they existed at all).

As we all know, in a short time WWW became a mass medium and electronic forms made their way in. However, they were awfully rudimentary. Customer feedback was processed through executable files running on the hard disk. It was hard to find  anything like an online contact form. For subscribing to a service, you most likely had to download a form, fill in a hard copy and send it to the webmasters via postal services.

The existent web forms at that time mainly performed search and submission tasks. The interface was dead simple and dull, HTML based with no CSS of course.

BACK THEN:

NOW:

3. Form use in online sales: 1994 – present

1994 brought two major enhancements in the web arena: e-banking and online ordering (pizza, as you may guess). Shortly after, Amazon launched its online shopping service in 1995 and eBay the next year. Naturally, all of them were using web forms.

Those days, e-commerce was hindered by the limitations of credit cards that didn’t support online transactions. The issue was solved around 2000, once online payment processors appeared. Web forms could then exhibit products for sale and then direct submitters right to the payment gateway where they could complete the transaction. This was a major leap for the internet making its entrance in the day-to-day life of regular people.

BACK THEN:

NOW:

4. Web forms in the days of social media: 2004 – present

Two major landmarks for social media are 2004 (the launch of Facebook) and 2006 (the birth of Twitter). Facebook had the most interesting evolution in regards to web forms.

From the very beginning Facebook provided its own tools for creating simple polls and for planning events. However, the original Facebook forms were simple ones, they had security issues and as for styling they used to hold the blueish standard skin of FB. Things got better though. In August 2006, Facebook launched the free Developers API, which led to a burst of applications, widgets and tools. Around 2010 came the first form management apps for Facebook. Users could now have their own signup forms for fan pages, reuse personalized forms brought from outside and build specific mailing lists. Since then, Facebook forms and surveys are among the most popular tools for businesses that perform social media marketing.

BACK THEN:

NOW:

5. Web forms and security

SSL protocol for data encryption was released by Netscape in 1994. Anti-spam tools for web forms such as CAPTCHA and password protection have only been available since 2000. In the dark ages before, there were knight battles with hackers and spam.

How could you prevent bots from signing up countless times? Using IP validation methods that aren’t by far infallible. One famous hijack of a web form occurred in November 1999, when slashdot.org had the idea to run an online poll asking what was the top graduate school in computer science. Even if the IPs were stored in order to prevent duplicate entries, the students of Carnegie Mellon managed to create a program that voted thousands of times for their university. The next day, the competitors (students at Massachusetts Institute of Technology) put up their own program and the two rival bots took over the poll, leaving the valid submissions in shadow. Fortunately, security options we have today are by far more efficient.

6. Contemporary profile of web forms

An important improvement came around 2007 when the first WYSIWYG form builders made their way in. Any internet user could then create forms. HTML knowledge is not mandatory anymore, since the remotely hosted form generators provide wizards with intuitive interfaces.

The portrait of a form that stands at the top of the evolution chain includes, by case:

• slick design, CSS customizable
• various publishing options: on blogging and social media platforms, on regular websites
• e-mail submissions received, secure data transfer and storage
• capacity to draw reports over data
• payment processing
• integration with 3rd party apps to extend its functionality.

Today’s websites are bursting with creative web forms. Contact pages aim to be both visually appealing and efficient as lead generation tools. Forms are successful in performing a wide variety of tasks: online ordering, event registration, research across the web, feedback. With CSS and HTML 5 at hand, forms can be successfully styled so that they blend in with the overall look and feel of any website.

Some Creative Contact Forms Aterlier Detour

Camping ilfrutteto

Red Bull Soapbox Racer

More amazing contact forms:

40+ Creative Contact Forms That Will Inspire You

91 Trendy Contact And Web Forms For Creative Inspiration

The thought of redesigning and revamping a website can be scary for most web designers. The thought of all the work and effort to design their website all over again can be frightening, more so are the countless review cycles, opinions from numerous stakeholders, comments from site visitors, and other factors to consider and this is enough to drive them crazy.

Revamping your site is a mega-headache, redesign is necessary at one point in the web site’s life cycle. You will need to revamp your site at some point in time, and the sooner, the better. You need to know when it is high time to revamp your site by looking into a few signs.

Sign number 1: The Metrics are Down

Have your metrics gone down over the past few months? Then it may be high time to revamp your site. Metrics are the number one indication that you should redesign your web site. Metrics give you an immediate indication that something needs improvement. To better understand your visitors, you need to speak to them using surveys and usability testing. A face to face conversation with your customers allows you to learn more than simple surveys and questionnaires. Conversations will reveal attitudes towards your website, brand, and overall company image.

Sure, there may be other reasons as to why your metrics are down. Be sure to look into them first and fix any problems you can see. Converse with your users, as only through dynamic conversation will you be able to know if your site needs redesigning, and to what extent. But if the sales, traffic and general user participation of the site are still down, it may be that your web design has ‘disconnected’ with your users.

Image by iamwahid

Sign number 2: Change of Brand Image

Changes in your brand image or company image may require changes to be implemented and reflected on your website. Update your logos as soon as possible, to be in tune with the shift of image or branding. Remember that the website is like the face of the company, where people get their first impressions and make assumptions.

Even if you’re not, establish yourself as the industry leader and adopt new technology and introduce innovative aesthetics to the site. Always provide relevant content to your audience.

Sign number 3: Your web site just looks tired.

Websites are like fashion trends–they can get old. What was really cool a few years ago can now look cliché and old. For example, 3D buttons and interfaces were so cool a while back, then beveled and embossed styles were all the rage. Flash intro pages were popular at one time, and most users enjoyed it. But soon web users got tired of it and wanted to skip and go straight to the content. Flash introductions were great then, but now they look old and pointless.

George RR Martin sure writes good books, but his website looks like something from 1995.

Thing is, what was new and innovative a few years ago will start to look tired soon enough. Nowadays,  the shelf life of the site’s aesthetic is only one year. If it has been more than a year since your last revamping, it’s time to do it now.

So if your website looks old and tired, it’s time for a makeover. Aesthetics eventually evolve, and an old design can destroy a company’s whole image. A fresh and new design will refresh your loyal users’ experience, and at the same time attract new ones. Your focus on revamping the site is to keep your brand image fresh.

Other Questions to Ask

From the perspective of the web user or customer, ask yourself the following questions:

• Does the website give me a favorable user experience?
• Is the website entertaining and interactive?
• Can I navigate through most of the web content within three clicks?
• Can the web users get an idea of the company’s branding and image through the web design aesthetic?
• What are the drawbacks and weaknesses of the site?
• Would you return to the website often–and for what reasons?

Provide relevant content on your website. Be sure that when people come to your website, they get what they’ve come for–information, education, and maybe some entertainment and interaction. Avoid unnecessary elements such as flash intros and annoying banner ads. The web site should be easy to navigate with a user-friendly interface.

Educate and entertain to keep your visitors coming back again and again. Always have new and fresh content on your web site. And, provide information with blogs, articles and pictures. Be sure your web site is searchable by increasing your SEO. Nowadays, content is king, so build on relevant content related to the company’s product and industry.

Content is King

Image by enimal

In the end, the web site you made should be something that you’re proud of. It is the online storefront to the company or business. It is where your current and potential customers go to seek information, and engage in a relationship with your business. For you to survive, you must constantly adapt and go with the flow of the most recent technological and aesthetic trends. Invest in being up-to-date rather than being safe all the time. Ride the wave!

Lately there have been a lot of people trying to hire us to create a website for them, others even ask for quotes and present a short plan that they have made. The problem is we’re not a company that will design and develop websites for clients, we’re an internet publisher focused on writing guides, inspirational articles, reviews, and the lot.

My friends, it has come to this. Many have asked for help and now I will walk you through it all, even without knowledge of coding you will be able to create a website in just one hour after reading this.

Say you have already grown tired of your Tumblr, Blogger, and WordPress.com blogs and you want to move up the scale. What do you do next? Yes, you read this guide!

Remember, you can start your own blog/website now for as low as $10!

Things to know:

Before anything else, there are some small details that you will need to think about. Do you want to have a totally free website that has a fixed set of features? You probably want more power and the option tp tweak things, but are you willing to pay for these options?

First you need to decide whether to create a self-hosted website or not.

Free websites are hosted under a parent domain. For example, there are a lot of websites, or in this case blogs, out there that are used by people for their private ramblings like sampyourname.wordpress.com or testwebsite.blogger.com. These blogs are totally free, but the irony is you really do not have the freedom of bending it to your will. There are limitations involved. But the good thing here is that they are totally reliable and free, also you won’t need any technical knowledge of HTML and CSS, everything is already designed for you.

If your goal is to keep an online diary for your personal life or craft, just the basic things, then using free website/blog services like WordPress.com and Blogger.com, or even Tumblr.com, is highly suggested. You can keep your files safe, no worrying about down time, and most of all they’re totally free. But since they’re free, your site will always have the service’s name (site.blogger.com) attached to your domain and it doesn’t look very professional.

If your goal is to appear strong and professional, and have more control over most things, then your best option is to host a website yourself. Unlike a free website, a self-hosted website requires some technical knowledge, and that is the point of this whole guide.

When should you self-host a website? As mentioned, when you want to have a professional look and feel to your site. Most likely they will know that you are serious about running that website and updating it, since you’re paying for it. Most self-hosted websites are owned by people who are using it for their business, either to promote their skill and services or to make money with it. Just like 1stwebdesigner.com. This is exactly the reason why I decided to write this guide, because people with WordPress.com and Blogger.com blogs have contacted us about shifting to a .com blog. Admittedly, I only replied to a couple of them briefly pointing them to the correct services and websites to read. But now it is different, to avoid further confusing our first time readers I have written a guide to solve this problem!

If you’re still serious about creating a self-hosted website and spending some money, then continue reading.

Before Purchasing Anything

Before you purchase anything, please be sure that you have already decided on what to do. I know that many of the people that will read this are considering it and are not entirely sure about spending money. I know some students both here in the Philippines and elsewhere who are considering spending money to get a website, some have failed and regretted their decision.

Ask yourself, do you need a premium website design?

Choose a Content Management System (CMS)

As the name implies, CMS is software that manages a website’s content. This is actually one of the best inventions of all time. I daresay that 90% of websites in existence today are built over a CMS. Websites like 1stwebdesigner, TheNextWeb, TechCrunch, and a lot more.

I won’t delve too much into what a CMS is, since you’ll more than likely end up using WordPress. 1stwebdesigner is using WordPress to manage all of the photos, articles, and plugins used in this website. Without WordPress it would actually be hard to grow it as big as it is now. But this is just my opinion.

You can, however, choose a different CMS depending on your preferences.

Check out:

• 17 Free Content Management Systems For Better Content Handling
• Showcase of Small But Useful Content Management Systems

Choose a Domain Name and Web Host

Technically, you should be looking for a Domain Registrar to register a Domain name of your choosing. Usually domain names and hosting are purchased together, but in case you want to find cheaper solutions you can buy them separately.

Suggested Web Hosts

These are web hosting companies that I have firsthand experience with. No matter what you do, do not go to GoDaddy.

Below are three of my recommended web hosts. The process is linear. First you will be prompted to select a domain name of your choosing (the name of your website), then the package type, some add-ons, and finally the checkout process where you will pay.

HostGator –  cheap and has a one-click-install for WordPress and other CMS’s. The cheapest plan boasts unlimited bandwidth and unlimited disk space, and hosts one domain. The main take-away for HostGator is that you can actually host your website here for only $0.01 for one month! Provided you have already purchased a domain name which can cost from $8 to $10. Succeeding monthly bills would be around $8. But you can host your website here for one year for only $75.

Use coupon code: “1stwebdesigner” without the “” to get a $9.94 off of your bill!

Currently hosting 1 website here, no problems so far.

WPWebHost – priced just a little higher than HostGator, but the service is absolutely stunning. Their customer support can solve just about anything you can throw at them related to WordPress. One-click-install for WordPress is also available.

Hosting 1 website here too, still happy with it.

ASmallOrange –  for as low as $25 a year you can host a website. For $25 you will get 150MB of disk space and 4.5GB monthly bandwidth. Not bad if you’re planning on a text-based website with few images.

Use coupon code: “1stwebdesigner” without the “” to get a 15% discount!

Also happy with ASmallOrange.

After choosing your web host it’s time to wait. Yes, you need to wait for some time, at best your account is activated within 10 minutes, at worst it will be available after 48 hours (but trust me, I haven’t experienced this yet).

After your account has been activated, an email from the service should be sent to you with the account information with all of the login details for FTP, MySQL, cPanel, and some links to your dashboard. For now just focus on the cPanel.

Setting Up WordPress First Step: Login onto your Control Panel

HostGator Control Panel

This is what HostGator’s control panel looks like. Do not worry, if you think this is too much to handle and there’s too many icons to click, you only need to worry about one..wait, no, you don’t need to worry at all.

That one icon you need to find? It’s the QuickInstall, just scroll down until you can see this:

After clicking QuickInstall you should see the image below. To the left is a list of software you can install, but our main goal now is to install WordPress. It’s the third item to the left. Just click on it and it will prompt you to continue, simply click on “Continue”.

After this you will receive an email with your login details for your WordPress dashboard. In order to login, go to www.yourdomain.com/wp-admin. You will then be prompted with a login form. Just fill in the form and you’re good to go.

WPWebHost Control Panel

This is how WPWebHost’s control panel looks like.

In order to install WordPress, find Softaculous:

Click on it and a page similar to the screenshot below will load.

Click Blogs and the following will appear. Click on where the red arrow is pointing at.

Then the following page will load, and all you need to do is click the blue button saying “Install”.

Everything onwards is pretty easy to understand. A form will appear, asking for some information. I will no longer post a screenshot of it here because you will not need to change anything. Just change the Admin Account details for your user name and password, and an email address so that the system can send your details.

After this you will receive an email with your login details for your WordPress dashboard. In order to login, go to www.yourdomain.com/wp-admin. You will then be prompted with a login form. Just fill in the form and you’re good to go.

ASmallOrange Control Panel

If you notice, most of the control panels look the same with only minor changes on the software/services available.

Once you can see the image above, scroll down until you find Fantastico De Luxe.

Click Fantastico De Luxe and you’ll be redirected to the page below. Click on WordPress, pointed by the amazing red arrow.

Click on “New Installation”.

Then you will be redirected to this page. Just fill in the user name and password, an email address and choose the domain you want to install WordPress to. Don’t forget to read!

After this you will receive an email with your login details for your WordPress dashboard. In order to login, go to www.yourdomain.com/wp-admin. You will then be prompted with a login form. Just fill in the form and you’re good to go.

Congratulations! You have successfully installed WordPress by navigating through your web host’s control panel!

At this point everything is pretty much finished. But you will need to install a theme and some plugins to get your blog rolling!

Second Step: Configuring Themes

Why do you need to install themes? What are themes? Themes are like clothing for your website, each having their own design and features that you can use. There are hundreds of free themes out there that you can use for free, but don’t expect many features from them. Most likely if you are willing to spend more for the best themes you’ll go for premium themes.

Choose and download Free Themes here:

• Hot WordPress Themes For Freelancers For Personal Branding
• Graph Paper Press
• WordPress Free Themes Directory
• Fresheezy
• See more here (this is no longer updated, but most of the links shown here are still working)

For Premium Themes:

• 20 Premium WordPress eCommerce Themes
• 40 Premium Magazine WordPRess Themes
• The World’s Best Corporate WordPress Themes You Can Actually Afford to Buy
• 50+ WordPress Themes for Video BLoggers (contains Free and Preimum themes)
• ElegantThemes
• ThemeForest

Installing Themes

First login to your WordPress dashboard by going to www.yourdomain.com/wp-admin. You will be greeted by this sweetheart, which you should familiarize yourself with because you’ll be seeing it often. Hover on Appearance and click on Themes.

It is important to note that all the themes that you will be downloading are zipped/rar-ed files. Just keep them that way. When the page loads, click on Install Themes and then click on Upload. Happily navigate through your folders to find the theme you downloaded, select it then upload it. After activating it, check your website and it should have a new design.

Congratulations! You have just installed a new theme! Now, what comes next is also crucial to your website’s success: installing plugins.

Third Step: Setting up Plugins

First let’s talk about the necessary plugins that you need to download and install. Note that this is only based on my preference. You can find your own plugins to install, but I’m just giving you an idea as to what kind of plugins to use. So, let’s begin!

Needed Plugins:

• Digg Digg or SharebBar for the social media buttons.
• All in One SEO Pack for SEO purposes. In the most simplest of all explanations, it enhances your visibility on Google.
• Quick Cache to speed up your page loads.
• Google Analycticator to easily install your Google Analytics to your website. Don’t have an account yet? Simply go to Google Analytics and sign up for one! By using this service you will know how many people are visitng your website, from where, and which content is visited by the readers.
• Search 1stwebdesigner for more plugins.

How to Install a Plugin

It’s very easy to install a plugin, either by uploading or searching the WordPress.org plugin directory. First go to the Plugins page by clicking on Plugins.

If you have downloaded a plugin, then you will need to click on Upload and upload the zipped file. If you want to search for the plugin, simply input the name on the search bar and search for the plugin. If you will use the search function, you will be greeted by this:

Simply click “Install Now” and the plugin will be installed. Don’t forget to check the Details to see if the plugin is compatible with your current WordPress version. Talking about that, be sure to always keep your WordPress updated! After installing, just activate the plugin and if settings are available, adjust the settings to your preference.

Congratulations! You have just installed your first plugin! Next and final step would be to add your content!

It’s not a website if it doesn’t have content. Be sure to write valuable information that people can actually use. Never steal content from other websites!

What do you think about this guide?

As always, don’t forget to share this with your friends who are in need, instead of telling them to “Google it!” And also share tips and techniques. Did I make an error somewhere? Please feel free to point them out!

If you are having trouble just write a comment below and I will be glad to help you. :)

For the majority of non-profit organizations, online fund-raising has become one of the most important sources of income, especially the last 10 years. Designing an inspiring and appealing donation page can certainly make a big difference in converting large numbers of visitors into donors. But, unfortunately many non-profit organizations simply overlook this much more mundane aspect of online appeal while paying loads of attention and time in developing innovative and inspirational online content. In this round-up, we are showcasing some exceptionally designed donation pages for your inspiration.

1. Save the Children

This website has a very sleek design with beautifully designated avenues intended for assistance. There are plenty of courses of action for users that could have made it a cluttered mess, but the design keeps it all very well-organized.

2. Keep a Child Alive

This sleek design makes use of large buttons with a variety of ways to contribute to the mission. A slight grungy effect is used in order to highlight areas of the page. Overall the design is simple and impressive.

3. Manna FoodBank

In this website, you can see the use of a natural color scheme that fits with their mission. The call to action button with the slightest change in color definitely stands apart.

4. Red Nose Day

The Red Nose Day site makes use of a simple two-tone color scheme that symbolizes the passion for the mission. The red colors spreading through the donation page drive people to take action.

5. Oxfam

Here the design of the donation page focuses the entire attention on the obligatory mission and calls to the readers.

6. Habitat For Humanity

The design of this website’s donation page is simple and clutter free; and focuses only on the mission.

7. Witness

The Witness donation page is mainly covered with the text and relevant information with a nicely designed call to action button that is placed right at the upper right corner.

8. Make-A-Wish

In this web design, although it is constructed well, there is a lack of distinction for its calls. The blue turns out to be rather awe-inspiring with the amount of information it contains.

9. American Heart Association

This stylish donation page mainly draws the attention of their users towards the calls. They picked their color scheme quite smartly and the subtle uses of white with the blue definitely look great.

10. Giving to Johns

Giving to Johns Hopkins pushes their cause with a very stylish and appealing donation page that stands out mainly because of its alluring contrast in colors on the header and call to action button.

11. Doctors without Borders

This design of a donation page stands out in our collection as it utilized tabbed windows in order to separate the different paths that users can take to dig in.

12. ASPCA

Here is another example of a subtle donation page. ASPCA uses purple for their calls that truly stands out from the overall orange design colors. With such a soft coloring, ASPCA imparts a sense of comfort that in turn eases the readers into the cause and taking action.

13. Susan G. Komen for the Cure

Susan G. Komen for the Cure website uses a brilliant color scheme that symbolizes their true passion for the mission.

14. Natural Resources Defense Council

The Natural Resources Defense Council uses a very simple approach. They bring overly large and bold call to action buttons into play that make their donation page stands out from the rest. This no frills approach puts pure focus on the mission.

15. Invisible Children

The Invisible Children donation page is as inspiring and touching as their mission is. In order to connect with their mission effectively, they utilize large images of the children the world tends to overlook.

16. Donate Life California

This is a somewhat unusual design for a donation page but this one really stands out from the rest of the site because of its pink calls to action buttons.

17. Charity: Water‘s

With the help of this understated design, Charity: Water‘s keeps their donation page extremely simple and focuses only on the mission.

18. Humane Society‘s

Large images and bold buttons are used to draw the users’ attention towards the main cause and convince them to take action.

19. Action for Children

This website has an attention-grabbing, large and appealing call to action area. This call to action area offsets the donation area satisfactorily and efficiently pulls the reader to it.

20. MJFF

MJFF brings warm and inviting colors into play in order to engage their readers. The color scheme works well and the gradient on the actual donate button makes it stand out.

21. The Nature Conservancy

The Nature Conservancy uses a quite unusual approach for their donation page. They placed two subtle calls under the header where users are likely to expect the navigation to be.

22. Kiva

Kiva has a very simple, sleek donation page that focuses on several routes to help users. The boldly colored call to action buttons are truly attention grabbing.

23. Operation Warm

Here you will notice a nice, friendly color scheme that varies throughout the page. Though the main calls to action mix together with a majority of the site because they are the same color while the secondary calls are a bit more obvious because they break from the blue.

24. Mozilla

Mozilla features a delicate donation page design with an innovative header that accompanies their website. Their fans and users can donate to keep their mission active.

25. Network for Good

Network for Good has got a fantastic design that possesses three courses of action that their readers may pursue. Each of them holds a large, attention-grabbing call to action button.

26. Virgin Money Giving

Here is a unique donation page that is divided into categories in order for users to find the kind of charitable organization they are seeking to support.

27. Planned Parenthood‘s

Here a form is used for the main appeal with more subtle calls placed in the upper right corner. Overall the design is simple and effective leading the reader into the ‘action center’.

28. World Food Programme

World Food Programme uses a very subtle design for their website with an online form to help their users donate for their cause to keep it alive.

29. Red

In this web design, you will see minimalism in a new style as this donation page features overly large typographical elements that truly work well to draw the users’ attention to the action areas.

30. Amnesty International

Amnesty International design of the donation page focuses the entire attention on the obligatory mission and calls to the readers.

31. Dalit Freedom Network

Dalit Freedom Network uses a very natural and earthy color scheme that works well with their mission along with eye catching and appealing call to action buttons.

32. Take The Walk

The boldly colored call to action buttons in this design truly stand out from the other donation page designs. The color scheme is also very appealing.

33. Practical Family Living

Another excellent example of a subtle donation page design that works very well for the mission. All the design elements are in perfect balance making this design stand out.

34. Housing Works

What makes this design stand out is its excellent color contrast as well as call to action button. Housing Works pushes their cause with an extremely trendy and tempting donation page.

35. Children’s Rights

Children’s Rights donation page is designed by keeping the overall design simple and clutter free. The call to action button is moderately sized and positioned at the center of the page.

37. Project Rescue Foundation

In this web design, you will see a unique approach for designing donation pages. An online form is also there to help you donate to their cause.

38. Custodial Abuse

Here they use a large image to connect with their cause in a simple but effective way as they are working for a very sensitive cause.

38. Memphis Zoo

This rather remarkable design for a donation page truly stands out from the rest of the site due to its excellent and vividly colored calls to action button.

Have you ever thought that the reason behind you not getting any design jobs is not the amount of skills you have, but the résumé you send to companies? Think that when companies post job openings hundreds of applications come in day by day and the HR manager needs to sort the bad ones out first. What if your résumé, even if you are a great designer, fails to make the second round?

The goal of the companies is to determine if you really are the person on your résumé, and they do this by first looking at your basic skills. Most of the hiring staff only want to contact applicants on the phone, because this is easier for them and more effective, so they will try to get you on the phone soon after your CV passes the initial basic requirements.

They also look at how dynamic a person is and try and determine a bit about their personality – previously working in groups is an advantage, as graphic and web designers have to do this every day at their jobs. If your personality and the basic skills get the OK, then the HR manager will probably ask technical employees more about your coding skills. Although it is a very quick process, it all starts with your résumé and if the one you submit is not good enough, you will never get a phone or direct interview.

1. Tell them where to find you

I do not mean your home address – this is something you should have in your CV anyway. I’m talking about your portfolio. If I want to hire somebody, I definitely do not want to spend time searching for him on Google. I am not hired to do this, if you are not smart enough to provide it yourself, your CV goes to the shredder. List your web page in the header of your résumé, so it is the first thing the hiring staff notices.

Keep in mind you also need to show your work. If you say you are good in HTML5, the company needs to be able to be convinced before you will be called for an interview.

2. Follow people to stay in touch

An important asset of a job candidate in the design field is to be in touch. It is important to use websites for inspiration, to follow other fellow designers on Twitter and exchange opinions with developers. Many companies ask during the interview who you follow in the design industry, either on Twitter, Dribble, Facebook or other media. I am not saying you should prepare an answer only for the sake of it, I am saying you should actually follow people in the industry.

Another question you might get asked is what did you do in the last year to become a better designer. This is a key one because it will show your potential employer you are really interested in what you do and are passionate about it. Moreover, it will show you continuously work to improve yourself and this is something managers like to hear. You can take different courses on the internet or pay for subscriptions on Lynda.com. Code School and A Book Apart are some other great resources you can use.

Image by Lifetracks volunteer group.

Your résumé should show that you are interested and look to grow as a designer or developer. You should be able to adapt to new techniques and show that you always have a hand on what is new in the industry.

3. Notice the job description

When applying for a graphic designer job, knowing ASP.net doesn’t help too much. It is an advantage, but it is not what you will be evaluated on. It is a good idea to write a personalized cover letter for each job you apply for; make sure it is unique and reflects why you wish to work for that company in that specific opening. Although you think they will not, I assure you HR managers notice when people send mass e-mails, so as said before, avoid doing it. You can create a good, strong impression if you write a unique e-mail to each job posting – as a matter of fact, as all of them are different, it would be stupid to send the same application to all of them.

4. No signs of experience

How do you expect to get a job if you have no experience in the field you apply for? I am sure there are job openings for inexperienced people, but they do not mean newbies. If the work you did before is not something you are entirely proud of, you can always create your own project. Use your skills to create a template and sell it on ThemeForest or any other similar website. Do you have a lot of client work that doesn’t show your creativity? It’s never impossible to make something on your own – a hiring manager will appreciate the fact that you design in your free time as well. If you think your portfolio can be improved, do it before sending out your résumé.

Image by Susanne13.

5. Show you are a designer

When you send out a CV for an engineer job, it can be a basic word format with no template. But when you apply for a design job, why not put your creativity skills to work and make a great template for your résumé? If you are able to design a stunning template for your CVs, this will scream creativity, care and attention to details and will move you to the top of the list right away. If you don’t have time for this, use a digital tool such as Zerply. The templates they offer look great and the portfolios uploaded there are very easy to maintain. Another tip is to send PDFs instead of Word documents and sending out your whole website (if it works as a classic résumé) can be effective as well.

Conclusion

These were only a few basic tips to improve your CV. Remember that while there is no direct contact between you and the company, the résumé is the only piece of work that will bind the two of you. It is always worth spending two hours on building a stunning CV than using two hours for sending out default templated résumé.

Keep in mind you need to show creativity and willingness to improve and your résumé will pass into the second round. Now if you are a good designer and have the necessary skills, you will pass through the third round and will be able to meet the hiring manager in person. But tips for a face-to-face interview another time…

Until next time, let’s stir up a discussion here. Do you have some other tips to give all of us for improving our CV?

You don’t like working for others and wish others worked for you? Are you also attracted to the idea of working with lots of people and multiple personalities? Then going for your own design company is something you might want to look into.

Starting a web design business might seem something anybody can do, but is definitely a difficult task. Note that this discussion is purely theoretical, if you wish to read a real opinion, then find someone who owns such a company and ask him how it was in the beginning.

The difficult part about starting your own company is that you need to be patient – the good stuff comes to those who wait. It is a long-term commitment and results might not come right away. Actually, it might be a bumpy ride up until the results come; or worse, they might not come at all and you will fail miserably.

Image by kristja.

In the beginning it sounds nice. You are your own boss, make lots of money and do pretty much nothing besides sign papers. This might be the life of huge company owners (although I would like the right to disagree), but it will not be yours. You might have to work even more than your own employees, you will not really make that much money and yes, you will be your own boss, but the clients you work with will still decide whether or not to hire you – they have the money, right?

Statistics say 80% of new businesses disappear within their first year. It takes a lot of determination and it is not the path to take for people without drive and stamina. If you’re still reading and think you have a fairly good chance of being one of the 20%, then continue reading, this is for you.

Owning a company

Great, are you ready to embark on this journey? Then you need to know things will change for you. Your career will not be a 9-5 job and won’t even be similar to the bits of freelancing you experienced before. Expect to get a feeling of accomplishment when things happen as you wish them to – expect to put your head down and be disappointed when things don’t turn out the way you want. Now you are on the other side of a business. You control what is happening and you give jobs, order people around and decide on wages. Landing a big project will mean much more for you now than if you were working in an agency, where you just get assignments and, when you deliver them, you get new ones. Your life has changed!

Now you can also employ people and let them do your work, while you spend time with your family or doing whatever else you wish to. However, most designers or developers who start their own businesses have no, or a limited, amount of money in the beginning and choose to do some of the work themselves, to save up until they have a bigger budget. You will most definitely have to do this in the beginning, unless you find a partner who is willing to contribute to the finances.

Advantages of owning your business are many. You are able to schedule your own time and have more freedom to experiment; even more freedom to hang out with your friends. You get total control, price up jobs as you think and have a different feeling knowing this time everything you do is for your own purpose. You are in charge of everything. But challenges arise at any minute too…

Get ready for problems

The first part of the article was about the nice stuff. Now it comes the ugly. Just because you are a great web designer doesn’t mean you are a great entrepreneur. There is a whole new path for you to learn and there is not much free time for you after you throw yourself out there. As in freelancing, you need to be able to motivate yourself and the ones you work with and be the boss, not just a friend or co-worker.

Unlike in a company, there is no one who takes care of other things for you. Unless you hire people for it, you will need to do the bookkeeping, taxes, client meetings, project presentations, project management and so on. This doesn’t allow too much time for hanging out with your friends.

Image by iprole.

Working on your time and whenever you want is an advantage – like in freelancing. But in both careers you need to be able to motivate yourself and start working right away instead of doing laundry or walking your dog. Also, you need to be good at following a schedule. If you slack off a day, the second day you will find yourself in a lot of trouble. Distractions are also something difficult to deal with, from social media to e-mails and, if you work from home, to kids and family members.

Maybe the most time-consuming task is email. This time you need to create them yourself; from scratch! There are no short answers to your project manager anymore. Now you are also in charge of communicating with the client and there is a reason why every company hires specialized people to do this – because it requires special skills. Now go and ask yourself, will you spend the necessary time to learn them or will you hire someone to handle the external communication? If you prefer to do it alone, get ready for some difficult challenges. Not every client is a joy to work with and you need to learn how to get the best out of them. Your job will be even more stressful if most of the clients are difficult to work with – and you probably already know most of them are difficult to work with.

Some good tips I can give you for when you decide to start your own design company is getting an accountant and focus on smaller tasks. Having an expert to keep control of all the stuff you have no idea about will pay off because it will allow you more time for the things you know how to do. It is not really possible to keep track of everything and doing both administrative and technical tasks will only give you sleepless nights.

If you are out there always looking for clients and you do it well, keep doing it and hire somebody at the office to actually turn the ideas into projects. Chasing clients and doing the work is quite impossible to do at the same time. It is possible for freelancers, as they have more free time than you do, but don’t forget – there is no real free time for you in the following months or even years. On the other hand, if you’re really good at completing the design briefs, then do that and hire someone else on commission to land projects. All big companies have several departments for a reason: keep sales, finance, design and technology apart from each other.

What’s in for you later?

Now we talk about the future. What are your opportunities in the future? Well, there are actually only two: success and failure, but we all know failure is never an option. Forcing yourself to be successful is the only way to actually reach your goals. If in the beginning you only run a business, in the future you have the opportunity to own it and hire people to run it – this is the dream, I would say. It is as far as it will go for you.

Image by cobrasoft.

You will pick up business skills along the road that might help you get back in with another agency. If at some point in time you wish to start working again, nobody will reject you – with the experience of leading a small project to running a company everybody will be delighted to have you around.

If you fail, however, the only thing you can do is go back to an agency or freelance. You can still have the company on your CV, but is it really worth? How likely are you to get a job if you state your small business failed? If you disagree with this, you are more than welcome to share your opinion with us; I would love to hear them.

Bottom line

Well, now you’ve heard it all. You know what is good about owning your own business and you know what challenges to expect. I would be glad to hear that some of you still want to pursue your dream or maybe start or continue on this path. I can’t wait to hear about your results.

Until next time, let’s hear your opinions on the topic…

Time to Ruby dooby do! It can take a lot of time, and be quite boring, to learn a new programming language. A .Net developer will jump up and say why should I even learn it? I am a professional .Net developer and my day job doesn’t give me time (and scope) to learn a new programming language. But, it isn’t like that. You learn a lot with new programming languages especially when they are a refined version of other optimized ones. Ruby is that sort of language. I agree that the transition from being a noob developer (in a particular programming language) to a pro is arduous but you will appreciate the experience. As of now all that I can do is let you guys know that if you stick around with Ruby then you won’t be at a loss. Just be positive.

Note: Consider this article to be a very basic discussion on Ruby (the programming language) and Rails (an application framework). My basic goal is to introduce you to Ruby and give you that initial push which is required when learning a programming language.

What is Ruby?

Ruby, as I said before, is a refined combination of various programming approaches. Ruby is the perfect mixture of python’s easy to understand flow, Smalltalk’s elegance and Perl’s easy to learn syntax style. Ruby is a high level object-oriented programming language (as is the case with most of the programming languages these days) which came into existence in mid 1990s in Japan. With time Ruby has started to become more dominant in the U.S. and Europe too.

Ruby is famous for its dynamic type system and automatic memory management. By dynamic type I mean that most of the type checking in a Ruby program is done during run time which means you don’t have to worry about integer and string types. Ruby will do that for you. We will see more about this in a short example later.

The basic purpose of launching Ruby was to make it easy for humans to interact with machines and understand codes. Yukihiro Matsumoto, the father of Ruby, insists that Ruby was designed for programmer productivity and not for machine optimization.

Often people, especially computer engineers, focus on the machines. They think, “By doing this, the machine will run faster. By doing this, the machine will run more effectively. By doing this, the machine will something something something.” They are focusing on machines. But in fact we need to focus on humans, on how humans care about doing programming or operating the application of the machines. We are the masters. They are the slaves. – Yukihiro Matsumoto

What is Rails?

Rails is an extremely productive application framework written in Ruby by David Heinemeier Hansson. It is said that developing a web application on Rails is ten times faster when compared to that of a Java based web application framework. Rails is open source (of course!) Ruby based framework that can be used for easy (and fast) database integration.

Rails is famous for over-the-top ideas which resulted in shunning conventions and picking up dynamic programming structure. The basic application code and the updated database will always contain everything that Rails will require to execute a program from start to finish.

A Basic Ruby Program

See how interesting (and easy) things will get after this:

Code:
personal = “I don’t love my girlfriend”
puts personal

Output:
I don’t love my girlfriend

Yep! That will actually be it to print an output in console. No initialization, semicolons and main methods.

Now, let us see a quick difference in programming between PHP and Ruby when we have to reverse a string:

PHP:
strrev(“string”);

Ruby:
“string”.reverse

Voila! Your string will be reversed in no time. See the difference in effort in both the programming languages. A Ruby based programming language will make it easy for you to write a program. It is more like writing in English than in coded language. It is the future of programming languages.

Advantages of sticking with Ruby (and Rails)

I know the world of Ruby is big and I haven’t scratched the surface of it but a blog post will prove to be overly small to dive into the world of Ruby. Henceforth, let us directly go through the advantages of Ruby:

• Elegant - As I have pointed out before, this happens to be the strength of Ruby. As a programming language Ruby is super elegant and almost like English. It is this similarity to English that makes it easy for noobs to take on Ruby without being afraid of it.
• Concise and Powerful - Our example above itself explains how concise a Ruby code can be. As short as it can get. Also, Ruby is as powerful as any other language as it is Object Oriented High Level Programming Language just like other trendy programming languages.
• Never Reinvents the Cycle - Rails (based on Ruby) is one programming interface that will never let you reinvent the cycle. It generates codes that can be reused over and over.
• Built in Testing - Rails is famous for its harness and fixtures which act as supporting codes that will make it easier for programmers to write their test cases. Also, Rails creates simple test stubs that can be extended by programmers.
• Dev, Test and Prod Environments - Rails smartly starts your project in three different environments namely Dev, Test and Prod. All three environments behave a little differently from each other and each complement the original software development life cycle.

The Showcase

Now, let us go through some of the websites (really famous ones) that are using the overall strengths of Ruby. You will see how designers are taking their websites places with the help of Ruby.

43Things

A List Apart

Basecamp

CrunchBase

Github

Groupon

Hulu

Scribd

Slideshare

Yellow Pages

Conclusion

You are not done yet. You really aren’t. Hang around with Ruby and keep riding the journey on Rails. Someday you will call yourself a Ruby Pro and who knows, your article might just come in handy for me. Ruby has its disadvantages and the most obvious of them all is the that it is very new to this game. It is still evolving and has a lot to prove. Still, we know that it is going to go places. Now, it is in our hands. Either we can wait and let it grow or else jump in and evolve as an expert when their is high demand for Ruby professionals.

Did you know that every second delay on page loading results in a 7% reduction of conversion rate?

Actually you lose 7% (maybe even more!) of sales without even noticing… Sounds bad, huh?

I mean, you work carefully to put things in the right place, good call-to-actions, nice design, spend a few bucks with ads.. And then you lose 7% of sales just because you forgot to minify your CSS. We’ll, this is not going to happen again.

We’ll put every future project that you work on a diet. And this one, won’t wait for next monday, or next january :)

Here we’ll see amazing tips to reduce your files size and increase your site performance without affecting important things like image quality or a files readability for future edits.

Grab your meter and let’s rock!

Every Second Counts

Before the practical stuff, I would like to share with you a few numbers about page loading X users satisfaction.

I saw this infographic several months ago, but it’s still amazing. Click on it to see all the data, here’s what I liked most:

• If you hit 4 seconds of page loading you have 25% abandonment increase
• About 80% of users expect mobile pages to take almost the same amount of time as the desktop version

Credits: Kissmetrics

Image Optimizing – File formats & Tools

So, the best way to optimize images starts with using the right file format. Basically we have 3 common formats for web (no, I won’t talk about .bmp, .svg, .tiff or anything else):

• JPEG – Really good for photos and bigger images
• GIF – Good for icons and images with fewer colors
• PNG – Good for small images with a lot of colors or when alpha channel is needed

This is really just the basics, there is a lot of particularities for each image type that we won’t be talking about (right now). But you should be good with this, when you are exporting a psd to code a layout you should use .jpg for photos or bigger backgrounds, use .gif for smaller elements or elements with a restricted color palette (like simple icons or replacements for common inputs) and png where you can’t lose any data or small colorful images.

I know many people say that png are bad and too big, but actually if you know how to use them they can give you a better effect (exactly what you designed) AND smaller or similar file size as gif or jpg.

Let’s see some tips for each image type:

JPG Minimizing

JPG does “lossy compression”. That means that its algorithm stores data using much less disk space but will also save less info about your original file. Once compressed it’s impossible to decompress .jpg files. Your best choice in this case is to always keep the original file safe and just save copies.

Ideal quality for jpg is pretty tricky, but most times you’ll be good with 60-80.

When you take photos your camera stores metadata about the photo that you may not use in future. Also image size is often bigger than your entire screen. So get rid of useless data and reduce your image to what you really need.

Irfranview is a small tool that can do this for you even as batch conversion for lots of files.

Recently I heard about an amazing tool, called JPEGmini. They have an amazing compression algorithm that works pretty much like our eyes do, so it makes what gets our attention higher quality and what doesn’t, lower. You should give it a try!

GIF Minimizing

GIF files have a really small color table, ranging between 2 and 256. 256 may sound a good figure, but when you realize that jpg has up to 16 million colors, 256 isn’t that good, huh?

What you can do to cut files size is to reduce their color palette. Above is an example where reducing a file from 128 to 64 colors we saved almost 30% of file size.

PNG Minimizing

PNG compression is similar to gif compression. You reduce the color palette and gain a few kbytes. In above example, png-24  instead of png-8, would be a huge file since it’s completely lossless, so you would have a perfect image, but pretty big.

The best part of png-24 is full alpha channel, but we can handle that. Image Alpha gives us full alpha channel over PNG-8, so we have much smaller files but pretty good-looking for overlays and advanced effects.

Code Compressors – HTML, CSS, JS

Actually I’m not too much a code-compresser type. But images aren’t the only thing we should care about in our websites, HTML, CSS, JS files should be compressed too since they can eat precious bytes from your diet.

Let’s take a look at a few options:

minify – PHP solution

HTML Compressor

YUI compressor

HTML Minifier

Server caching

Another good way to improve site loading is server-side caching. If you don’t use cache your page needs to be processed by the server every time it’s accessed, even if you don’t change your site for ages.

So, here are the best WordPress Caching plugins:

WP Super Cache

W3 Total Cache

DB Cache Reloaded Fix

GZip, a.k.a. Compression Like a Boss

I’m pretty sure you’ve heard about zip files. Or maybe .rar files or .7z files. Well, GZip is an implementation of GNU Zip, which does pretty much the same thing as ZIP files, but gives you a really good compression rate.

The crazy idea here is to drastically reduce download time by sending users compressed files, instead of the uncompressed original ones, and their browser will handle the decompressing in much less time than if it had to download original files.

Your hard work here is to paste this code into you .htaccess file:

#Gzip <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> #End Gzip

Then you’re done! Well, hope it doesn’t take you more than 5 minutes :)

It appears that the world has just gotten better with the introduction of Content Management Systems like WordPress and their customizable themes, but in order to create a fully functioning WordPress theme you’ll need to be knowledgeable in both programming and design, right? Many people don’t have all the required knowledge and skills to build a custom theme from scratch, and that includes yours truly. There are many designers out there with great concepts for themes, but their works only remain as JPEGs or PSD files. Good thing there is Divine Elemente that can semi-automatize the conversion of your PSD to a functioning WordPress theme.

Don’t forget to read through, there’s a CONTEST waiting for you here. Winners will receive a  License key! We will be choosing 3 winners! Brought to you by Divine-Project.com.

Note: To begin with, you will be seeing a lot of product and service reviews from now on. I would just like to point out that we take this seriously and we review them absolutely for free when we deem the product to be very useful and innovative. If you are a developer or know someone who is, that has an awesome product/service then contact us!

Divine’s Elemente is a new program that is still under careful development and is definitely a one of a kind program that many designers have been dreaming of since WordPress became mainstream. Open Google and search “PSD to Theme” and you’ll end up seeing Divine-Project.com as the top result, followed by services like CodeMyConcept that you have to pay for.

Previously, the main go-to guy for designers are coders or services like CodeMyConcept. I have to admit that when I first heard about Elemente and what it does, I was skeptical. I mean, people once thought it would be quite impossible to use drag-and-drop software to create a website, right?

The first thing you need to have is the creativity to design, then you need to have Adobe Photoshop. Currently Elemente only supports Adobe Photoshop. When you already have your design in place, the only thing you need to do now is to convert it.

What I Like About Elemente

1. It’s cool design. Black and aqua (pardon my ignorance, I can’t specifically name the colors). This is more of a personal opinion. I’ve grown tired of software interfaces having only black and white. Elemente’s design is refreshing, and sometimes even soothing.

2. Spoon feeding. No coding required. Literally everything you might write in a CSS or PHP file is already in here. Including adjusting the size of the template, size of the content area, header, and sidebar.

3. Solid documentation and an active online community.

4. You can literally create a WordPress theme in less than 5 minutes if you already have the design.

I have no problems with Elemente, aside from the pricing which I cannot afford, but that is just me. It only works on Windows, but there are talks that they’re working on making it available for Mac. Pricing starts from $139 for a personal license and $199 for Theme Developers, having unlimited website accounts and a 90% commission on the Themes Marketplace.

Wait, they have a Themes Marketplace? Yes. You can actually make a living just creating themes and selling them in the marketplace. You can even sell your themes on other marketplaces like ThemeForest, although I believe you’ll have to do some customizing to be in line with their guidelines.

Elemente is not hard to learn, all of the things you need to know are laid out in front of you, all you have to do is read first before trying anything or risk the chance of getting lost.

How it works

Below I will briefly walk you through the software.

Important! System Requirements

• OS requirements: Windows XP, Windows Vista, Windows 7
• Photoshop requirements: CS, CS2, CS3, CS4 (32 bit), CS5 (32 bit)

On the screenshot below you will see that after clicking on “Create a Blog Layout”  I was welcomed by a built-in guide.

Step 1: Create a basic layout 

Choosing option 1 will lead to a default layout that is filled with elements you can find in most themes. There you can add and remove the elements that you won’t be needing. This part is pretty much full of clicking and tweaking, manipulating the layers. Do not be disheartened when you try it yourself, since you will only be looking at black and white text and cells. Remember that this part is where the skeleton of the theme is made.

Above you will see the main layout that you are free to edit. You can remove elements that you will not use on the theme. Sadly, I was confused at first so I will mention it now, that this is not the part where you move the elements around. Just leave them where they are.

Adjusting the Grid

This is where you adjust the size of the header, footer, post, sidebar, and content. I had fun playing with the sizes because it’s so easy!

Above the Grid blocks you will see “Create PSD”, this is what you’ll be clicking once you are satisfied with the adjustments you’ve made on both the grids and the elements of the design.

Adjusting the Elements

This part is where you adjust the elements shown on your layout. By checking and unchecking the items, you are adding and removing certain elements that you won’t be needing.

Step 2: Put graphics to groups

After laying out the skeleton of your theme, it is now time to place graphics. It’s pretty much a dress-up game where you apply the graphics to their designated places. Yes, that is all.

Above you will see how it works. The first image is the un-adjusted and the most basic layout which you can see on Step 1 under the name Billboard. The second image is the finished one, added with graphics. It’s just like tracing an image and making things fit.

Step 3: Adjust properties & publish

This is the part where you add the links, SEO stuff, ALT, CSS, meta information of your page, Google Analytics ID, change the background color if you fancy, margins, and a bunch of other stuff that can affect the entirety of your theme.

After publishing, your theme is now ready to go.

Free Themes created using Divine Elemente 2 muchwires

Download It Here

iPhone

Download It Here

But don’t take my word for it. Try it for yourself. Elemente has a 30–day trial that you can use instantly, just download and install. Don’t forget to tell your friends about it, I’m pretty sure many will find it very useful!

Contest

I know many of you have been waiting for this, and that many of that many actually just skipped through the whole thing above (I assure you, there’s a very vital piece of information in there that will make or break your chance to win a license key!).

How to join:

1. Register using our form below. Why? So that we’ll have an idea how many people will join and so that we can contact you for future design contests! Isn’t that cool?
2. Design your template using Adobe Photoshop
3. Download and install Elemente trial version
4. Run Elemente and convert your PSD to a working WordPress theme!
5. Submit your entry on or before February 18, 2012

• submit a zip file containing everything to rean [at] 1stwebdesigner dot com
• write your full name in the body of the email
• don’t forget to include your portfolio website (wow!)

Rules:

1. The design should be yours.
2. Only one entry per person.
3. Trolls will be banned from future contests.

How to Win:

After gathering enough submissions, we will be posting them here. The 3 submissions with the most votes will win a license key from Divine Project! So, how do you gather more votes? 1stwebdesigner.com receives hundreds of thousands of visitors a day, if you’re lucky, many people will see your design and vote for it. But it does not stop there, you can call on your friends to vote for you, provided they have Van Gogh’s eye for art!

Remember, this is the first contest of our explosive 2012!

Most freelancers out there work as a freelancer either because they are in need of a job or they want to increase their skills and improve their portfolio. But have you ever thought about the fact that all of us do it for money too? Now some of you might disagree with me and I fully encourage you to do it. Then I also encourage you to go out there and work for free, while marketing yourself as a volunteer designer. After three months come back to me and I am sure you will agree that you freelance for money. If we wouldn’t need money to survive, we would probably not work at all.

Now I am not saying all freelancers are focused on the money. Some of them are not even full-time freelancers, but do this as a hobby after their normal 9-5  job; but even they charge money.

Image by caltiva.

So you might ask yourself now and then, how much should I charge the client? Should I charge him by the hour or maybe a flat rate per project and should I ask for milestone payments or not? At some point you will find answer to all these questions and then the supreme one will come: how can I charge my clients more than I do now?

This is a difficult question to answer because the internet is a relative new domain thus unknown to many. Sometimes it is difficult to even convince the client that the sum you ask for is actually quite decent – how will you manage to convince them to pay even more?

Now I know many freelancers prefer to work for a lower fee to get the project, than ask for an outrageous sum and not get anything. I totally get it. I’ve found myself in this situation many times. Sometimes I still do. I probably always will, but if you are able to land your dream project, money shouldn’t stop you. However, we’re not talking about dream projects, but about the normal, weekly design or development assignments you can get.

The main question

The question you will always have to answer is how much is the client willing to pay. Think of the importance of your job, which is also the criteria used in any other business to determine the salary of an employee. You also need to think about how much demand there is for the kind of work you do, and how many other people can do it. While you can be a genius at comic book design, there might not be anyone interested in them anymore, as they are not profitable. Moreover, there are so many designers out there who can do the same job and there is always someone out there who can outclass you, that landing a huge project is highly unlikely for the average freelancer.

Image by immrchris.

How much to charge

The first step is knowing how much you are worth. You need to determine how much you can charge and the way you do it (per hour or by project). Think of costs versus profits, your experience and skill level and the demand we talked about earlier. Then try to research the market for and see how much a designer in the same situation as you would charge. There is no shame in asking other fellow freelancers how much they charge and set your price accordingly.

If, for example, the demand is very high, which means more people are in need of your service than you can provide, you can ask a higher price and you will get it. But consider that unless you do something really special, this is not the case, as the market is saturated with professional designers and developers with years of experience. And talking about experience… consider it when setting your prices as well, because it matters, regardless of what many nut jobs in the field think. Would you like to be operated on by a surgeon on their first day, or a surgeon with more than 30 years experience?

Consider who you work with

It is also rather smart to know the client you work with. This is not easy to do all the time, as many clients you land are new to you, but just think of it for a while. If you ask $1,000 for an integrated blog, to an individual it might seem too much for him, but you might get away with $3,000 from FedEx or Coca Cola for the exact same product.

Most freelancers start low, with small companies and individuals, build their portfolio and then thanks to this, and their experience, are able to land higher clients who will pay more. This is the normal path. Hoping to charge hundreds of thousands dollars per year in the beginning is unlikely to happen – there are designers with more than 20 years experience out there who don’t earn that much.

Market yourself and your products

Selling you and your products is crucial. The way you do this will affect your final price. But knowing how to sell yourself and your skills will definitely help you get away with a bigger paycheck. You are in charge of developing products and also in charge of marketing yourself and landing clients. This is not easy to do because you need skills in two areas of the web, but knowing how to properly use these skills will give you an advantage over the others.

Many freelancers out there undersell themselves because they want to get hired. As said earlier, they would rather work for a small fee than not work at all – which is a normal way of thinking. But for how long are you willing to work for lower wages than the others?

Image by Cognition Coach.

It is very easy to spot in a supermarket two products from different companies (with the same ingredients and same weight) that are priced differently, only because individuals place more value on one than the other. To give you a more familiar example, consider an Apple computer and a PC. Or to go even more in-depth, consider a Sony Vaio laptop and an Asus. They do the same thing, both of them have the same warranty, the Asus might even have better specifications – but the Vaio will always be more expensive.

Underselling yourself is strongly linked with this principle of undervaluing yourself to the client. If you don’t undersell yourself, the client will not think less of you., always be confident about what you can deliver.

There is no shame in negotiating your prices down – everybody does it. But try to stand by your standards as much as possible and always have a clear minimum that you don’t go under. You might lose some clients now and then if you negotiate strongly, but don’t be afraid of doing it. The clients who will accept your demands will respect you more and we all know this can lead to further collaborations.

Show you are a good guy

This is much easier than you think. It has something to do with knowing how to sell your products and knowing something about selling in general. Just ask salespeople how often they use the “and there’s even more” technique. The main idea is to make the client think he gets a good deal. Little does he know you would have charged the same amount regardless, but at least you look like a good guy. Let me explain:

Let’s say your price for developing a customized CMS plus customized graphic design is $750. Now you go to the client and tell him you will develop a customized CMS for him for $750. And there’s even more; you tell him that for an additional $250, you will also throw in the design for his web page. The bottom line is that now you get $250 more for the same products, and all you did was pull a simple sales trick. Tell him that if he is interested, you will do both for only $750, as you are really excited about working with him.

Image by jnobles100.

What did just happen there? You still get $750, your original asking price, and you still have to develop exactly the same products, but now you seem like a good guy and the client thinks he got a deal out of you. Not only did you get the client, but he will also recommend you to others and we all know how much viral and word of mouth marketing means.

Explain everything in detail

Laying out every detail to the client is important, especially when working with clients who don’t know too much about the web. They might search Google to see what a development process entails and realize it would be much easier to hire an expert than try to do it themselves. They just don’t get it and don’t care about it, it is not their business.

Therefore you might want to explain to your clients what your products mean. Explain to them why you charge so much, put everything on paper, from domain and hosting costs to each hour you spend on developing the website. If you show them in detail why you charge as much as you do, it is an increased possibility that you will land the project.

Image by Winter Bicycles.

Keep in mind you don’t do this because you are desperate to land the job, you do it to help the client. You will earn more gratitude by treating them with respect and they will appreciate you even more after this, because not everybody takes the time to explain the process and what the client is actually paying for.

Bottom line

If you expected me to tell you precisely how much to charge during the course of this article, you were obviously wrong. I can’t tell you how much to charge because it depends on many internal and external factors and there is no way for me to discuss this with each of you individually.

The conclusion is that very few clients will pay less than the market dictates. You can try whatever you want, you will not fool many. Don’t ask for outrageous prices and always remain within the market price range. Selling yourself properly is what will help you charge closer to the higher end. Always make the customer feel like he gets a great deal and that you do something for him by developing these products, not him for you by paying. Don’t forget to treat every single client with respect, this is what will bring you more referrals from him in the future, and keep you in their minds when they have any projects in the future.

How do you try to set your prices and when do you think is the right time to start charging more? Are you pleased with what you get or you would like to charge more, but the market does not allow you?

And here we are again, trying to bring you a couple of laughs.

Our superhero Webster continues his pursuit for the best client, and we all know that he’s quite far from it yet, right? :)

We have two more short stories of Webster’s life (which is kind of similar to ours, huh?) brought to life by Jamie Sale! We’ll be talking about crazy measurement units and clients who want to be web designers.

So, Let’s rock!

This Big

The developer client

What would you do?

So, if it were you, how would you respond? I’ll explain what works for me in these situations and if you are in a good mood, please share your experiences with us in the comments.

Pixels, Inches… Which is the best?

Actually, neither.

With so many responsive designs, and a lot of other crazy and unpredictable screen resolutions out there, your safe bet is: Design fluid, responsive layouts, then the size doesn’t matter.

I know that your client may say crazy things like “I want it 10 inches tall” and you could actually try to convert this to pixels (tip: you use DPI for this conversion), but in real life what really matters is the best format for each output.

Think about how people are still trying ad formats for mobile, and in the meantime desktop ads are changing too (like google punishing “above the fold” ads). Maybe we’ll experience different formats every day. That’s why people want different ads for different devices, using the same ad as you would for a desktop based site won’t give you the same results.

So the real topic being discussed here is not about “Pixels versus inches” (since we all know that inches aren’t the best to work with as a measurement on the web). The discussion is about “Pixels? Fluid? Responsive?”. Maybe you should try to explain these concepts to your client, dear Padawan. Actually soon there will be no absolute measurement on web.

So, you want to be a Web designer?

Actually, simple tools like Word, PowerPoint and Paint may be good to share an idea. For some users they are good to help express themselves better and help you as developer understand which work flow will work better and maybe even play with those simple tools to show the client that you understand how they process things.

But whenever your client shows up with a .doc file you must tell him what it is: just a sketch. You may (actually should) consider his ideas, but let them know it doesn’t save any development time (maybe save you re-work hours).

I’ve had a client that really thought that I just pasted his .ppt file into an html file and everything was good. He didn’t even notice that what I used from his file was just the basic structure.

Those tools aren’t good to do real design so don’t let anyone waste too much time creating complex things using them thinking that it’s useful. If it has more than three colors in it, it’s a waste of time.

We all know that there’s a lot of other things that should be done before we can call it a website. But does the client?

You could explain your whole development process and where each tool is used, and where they definitely aren’t. Here is mine:

• Idea, brainstorm and main concept – Simple text editors (word, google docs), mind maps (mindmeister)
• Sketches and Wireframes – PowerPoint, Photoshop / Fireworks, wireframing tools (mockingbird)
• Final design – Photoshop / Fireworks
• Code – Notepad++

This is the main idea, but you could even break “Design” and “Code” steps down to show how much work is required to complete the project.

It’s your turn!

Have you seen something like this? Do you have any fun stories to share? We’re waiting for cool stories to publish next month!

Just go on and comment! :)

There is hardly any niche website that cannot be powered using WordPress. Of late, WordPress is being employed to power different sorts of websites — video galleries, online portfolios, information directories and, more importantly, job boards! Job boards have become one of the most popular info-commerce centric websites. In this article, we take a look at the WP resources that are required to run a job board — plugins and themes.

Plugins for Job Boards CareerBuilder Jobs

CareerBuilder Jobs plugin lets users search for relevant jobs and browse jobs on the basis of location or category. It can also suggest recommended jobs and power the application mechanism for each job. You will need a Developer Key in order to use the plugin.

Plugin Homepage | Download

CATS JobSite

CATS JobSite can be used to power a full fledged job board. Users can search, browse and apply for jobs as well as update their resume and skill profile. The plugin is supplemented by numerous built-in widgets.

Plugin Homepage

Job Manager

Job Manager is a simple job board and job application management plugin for WordPress.

Plugin Homepage | Download

Job Manager by Smart Recruiters

This plugin enables you to post jobs and manage applicants on your website. It also supports native integration with Smart Recruiters, an open recruiting service.

Plugin Homepage

My Job Application

My Job Application creates a job database and custom job listings for your website.

Download

WP-Simply Hired API

WP-Simply Hired API lets users browse jobs, apply for specific jobs, track pay-per-click jobs and perform many other functions. However, in order to use this plugin, you will need a Job-a-matic account.

Plugin Homepage | Download

wpCareers

wpCareers lets you create an online job/resume website.

Plugin Homepage

Zartis Job Plugin

Zartis Job Plugin can be used to add secure jobs and career pages to your WP website. It also supports excellent integration with social networking websites. Its basic version lets you create only one open job, and if you need more functionality, the cheapest paid license is available at $108 per year ($9/month).

Plugin Homepage

Themes for Job Boards Jobpress Simple (Regular License: $79)

Theme Homepage | Live Preview

Job Board (Regular License: $65)

Theme Homepage | Live Preview

JobJockey (Regular License: $69)

Theme Homepage | Live Preview

Tapp Jobs (Regular License: $75)

Theme Homepage | Live Preview

9 to 5 (Regular License: $35)

Theme Homepage | Live Preview

Jobpress (FREE)

Theme Homepage | Live Preview

JobRoller (Regular License: $99)

Theme Homepage | Live Preview

ClassiPress (Regular License: $99)

Theme Homepage | Live Preview

What do you think of WP-powered job boards? Do share your thoughts with us in the comments!

Are you looking to get more people engaged and excited about your brand? Aren’t we all… Over the past 6 months I’ve been running an online contest for one of my clients. My client’s goal was to generate more activity from their Facebook community. They know that if they can get their Facebook community more engaged in their brand they can generate more sales for their products and services.

Over the past 6 months we have blown away all expectations for the amount of Facebook activity the client was hoping for. Knowing that many of our readers have the same goal as my client, I wanted to share this personal story with you. In this article we will review our marketing strategy, discuss the day-to-day tasks required, and finally share the results. By the end of this case study you should have everything you need to do this too!

Marketing Strategy for Generating Online Engagement

With a goal of generating more online activity from my client’s Facebook community I went to work developing a sound marketing strategy that could work to achieve their goal. Here are the steps I followed:

• Channel Analysis – What are the best marketing channels to leverage for this program?
• Engagement – What type of activity do I want to see from the audience?
• Offer – Will an offer be needed to encourage the sort of activity that I’m looking to achieve?

After running through all of the steps above, my strategy was beginning to form. I would use Facebook, blogging, and Twitter to reach my audience, communicate my message, and encourage engagement in my client’s brand. An online contest with a monthly prize drawing would serve as the strategy that I’d use to achieve my client’s goals.

Contest Planning

Any time you decide to implement a new marketing strategy you should take some time to plan how you will execute your new program. Here are a few questions I asked myself before implementing this new contest strategy:

• How will I explain the contest to my audience?
• How often will I promote the contest?
• What will my call-to-action be?
• What will I offer the winner? Will the winner change monthly?
• How will I select/notify the winner?
• How will I fulfill the offer?

By asking yourself these questions prior to launching your contest you’re more likely to have success. Nobody wants to participate in a poorly thought out contest.

Running an Online Contest

Once you’ve taken time to plan out how to execute your contest, it’s time to implement it. Here’s what we did:

• We used our client’s blog to explain the rules for the overall contest and each new monthly contest. We published a new article at the beginning of each month explaining the rules for the monthly contest and the prize to be awarded.
• We decided to run the contest through Facebook since our goal was to generate more activity from my client’s Facebook community. We had our Facebook fans participate by leaving comments on our Wall Posts.
• We used other tools like Twitter, e-Newsletters, and in-store promotional materials to drive traffic to the contest.
• We came up with new contest activities each week (falling within the theme of the overall monthly contest) in order to keep engagement up throughout the month. We didn’t want someone to participate at the beginning of the month but then have no reason to keep participating throughout the month. We put it in our rules that you had to participate in one activity each week to be entered into the drawing for the prize.

It took some time to get our process fully worked out, but after the first two month’s of running the contest everything was running like a well-oiled machine. Marketing a monthly contest definitely takes some time, but positive results make it worth it. Be sure to keep your contest ideas fun, and your weekly tasks simple. You don’t want to scare people off with tasks that are too difficult. Once the month is over its time to select a winner.

Contest Winner Selection, Notification, and Fulfillment

At the end of each monthly contest we entered everyone who participated in each of the weekly tasks into a drawing. We then selected 1 grand prize winner and 2 consolation prize winners. If you have a lot of people participating in your contest it’s important to have consolation prizes so that more than 1 person can win something.

Here’s how we go about notifying the winners and fulfilling their prizes:

• Since the contest runs through Facebook, we use Facebook to notify winners. We leave a Wall Post on our client’s Facebook page announcing the winner and we send each winner a Facebook message.
• We include a little blurb about the winner in the next contests’ blog article
• Depending on the prize and location of the winner, we usually collect their mailing address via a Google Form that we send to all winners and then mail them their prize.
• We also ask our winners for a picture of them holding up the prize so that we can use it in promoting future contests. If the person lives locally we may actually ask them to meet up for a picture and to give them their prize on the spot.

Contest Results

So far the contest that we set up for our client has been an overwhelming success. The level of engagement by my client’s Facebook community has far exceeded our expectations. Here are some of the data points that we are tracking:

• Average Participation Rate: 10% of fans participate in weekly contests
• Facebook Business Page Growth Rate: Growing page ‘LIKES’ by 5-7% per month
• Facebook Page Impressions: Up 35% since starting the contest

Overall the number of “LIKES” are growing steadily each month, which means we are attracting new contest participants/Facebook community members on behalf of my client. Contest participation is very high compared with an industry average of a few percent. The amount of people seeing our message has skyrocketed since starting these contests. Our labor is starting to pay off as our contest is seeing increasing traffic from Facebook to their website and online sales are increasing.

Should I Run an Online Contest?

Depending on your goals I would recommend that the majority of website owners at least consider running an online contest. Contests can be a great way to engage your online community, as well as, get them to spread your message to their friends. Follow the steps that we laid out in this article and you’re sure to have success.

Watch out! 1stwebdesigner will be launching contests for designers this February!

jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).

The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)

So, let’s rock!

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks.

That, dear Padawan, was crazy.

Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar?

Then, the hero arrives

Credits: bizior (photo) & Rochester Oliveira (edit)

jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features.

Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality.

Awesomeness proven, let’s code!

Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use.

Basic structure

Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files:

• jQuery Mobile stylesheet
• jQuery JS
• jQuery Mobile JS

So your code will look like:

<!DOCTYPE html> <html> <head> <title>Starter page</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Lorem ipsum</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html>

As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod):

Important note, any “traditional” jQuery call should be placed before the call for mobile framework.

Basic UI components

jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:

• data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
• data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
• data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
• data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
• data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
• data-theme=”a/b/c/d/e”: Define color scheme used for elements.

Let’s wrap up all those attributes in a simple 2-page linking. Output:

Second page:

Code:

<!DOCTYPE html> <html> <head> <title>Starter page</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="home" data-theme="b"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Lorem ipsum</p> <p><a href="#second" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right">Second page</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" id="second"> <div data-role="header"> <h1>Header second page</h1> </div> <div data-role="content"> <p>I'm second page!</p> </div> <div data-role="footer"> <h4>Footer second page</h4> </div> </div> </body> </html> Navigation, Lists, Form & Dialog Components

Then we have a bunch of other default components that are easily implemented with jQuery Mobile:

• data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
• data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
• data-role=”fieldcontain”: This is a container for form elements
• select  data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
• select  data-role=”slider”: Creates a “on / off” slider, useful for options pages
• input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
• input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
• data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
• data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?

Now we’ll edit our demo file a little bit. It’ll be 4 pages now:

• Home screen will have a dialog box
• Form elements page will use all we have mentioned
• List page will have a searchable list so you can try it
• Alert page has target content when user clicks the alert link

Previews:

Alert page:

Form page:

Lists page:

<!DOCTYPE html> <html> <head> <title>Starter page - 1stWebDesigner.com</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="home" data-add-back-btn="true"> <div data-role="header"> <h1>Alert element</h1> </div> <div data-role="content"> <p><a href="#alert" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-rel="dialog">Open alert</a></p> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form Elements</a></li> <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li> </ul> </div> </div> </div> <div data-role="page" id="form" data-add-back-btn="true"> <div data-role="header"> <h1>Form elements</h1> </div> <div data-role="content"> <div data-role="fieldcontain"> <label for="name" class="select">Choose:</label> <select id="name" name="select" data-native-menu="false"> <option value="value1">option1</option> <option value="value2">option2</option> <option value="value3">option3</option> </select> <label for="slider">Select slider:</label> <select name="slider" id="slider" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> <label for="email">Email Input:</label> <input type="email" id="email" name="email" value="" /> <label for="num">Number Input:</label> <input type="number" id="num" name="num" value="" /> </div> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li> <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li> </ul> </div> </div> </div> <div data-role="page" id="list" data-add-back-btn="true"> <div data-role="header"> <h1>This is a list</h1> </div> <div data-role="content"> <ul data-role="listview" data-filter="true"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Aliquam vitae leo metus, quis suscipit nulla.</li> <li>Maecenas accumsan urna sit amet justo commodo accumsan.</li> <li>Nulla vitae lacus augue, vel eleifend tellus.</li> <li>Integer at ligula turpis, at fermentum nisl.</li> <li>Nam dapibus risus at massa sagittis egestas.</li> <li>Praesent hendrerit purus vitae enim faucibus tincidunt.</li> <li>Curabitur sit amet lectus neque, id facilisis elit.</li> </ul> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li> <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form element</a></li> </ul> </div> </div> </div> <div data-role="page" id="alert" data-add-back-btn="true"> <div data-role="header"> <h1>Alert!</h1> </div> <div data-role="content"> <p>I'm alert page!</p> </div> </div> </body> </html> Custom font embedding

Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files.

Compress images

You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images.

JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try!

Remove components

We talked about just a few of many jQuery Mobile’s components. So it’s more likely you won’t be using them all.

The good news is that you can easily remove them, by making your own build :)

Now it’s your turn?

So, how are you planning to use jQuery Mobile? Have another cool tip to share? Don’t be shy and comment!

Welcome back to another colourful article, this time dealing with last month’s favourite, chosen by you! Just as last time, it includes a showcase of websites, artwork and palettes, so there is a little something for everybody.

Basics

Blue is one of the three primary colours and as such is also part of the chromatic spectrum. It is a cool colour which covers a relatively wide area of the spectrum, ranging from cyan to a more violet tint. Of course you could always nitpick, but there is usually little doubt as to what all its different shades should be called; light or dark, greenish or not, you can still call it blue and get away with it.

Characteristics

According to its proper theory, blues are considered far colours, meaning that they seem to expand whatever shape they fill; a room, for example, will seem larger if painted blue, rather than yellow or orange.

It is easily perceivable by the human eye, given that blue colours present a wavelength between 440 and 490 nm. All three types of photosensitive cells respond to this range, albeit to varying degrees. On the other hand, the inclusive nature of the name means that some shades are (literally) easier on the eyes than others. Nevertheless, blue is a common sight in top favourites.

Symbolism

Although present in living beings (mushrooms and frogs, for instance), generally it has more inorganic and abstract associations.

One of these is the sky. Light tones give a sense of open space and freedom, an overall calming effect. Using light blue backgrounds in web design can make a site look friendlier, but large backgrounds have the risk of becoming dull. To avoid this, take inspiration from nature: the sky is much more appealing when the Sun creates a sort of gradient, rather than when it’s more or less one solid colour.

"Trondheim omgivelser" by Helene Rojas Nagel

Next is the sea (or water in general). As a symbol of life and vitality, it also represents versatility; you can find it nearly everywhere, filling different shapes in different states. Although it is colourless in small quantities, in reality water has a slight blue tint that becomes more obvious in large quantities. While the image of a still body of water can be considered peaceful, remember that it can just as easily turn into a source of turbulence.

Blue is also a powerful corporate colour because of its association with stability and confidence. This is also why many IT companies prefer to use it in their visual identity, trying to combat the (to a certain degree) volatile nature of technology. Of course this all depends on the company’s philosophy, profile and desired image, but reliability seems to be the most wide-spread.

Some of the more negative associations are cold and melancholy. Less saturated shades remind of murky skies on cold days, while brighter shades closer to cyan have a frostier feel to them. Also, save for eye colours, the presence of blue on the human body is an indication of something wrong. This can be both physical and mental, hence the expression “feeling blue”.

Combinations

Bright, electric shades of blue create a fantastic effect when combined with dark, ash brown. Although it dominates and gives the overall composition a cool feel, at the same time it manages to generate energy. It works well with dark metallic colours as well.

Together with teal or mint green it creates a natural, watery scheme that is also very fresh and inviting. Of course, there must be some balance and hierarchy between the two colours; otherwise they will compete with each other if they have the same intensity.

Using blue for less important details in orange or yellow schemes can cool down the design and take away some of the glare. While traditionally, orange is blue’s complementary, combinations with yellow will have roughly the same effect.

Palettes 01. Complementary blue by tudor.girba

02. Swimming Sports by julievonderropp

03. Sunny Shores by twinklebunnytoes

04. Sea Foam by louisan

05. Lilac Bathroom by nightzdragonz

06. Leviathan by matthepworth

07. Bleu Blanc Rouge by kuler 08. blueberry pie by elsabartley

09. Nautical Cruise by thecolorcat

10. Giant Attack Robot by stevereed.m

Web – WordPress themes 01. Sealight (premium)

02. MyStream (premium)

03. Irresistible (free)

04. MixBloo (free / must keep footer)

05. The Revival (free)

06. Blue Earth (premium)

07. Feather (premium)

08. SiliconApp (premium)

09. TheCorporation (premium)

10. Envision (premium)

Artwork – animals 01. Sea turtle by Ruth-Tay

02. The Safe Place by ShadowUmbre

03. Hyacinth Macaw by doormouse1960

04. La fable de la girafe by AquaSixio

05. Snowy Owl by markkarvon

06. White Fang 2 by Ginseng-fox

07. Out of Blue by kerembeyit

08. Bubbles by trenchmaker

09. The Emperor by D-NA

10. Into the blue by orcasaurus

For the most part, being a professional blogger is a freelance position. It doesn’t matter how many different blog sites you are loyal to, even if it is your own, a blogger still has the option to have work published anywhere they feel. Unless you’re a corporate blogger who signed a contract with your company of employment stating you would not do so, but then again that technically might make you more of a copywriter. Moving on, being a full-time or part-time blogger means you’re freelancing on some level. As the typical freelancer asked themselves many questions before taking the big leap, you would think the same would go for bloggers.

In the same fashion as any other occupation, there are certain skill requirements that must be met. Almost every industry blog site has published an article about how blogging can improve your career, and then proceeds to convince the majority of readers that being a blogger is the way to go for them. However these articles, for the most part, are all missing one key aspect to them. Somewhere before, or after, informing the readers about the benefits of being a blogger, there needs to be time to reflect on why one shouldn’t be one.

Not too long ago I had an article published questioning the current state of the blogging industry. In it, one of my main concerns was the quality of work currently filling up most blog pages. That is where this article comes into play. Below you will find a set of questions that need to be addressed before taking on the role of a blogger.

Do You Write Well?

*Image Credit: jjpacres

There is nothing more embarrassing, or hurtful to your career, than having an article published that is structured badly and filled with grammatical errors. Automatically you’re going to have people eager to criticize every little grammatical mistake you make in your articles, that’s just something you have to come to expect as a blogger. Imagine finding an article that interests you and then realize that it is not written well enough for the actual message to be clear. It’s understandable why readers of articles like this voice their frustrations in the comments.

Don’t think that because in school you always got top grades and/or awards for your writing that the praise you received then will automatically translate over to your blogging career. A good writing style and ability level for a blogger allows for any topic to be written in an easy to understand and follow article.  This is not something that comes easily if it is not your natural style of writing.

Are You Going to do the Research?

*Image Credit: UGA College of Ag

Although being a top writer in school may not have much to do with your blogging career, how you went about researching your essays and papers does. For the most part, the average blogger gets started by writing about topics they already know a lot about. This allows them to showcase their knowledge, and is an easy stepping stone on the path to their new occupation. Once the topics they know about dry up so to speak, what then?

This happens a lot in the blogging world sadly. It is a regular occurrence to see a blogger write pretty good articles at first based off the knowledge they already have, but after they start digging into topics outside of that they kinda flop. This is starting to happen more often because there are a lot of bloggers who are not putting in the proper amount of time in the research phase of their writing process.

Do You Care about Your Readers?

*Image Credit: familymwr

Personally, I’m always asking myself and wondering how my readers will react to anything I write that gets published. Questions like “Are they going to understand my reason for writing this?”, “Could I have given that little bit of extra effort to make better?”, “Did I spend enough time on it?” or any number of  other questions. To be a good, well received blogger, you need to ask yourself these types of questions somewhere in the back of your mind. Even the bloggers who claim they only write to please themselves, somewhere along the line will start to if they are building a fan base for their work.

As a blogger your job is to provide quality content FOR your readers.

Do You Enjoy Blogging?

*Image Credit: kiki follettosa

Being a blogger takes up an awful amount of time if you’re doing it right, whether you’re being paid for it or not. The level of joy you have in your chosen topics, and blogging in general, will clearly show in everything you write. If you’re interested in your topic, you’ll probably write a good article. However if you’re is uninterested in the topic you’re writing about, and enjoyment is not a factor, then its going to be harder to produce quality content on a consistent basis.

Are You Going to Give Readers What They Want, Or Need?

*Image Credit: United Way of the Lower Mainland

For the most part, the majority of people who find themselves blogging come from career backgrounds with their daily work always leading towards pleasing someone whether it’s a supervisor, client, board director, or the end-user. It doesn’t really matter who, in the end their job is to do something that pleases someone else.

Blogging is a lot like this, because the one way a blog site can come up in the ranks fast, and keep a consistent strong readership, is to create content that they feel readers want. This of course will get you a ton of sharing of your articles, but will you be doing the community of readers who come to your articles proper justice?

A good blogger should always remember that people don’t always get the best results from receiving what they want. It’s more vital to instead get what one needs.

Why?

*Image Credit: B Rosen

This is a simple question, yet puzzling. Before embarking on this occupational journey you should ask yourself why? Whatever reason it may be, you need to be 100% sure of yourself. If you’re only looking for the possible internet fame associated with the job, then maybe you should just max out your potential in something you’re already doing. If you just want a nice and easy way to make a little extra money, you should ask yourself the previous questions again. Probably missed something important.

In Conclusion

Being a blogger is one of those areas where your interest level in what you do shows very easily, and your reputation rests with your worst article sometimes. It’s not easy, there is not a set amount of hours or days you will be working, and you’re not going to become some overnight sensation. This is a hard job to do, but the rewards greatly outweigh that if you’re really interested in blogging.

Do you manage a website or a blog? Do you build websites for customers? If so, then you know all that’s involved in getting your staff up to speed with tasks that need to be accomplished for the website. You know what’s involved in showing customers how their project is coming along. It’s a lot of work… especially when most of the time your staff is working remotely and your clients are miles away. In this article we are going to show you an online tool that can help make your life much easier. We will go over what it is and what it does, its benefits, how you can use it to make your life easier, and show you how to use it!

What is Join.me?

Join.me is a screen sharing tool. Join.me easily allows users to share what’s being done on their screen with others. Screen sharing tactics help your listeners understand what you’re talking about by providing visual support to back up what’s being discussed. It’s a great tool for collaborating with staff or freelancers. Need to train a client on a new piece of software or show them progress on the website you’re developing for them? Done. Join.me is a quick and dirty tool that allows you to share your screen with anyone at any time. It’s definitely worthwhile to know about, especially for those situations where you didn’t take time to set up some of the more complex screen sharing software programs and you just need to quickly share your screen with someone. Hop on join.me within seconds.

How to Use join.me

The reason we are profiling join.me over its competitors is because of how easy it is to use. It takes literally less than a minute to start sharing your screen with someone. The first time I heard about join.me I was on a weekly conference call with my client. He was trying to explain something to me, but couldn’t quite put it into words. All of a sudden he blurted out, “join me”. I’m like, “I thought I already had… we’ve been discussing this for 20 minutes”. He said, “no, no go to join.me and enter this code”. I did. Seconds later I was looking at his screen. It was pretty incredible how quickly we synched up like that.

To start a meeting simply:

• Click the “Share” button (you will have to download the software upon the first use)
• Send the conference code that pops up to anyone you’d like to join you
• Your attendees simply input the conference code in the “Join” text box on Join.me
• Let the screen sharing begin!

It really is that easy. It takes seconds to get started.

Train Staff with Join.me

Many website owners outsource some aspect of their website development or upkeep to freelancers. Others work with staff who may not be in the same office. Join.Me is a great tool for website designers to use to explain projects and tasks that others need to complete for their website. For example, say you need a design element of your website updated, but your designer works remotely. You call her to try to explain what you want done to the website and where on the site it should be created, but it takes awhile for her to visualize exactly what you’re trying to tell her. Now think about that same example but along with you verbally explaining what you want accomplished, you can couple that with visually demonstrating to her what you want done and where it should go on the website. You can do this easily with join.me’s screen sharing technology.

Collaborate with Customers with join.me

Not only can join.me be a great tool to use internally, but it can also be a great way to collaborate with customers. Obviously getting face time with your customers is critical, but for a lot of us, customers aren’t always located nearby. Therefore tools like join.me can come in very handy when you need to demonstrate something online to someone who’s not in the same physical location as you. Say you’re building a customer a website and she wants to know how things are progressing. You could just email her a link to the DEV site and let her navigate around. We all know how that usually turns out… 13,353 questions come back about why “this link isn’t working” or “how come you used red here instead of blue”, etc. Instead, why not invite her to join you on join.me and show her around the site yourself?

By using join.me with customers you can answer many of their questions and concerns before they even ask them because they can get both a visual and verbal explanation of what you did and why you did it. For me, using join.me with customers is a no brainer. It doesn’t take any extra time, and in fact probably saves time in the long-run. It also creates a more valuable experience for the customer, which only benefits your relationship with that customer in the long-run.

Benefits of Using join.me

As you have probably gathered from the information above, there are a lot of great benefits to using a free screen sharing tool like join.me. Here are a few more:

• It’s quick and easy to use
• Multiple people can view your screen at once
• Setup is simple
• There is no setup for viewers
• You can access a conference call number that you can send folks who are not in front of a computer
• It’s FREE
• It’s great for training and collaborating with employees, freelancers, and customers
• It provides people with a visual description to match the verbal information they are receiving

Using join.me

Will you use join.me? Have you used screen sharing tools in the past? Which ones have you liked? Which ones will you stay away from? There are a lot of great screen sharing tools out there, but not many of them are as easy to use as join.me. It really is an easy process for both the demonstrator and the viewer. Join.me can provide website owners and website developers with a lot of benefits when it comes to training and collaborating. Leave your comments below to let us know which screen sharing tools you’ve used and if you will try join.me. For those of you who have used join.me, please let us know what your experience has been with it.

Redesigning a website happens very often on the internet today. It can be thanks to the new technologies that appear one after another (and every one of us wants to stay in fashion) or because the rules change from month to month. Whatever the reason is, it is quite important to do it properly and to ensure the new design will bring you more advantages over your competitor than the old version.

We don’t redesign a website only for the sake of spending money. We do it because we feel that the site needs a visual revamp, we feel that our visitors want to see something new from a visual stand point. Considering the redesign is entirely for the users, it’s them we should focus on when we think about creating a new identity for our blog, publication or whatever kind of webpage it is.

The bigger and more important your webpage is, the higher the probability to fail when redesigning it is. Why? Because when you have to take hundreds of thousands or millions of users under consideration, it might be difficult to please all of them – quite frankly, it is impossible to do it. I personally experienced leaving a website I liked only because they changed the design – and I am aware of how the web works. If I left that webpage for good, I am wondering how many other users that don’t have anything to do with design did the same.

In order to increase the probability of your redesign being successful, I have created a list with some tips for you.

Make sure you need to redesign

When you already have users that come back to your site, most of them expect certain things; they know where the navigation is, where to search for content, where to find archives and so on. By redesigning you will most likely change those things.

Image by buritikid

If you are lucky enough and have a responsive community, you can even make a poll and ask them if they think the site needs to be redesigned. If you don’t have such a community, the decision will be up to you and will be more difficult to make unfortunately. Try to ask fellow designers about the particular website and see what they think about it.

Involve your users

The second step in a redesign process is to involve the community base. This can help your new website to look and suit your audience better, because you get feedback from them and use it to inform your designs.

A good tip would be to try and keep the main elements in the same place, or at least to ensure the functionality is similar. Moving the sidebar from left to right is confusing for the first time; the same with the navigation – if you had a dropdown menu before, either go with this type again or simplify the navigation. It’s important to always make sure the user doesn’t find the new website more difficult to navigate  than before. Thus it’s necessary to avoid a total redesign. More important, involve the users in the process.

Image by Dominik Gwarek

Test the website

Testing the website doesn’t only happen behind the closed doors of an agency, but also with the users. Offer them the option of testing the new website – and make it visible. Afterwards, allow them to send you feedback through forms or a survey and always keep track of it. This is another way of involving the users and helps because, I am saying it again, the user is always the focus. You never redesign for yourself, but for them. Allowing them to test the new design before it’s done will also give you the opportunity to adjust it. Expect this to be a difficult process, because you will start with some ideas and will end up with a different site – but make sure your visitors will appreciate it and will come back afterwards.

Don’t change the layout right away

This is a strategy most of the social media sites use. Whenever they change the layout, they either allow you to stay with the old one for a predefined period, or change to the new one and give you the option to go back to the old style. Why do they do this? The answer is simple. Not everybody has the required time to get used to a new layout when the designer wants. Getting used to a new style takes time and if the user doesn’t want to spend that time right away, give him the right to do so.

Allow users to change to the new design (and specify it is still in beta) and give them an option to go back to the old one. Sure, don’t keep this forever, but look at Facebook. They only force everyone to update their layouts to the new ones after one or two months after they make them available for the first time.

Some of the users decided to go for the new “Timeline” of Facebook. I decided to keep the old layout because I liked it. Moreover, I didn’t even think of getting the timeline because Facebook wouldn’t allow me to go back to the previous style. Therefore my Facebook still keeps the old style. But as a matter of fact, Facebook will update my layout to the timeline very soon, when the old style will not be available anymore.

This is an interesting strategy and is very well implemented in social media. Therefore think of implementing it with your site’s redesign.

Allow feedback even after the process is done

You redesigned the website and now it’s on. Users can’t go back to the old one and there is nothing else to do other than accepting it as it is. Fair enough, but allow the users to give feedback.

There are lots of tools you can use for this on the internet and this way you will make sure that if something is wrong, users will point it out to you- this happens mostly if you have a responsive community supporting the website, but it is always worth trying.

If a lot of your users feel the same thing is wrong, make sure to fix it as soon as possible. This way they will feel like they’re a part of the community and, since their opinion is valued and taken into consideration, they will happily continue their stay there.

Make the reasons behind your decision clear

It is always smart to tell your users why you think it is important to redesign a website. Some of them have no idea of design changes, usability or new technologies and I am afraid they don’t even care – they just want to be able to use the website like they were accustomed to. Changing the design will not allow this for a period, until they get used to the new layout, therefore some of them might be against you customizing the style.

Thus, explain to the users why you think it is important to make changes. Use some basic theories and explain that being up to date with new technologies will allow the website to offer even more and will probably even make it load faster. When they hear about speed, most of them will be excited about the new design.

Make a guide for the new layout

If you make major changes to your website, then creating a photo, text or video tutorial about this would be great, interactive and helpful. I am sure the visitors now knowing what to do next will appreciate the tutorial which will allow them to adapt faster to the new design. This gives them the impression that you care about them – which again will make them come back to your page.

Image source

In case you already redesigned your webpage and it kind of failed, there are solutions for you too. This happens if you hear way too many complaints from your community and you don’t want to spend money on a new design again, but want to do something to improve the atmosphere for your users.

It’s about your mistakes

If this happened, then it is probably your mistake as a designer, because you either did something wrong during the development process or you failed or miscommunicated with the users. It is clear that if they are not happy with the new design, there is something wrong and it’s obviously something major that you’ll need to address.

This is the perfect moment to show how close you are to your community. It can be on Twitter, Facebook or even on the site, make sure people find out you want to fix your mistakes. Let them speak and let them tell you what was wrong, this way it will be easier for you too, when you will have to decide on the solution.

Use their feedback

When they send you feedback, make use of it as much as possible. Acknowledge some of the complaints and show the community you are involved and want to change everything for the best. This will, again, make your life easier, because all the feedback you get and discussions you stir with the community will end up with some conclusions, ideas and possibilities. It’s much easier to repair a mistake when you are backed up by your community, then when you are not.

Go back if you need to

There is no shame in acknowledging that your redesign has failed, therefore if the community strongly asks for it, you can go back to the old design. Sure, going back to the old design means you still have to use resources to redesign (that is where you started from in the first place), but at least until you prepare a new strategy the number of visitors will not decrease.

It is really important to keep the community happy and the way of doing it if you are in this situation is to allow them to go back to the old style. Don’t force this into them, it will definitely get confusing for the ones who thought well of the new layout. Just offer the option of choosing their own style. This will, for sure, solve the problem in the short-term and will allow you some time to prepare the new design better.

Always follow opinions

The most important thing whenever you launch a new design is to monitor carefully the community and their behavior. Google Analytics is the best tool you can use, because it is free and gives you an in-depth insight into how the users spend their time on your site. If the number of visitors decreases soon after the launch date, it might be because of the new layout.

"Just my two cents"

Image by claymor

This is the time when you have to start interacting more with the visitors and ask what is wrong. The bottom line is that many users would rather stay on a bad page if the designer is interested and involved with them, than staying on a very good page where the designer doesn’t really care. You have to show your community you care about them.

Another way of keeping track of the opinions is to closely follow social media posts. Most users actually prefer Twitter and Facebook when talking about these kinds of changes, so keep an eye out there too. This is another way to show your users the redesign is for their own good.

Bottom line

The conclusion is that redesigning your website is not as easy as it sounds. Not being able to involve your community in this important decision will most likely turn your project into a failure and will drive the users away. Thus it is smart to keep the community close and use their feedback and opinions – in the end, everything you do is for them – at least consider their opinions. This way you will be closer to success than if you do this the other way around.

Howdy, today we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way.  Here is what we will be making:

Resources for this tutorial

• Icons from Iconsweets
• Sample images for the center image
• PSD Download – but really, you should follow the tutorial first!

Step 1: Setting up the Document

• Start by creating a 1600px x 1600px document in Photoshop.
• Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
• Rulers: Ctrl + R
• Guides: Ctrl + ; or Ctrl + H
• The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
• Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
• So repeat the step again twice, but now with the value of: 640px and 960px.
• So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
• Fill the background with: #272e2e.

Step 2: Working on Base Background for Header and Slider

We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings: Next, we have to add the texture. You can use the one below or download your own.

• I used the one above at 20% opacity.
• Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
• Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.

Like this:

• Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
• Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
• Hit OK and there is your pattern.
• Opacity = 3%.
• Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
• To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.

Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.

Step 3: Filling The Header With Logo/Nav & Slider

So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy. The font I used is Century Gothic. The settings can be found here: Kroal   Portfolio Kroal: Color overlay is white. Portfolio: The last part of the logo is a vertical line which should be on your guide. Like this: I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation. The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The Blending Options for the nav text are: The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode. I used Drop Shadow and Stroke, settings below. Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack. Also the caption to the right of the slider is made with the rectangular marquee tool.  The text settings are below: /WEBDESIGN: AVICII BLOG The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels. The layer styles for these layers can be found here: Drop Shadow   Inner shadow Color Overlay One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U). Blending options: Inner Shadow Gradient Overlay You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:

• Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
• For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
• Add another pattern overlay with the same pattern.
• Opacity is about 15%.

Then the arrows beneath the slide show. You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow   Inner Shadow Color Overlay

• Just a solid black #000000
• Blending options right arrow.

Drop Shadow Inner Shadow Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.

Step 4: Filling In The Content

• The content starts with a 3 column showcase of text about your website.
• If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
• I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
• Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
• The lorem text also is open sans, but now it´s 12px.
• Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.

Blending options below: Drop Shadow: Inner Shadow Gradient Overlay There’s another line beneath these 3 columns. You can just duplicate the ones you made before.

• Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
• Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.

Drop Shadow Inner Shadow    Gradient Overlay Stroke Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.

Step 4: Let’s Make A Footer

First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form. I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow Inner Glow Gradient Overlay So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4.  That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below. Have a great and creative 2012!