Productivedreams.com

Vertillax – Parallax Scrolling WordPress Theme

Gopal Raju — Tue, 26 Mar 2013 18:53:40 +0000

Vertillax is a – one of it’s kind – parallax based responsive wordpress theme. With this theme you can create a single page parallax based site as shown in the demo, in minutes. If you’re a designer, illustrator, artist, photographer, freelancer, creative agency or someone looking for a unique creative web presence, this is the perfect theme for you.

download
Preview

Features

WordPress 3.3.1 compatible
Coded in CSS3 & HTML5
Adjustable Parallax Speed
Cross Browser Compatibility
Parallax works on all screen resolutions
Ability to add Subtitles
Auto-magic calculation of parallax speed
Easy to set-up theme options
Portfolio and FAQ – 2 Custom post types
Page templates (Portfolio & FAQ)
Customizable 404 Page
Blog with Ajax pagination
Shortcode to display recent/random projects
Widgetized Sidebar with show/hide
2 Built-in Widgets
Custom Logo/Favicon Upload
Social Networks
Simplified Admin Panel
Simple Lightbox Pop ups
Google Web Fonts
Smooth scrolling on iPad

Credits

Creating A Visually Engaging Design Resume

Luke Clum — Sat, 02 Feb 2013 07:33:29 +0000

For a designer, a resume isn’t just a summary of your work experience; it’s a key portfolio piece that demonstrates your creative style, as well as your typographic, layout, and illustrational skills. So it’s crucial that you give a lot of consideration to the approach you’ll take on it, as well as how you’ll integrate it into your identity system as a whole. When you’ve finessed the content that you want to include, start with this checklist to make decisions on how your design will turn out.
Master the Basics

Conceptualize Your Identity System

Your resume should never be a standalone piece of work; as a part of your cohesive “brand,” it has to work with your business cards and portfolio design at minimum. And the visual language you choose to use should also be easily incorporated into other branding materials that you might choose to make in the future. This identity system is consistent as well as beautiful, and you can easily see how the typography, layout, and illustrations could be used in a variety of applications.

Typography Over All

By far the most important aspect of your resume design is the typography. Try to strike a balance between easily-readable, classic typefaces in the body text and striking, interesting ones in the headings. Beautiful type combinations are the hallmark of a good designer, so anyone reviewing your resume will look for this first. This resume, below on the left, would have benefitted from variegation in the type, while this one, below on the right, shows how even understated changes can make a big difference in adding sophistication to a piece.

Make Several Versions

It’s a good idea to consider making more than one resume; the first for a more conservative presentation, and the second for a more creative one. With both in hand, you’ll be able to tailor your application to suit the company.

Add Embellishment

A design resume can definitely benefit from some added styling; whether that means beautiful icons, an interesting layout, or lots of color. But you should never jump on a trend’s bandwagon without being sure of two things:

Your version will be able to compete with what’s already out there (it shouldn’t be a poor imitation of another, better design)
It makes sense in the application (and you’re not just senselessly applying it because it’s the cool new thing to do)

Data Visualization

Data visualization is a big trend right now in resumes, so if you choose to do it, do it well. This resume, below, is a great example of how a subtle, clean use of infographics can add interest to a design. However, keep in mind that it’s from 2009; at this point, a resume with similar, straightforward graphics would be overlooked as passe.

Icons and Illustrations

A judicious use of illustrative elements can take a resume from sterile and boring to beautiful and inviting. While this resume emphasized the icons to the point where the text is overshadowed by them, they’re still very compelling. The key here is making a very unified and regular set of vector icons that you can hopefully use throughout your identity system. Make sure that your designs are fairly simple so that they can be resized and reused in multiple applications.

Arrangement and Color

Recently there has been somewhat of a trend towards resumes that have a disjointed or slanted alignment. While these designs are definitely interesting, keep in mind that such a radical choice should be balanced out by simple, traditional typography, like in this example, below.

Although some designers might want to make a statement in black and white (like in the first example); you should thoroughly consider your color choices and not just default to the obvious. Many of the resumes above show how a touch of color can make a big difference.

Of course, there’s always the danger of going too far in your creative approach; sometimes a resume has too much novelty, and it will come off as overdone, silly, or pretentious. Worse, the most flamboyant resumes (think ones that have far too many graphics or a layout that is distractingly bizarre) are often illegible and confusing. It’s far better to err on the side of caution and have a beautiful, subtle resume, than to waste time making an extremely flashy version that would only appeal to unusual tastes.

The Importance of Design Functionality & Conversion

Luke Clum — Thu, 29 Nov 2012 11:28:40 +0000

It’s difficult for designers to come to grips with the look of a website that’s made strictly for optimizing conversion rates. And theirs is a valid concern; ugly sites with glaringly obvious keyword usage and cheap design are no more appealing to the novice web user than they are to the seasoned designer.

On the other hand, a flashy site that uses all the new tricks is just as likely to be a problem from the user’s perspective. The point to most sites isn’t to dazzle viewers with your virtuoso design skills; it’s about gaining a user’s trust with clean functionality that’s a pleasure to use. But there’s a way to fuse the two goals, and create websites that work well and look great at the same time.

Design Should Direct the Eye

One of the most intuitive ways that conversions work well with design is in directing attention, and accommodating the nonlinear method that people use to take in a webpage. Eye tracking studies show that most users scan a page, giving slightly more attention to the elements on the top left, before skipping along to anything that excites visual interest elsewhere. Once this initial scan is completed, they might delve further and actually read content. Sophisticated design works perfectly with this method of intake, giving the page a visual hierarchy that lets the viewer scan the right parts through the use of interesting typographic choices.

Labbler‘s website has a fairly intricate set-up, but by consistently identifying each category with its own color, it draws the eye to the right place on each rollover. At this same time, the type at the center of the page is eye-catching enough to ensure that the viewer understands the point of the navigation system.

Conventions Need to Be Respected

The less-than-attractive appearance of many web conventions almost seem to invite a designer to toy with them for a more appealing result. But because interaction is an integral part of the web, designers always need to keep the needs, interests, and prejudices of the user in mind. Most of the time, this means sticking to certain traditional features, such as:

A search bar that is located on the top right of the page. If auto-complete recommendations are included, these are clearly identified as suggestions alone.
Using breadcrumbs to show the user their path through the site, and easily enable them to take a step or two back.
Consistent UI controls, that are easily identifiable for what they are. This means buttons that are visually similar, links that work the same way, etc.

For example, Clearleft‘s website shows how breadcrumbs can be an unobtrusive yet attractive navigational element. The bright color of the links and the conventional positioning ensure the user of its presence, but the small size ensures that it doesn’t distract from the main content of the page.

Design Should De-clutter the Page

Although there are some examples out there of successfully busy website design, simplicity is the safer and better choice. And the more complex a site becomes, the more streamlined it has to be. For example, ecommerce websites need an extremely high level of clarity for their customers to successfully navigate their conversion tunnels. While the use of established ecommerce software can definitely help, every design decision should be geared towards effectively minimizing confusion or distraction.

Need Supply‘s product pages decreases clutter by having a single social button, in the attention-grabbing color they use site-wide to direct their customers’ interest. When you roll over the button, it splits into two options. This strategy makes for a cleaner page, as well as giving it an interesting and attractive navigation element.

In every situation, there’s a way to make good design decisions that fall within the boundaries of good conversion optimization. And as users become more and more savvy to the common practices and visual cues that rule the web, designers are allowed greater freedom in their work. Within the near future, what is now a begrudging compromise will hopefully become a harmonious collaboration.

The Benefits of Website Usability Testing

Charles — Thu, 22 Nov 2012 14:16:27 +0000

Before launching a website, it is very important to test its usability. Usability testing involves evaluating the functionality and features of your site by trying it out with users. Some of the things you need to look out for when testing include navigation functionality, responsiveness and cross browser compatibility.

The following are some of the benefits of website usability testing.

1. Lower costs

Identifying usability problems at the onset will enable you to avoid redesign costs which you would have incurred later. Since there will be less customer service calls and emails, you will also be able to lower your support costs and concentrate on your business.

2. Enhanced retention rate

Many people who visit sites leave immediately after landing on the homepage. Usability testing will help you figure out why your site is unable to retain new visitors. The following are some of the reasons why people click away from a site almost immediately after landing on a page.

The homepage loads too slowly and they get impatient
They realize the site doesn’t have the information they wanted
The site can only be accessed using a plug-in like Flash, which the visitors dislikes or does not have.
They hear a distracting music being played when the site loads

Some of the strategies that can be used to improve retention include:

Good design
Removing pop-up ads
Offering visitors regular updates on the homepage
Offering a freebie on the homepage

3. Reduced shopping cart abandonment

Reducing Shopping cart abandonment is very important for ecommerce websites

Research has shown that many consumers abandon their carts while in the process of online shopping. Website usability testing is important for identifying the reasons behind frequent shopping cart abandonment. Once this problem is resolved, your purchase rate will improve.

4. Enhanced brand image

Your website is a very important element of your marketing strategy and overall brand image. If visitors have a pleasant user experience on your site, they will also have a favorable impression of your brand. Otherwise they will just click away to a competitor’s site.

Some of the problems which will leave visitors with a poor impression of your brand include:

Site errors
Broken links
Clumsy layout
Poor grammar
Misspellings

5. Increased profits and sales

If usability testing reduces your shopping cart abandonment rate, enhances visitor retention and gives you a competitive advantage, then your sales are also likely to improve. When it comes to enhancing sales, you need to think from the perspective of the consumer.

Ask yourself the following questions:

Are you targeting the right audience?
If you were a consumer, would you buy a product from your own site?
Can product information be found easily on your site?
Is more information required than what is currently available?
When a consumer makes a decision to buy, can they easily follow your instructions?

Using Icons the Right Way

Luke Clum — Mon, 05 Nov 2012 12:41:46 +0000

Every designer knows that when a webpage is getting a little boring and text-heavy, it’s time to pull out some icons. But knowing you need them is only the first step in a long thought process. Are the images you’ve chosen conveying the right concepts? Are they similar enough in style? Should you get creative and risk confusion, or stick to the basics and invite boredom?

Icons are a tricky topic, because there are so many ways you can go about them. But there are a few things that are true of every good icon design. Follow the guidelines you find below to make sure that your icons are as effective as possible.

Icons should be universally understandable

Most icons are needed to portray concepts rather than actual items, so you will usually need to use a visual metaphor. And while some more complex concepts can be difficult to express in a simple pictogram, you should make sure that they’re at least not outright confusing.

For example, the icon on the bottom left in this list of features is a lightning bolt within a cloud, which is obviously not the literal meaning it’s trying to convey. Instead, the picture is meant to represent lightning-fast results, a concept that almost anyone would immediately associate with the picture, when it’s put into context.

Icons should be eye-catching, but not just eye candy

Icons can be effectively used in a variety of ways, the major ones being:

Summarizing content
Increasing readability
Listing links
Adding visual interest

Although it’s preferable to have beautiful but useless icons over logical yet hideous icons, the best ones combine functionality with visual enhancement. This can be achieved in many different ways, but a good example to look at it is with customized social media icons. In this portfolio website, the icons have been tailored to fit the style of the page as a whole, but they retain their functionality as links.

Icons should feel like they’re part of a cohesive set

The most obvious failing in any set of bad icons is when they don’t even look like they were made by the same designer. Make sure yours are strictly styled so they don’t end up being a mish-mash of half-realized ideas. Take into account:

The lighting: if your icons feature anything like drop shadows, inner glows, or gradients, make sure the angle, color, and intensities are consistent throughout.
The angles: whether they’re head-on, to the side, or from the top, show every icon from the same angle. If they’re 3D, this is even more important.
The rest of your website: don’t get carried away by a unique idea. If the style doesn’t fit the site, it’s not a good choice.

Icons don’t always have to be small and simple

Traditional icon design focuses on the flexibility and simplicity of the set; shapes are scaleable and abstracted and can work in many applications and colors. This is a solid choice for many projects, such as this invoicing guide the icons are all simple, classic shapes that can be recycled throughout the company’s website for a consistent look.

But if your icons are only going to be used in a specialized context, you might consider more elaborate and striking images. This works well for headings on a webpage that has just a few categories. The large, illustrative icons in this website are both attractive and interactive, making them worth the space they take up.

Simple designs don’t have to default to ordinary designs

Even if the rest of your design doesn’t lend itself to fancy, exciting icons, you can still make unique sets that are just as effective. The category icons in this website are just small line drawings. But the consistent yet diverse designs, in combination with the drama of the surrounding white space, makes this set look special. There are many good resources for finding icon inspiration, such as these sites:

IconFactory
IconFinder
Iconspedia
IconArchive
DryIcons

Multiple sets of icons should look like integrated parts of the whole

Most webpages need a few different sets of icons that work with each other. When it comes to designing them, a combination of unity with discord is what creates an interesting result. In this website’s design, the simple round icons ranged along the top are very different from the more ornate icons above the categories. But the combination works because they’re different enough to create interest, but similar enough (with the textural overlay and monochromatic palette) to be harmonious. The right mix of these elements changes with every design, but a sensitivity to these proportions the last essential component to the making of great icons.

28 Ways HTML5 will change websites – Infographic

Gopal Raju — Fri, 10 Aug 2012 18:04:01 +0000

As you all know, HTML5 is the future of web. This infographic is to give an overview for the beginners, on how HTML5 will change the performance of websites. Thanks a lot conosco for the contribution.

Parallaxr – A horizontal parallax based wordpress theme

Gopal Raju — Fri, 17 Feb 2012 13:30:42 +0000

I’ve been receiving many queries on how to develop a site like indofolio.com, and here is the answer for you – Parallaxr, a premium wordpress theme with which you can create a horizontal parallax base website in minutes. All you have to do is upload the images and adjust the speed from the admin panel. To know more about parallax and parallax based sites, check out my previous post

Retropress was a huge success and this has encouraged us to come up with Parallaxr – our second premium wordpress theme. The cost of parallaxr is just $30.

download
Preview
Documentation

Features of Parallaxr

1. Responsive Layout
2. Blog Integration with AJAX based pagination
3. WordPress 3.3.1 compatible
4. Coded in CSS3 & HTML5
5. Adjustable Parallax Speed
6. Cross Browser Compatibility
7. Parallax works on all screen resolutions
8. CSS3 based parallax effect with fallback for other browsers
9. Auto-magic calculation of parallax speed, as pages are added
10. Easy to set-up theme options
11. Portfolio and FAQ – 2 Custom post types
12. Portfolio with tabs to switch between thumbnail view and list view
13. Page templates (Portfolio, FAQ and Contact)
14. Customizable 404 Page
15. Blog with Ajax pagination
16. Shortcode to display recent/random projects
17. Widgetized Sidebar with show/hide
18. 2 Built-in Widgets
19. Custom Logo Upload
20. Social Networks
21. Simplified Admin Panel
22. Fancy Box Pop ups
23. Ajax-based contact form with jquery validation
24. Jquery validation for the comment form
25. Custom 404 – Ability to add custom 404 title, image and description
26. Google Maps integration on the Contact Page
27. Google Web Fonts

For more information on the features, read the documentation.

Retropress – a premium business wordpress theme at a crazy price!

Gopal Raju — Wed, 04 Jan 2012 13:20:09 +0000

Happy 2012! We’re glad to introduce a premium wordpress theme – Retropress, from Convax Solutions at a surprisingly low price – $10. If you’re running a business, this is the one for you.

Retropress works with the latest version of wordpress – 3.3.1 (which was released today).

download
Preview
Documentation

Features of Retropress

1. Works with wordpress 3.3.1
2. Modern, customizable design
3. Support for Custom Menu
4. Twitter bar showing your latest tweet (with show/hide)
5. Supports post thumbnails
6. Ability to add Portfolio items (Custom post type)
7. Widget ready sidebar and footer
8. Two built-in widgets (Recent Posts/Projects with thumbnails and Social Networks)
9. Dynamically generated sub-menus for sub-pages
10. Recent Projects in the home page
11. Custom text for the 404 page
12. Custom contact page with ability to email, addresses, phone number etc
13. Dynamically updated copyright year
14. Home page slider using CarouselFredSel
15. Coded in HTML5 and CSS3
16. Optimized CSS and images
17. Google webfonts
18. Crossbrowser Compatible (Firefox, Safari, Chrome, Opera and degrades gracefully on IE7+)
19. Easy to set up with the Theme Options page
20. Animate Search button
21. Built-in pagination

What makes a design RETRO?

Roxanne Peterson — Fri, 15 Jul 2011 15:54:32 +0000

Using retro themed web designing templates is the latest trend in web designing. Retro templates are characterized by period icons, vivid graphics and pale colors. This popular theme is not only showing its presence in websites but also in paintings, ads and fashion designing. Let us find out the reasons behind this growing popularity of retro web designing.

Reasons of popularity

Retro designing transcends time, styles, tastes and ages. Web designing templates having retro style are well accepted by customers from different countries. Retro designing usually focuses on certain eras or pop cultures but enjoys a loyal group of followers across several countries. Color schemes and graphics are neither too dull nor too colorful.

Interweaving of modern graphics with old designs helps in creating a vintage appeal. People have a tendency to associate “value” with old things. Retro designing aims to reap this normal tendency. While value element helps in drawing visitors, modern designing elements keep them hooked. As such, retro designing offers the site owners best of both worlds – vintage looks with modern designing.

Retro designing has brought a touch of romanticism in web designing. Most web surfers are guilty of romanticizing old things. Most of us have a feeling “how green was my valley”. They feel life was much simpler, less stressful and relaxed when they were in schools and colleges. This is probably where a retro design takes us. It takes us to those sweet and memorable days when life was more relaxed.

Elements of retro designing

Retro web designing has several approaches to theme and certain elements are often repeated. Handwritten scripts are very popular. Some designers use old cars, retro product models, old fashioned photographs, early electronic devices and other such old images for creating retro look. Some web pages reflect the celebration of sixties to space travel while others prefer to highlight post-war optimism and ad campaigns of ‘50s. Some web designers use the military themes like old war planes and badges and some like to use images of pin-up girls of that era. There are several crucial elements that contribute in making a design retro. Let us explore some of them.

1. Using shapes and illustrations

Simple shapes works wonder in creating a retro look. Circles of different sizes are commonly used for this purpose. Going through designs of different famous eras revels how simple shapes were used by designers to create maximum impact. In addition to simple shapes, some of them also opted for a floral background. Bright colors were used in such cases for drawing attention. These techniques are widely adapted by many designers for creating separate space of different content within same area.

2. Color schemes

Limited use of colors is the prominent trait of retro designs. Full color printing was very expensive in the past. This prompted many designers to limit the use of colors in their designs. Two toned coloring was predominantly used by retro designers. Sometimes designers selected a focal color and blended it with few selected colors to create a unique theme.

3. Typography

Typography has always played a vital role in designing a retro site. Designers of the retro eras used simple techniques like repositioning of fonts, duplicating and pixel strokes for adding unique flavor to a design.

4. Borders

Use of borders is a fascinating part of retro designing. Borders can be used for framing a picture, highlighting content or creating focus areas. They can have ornamental designs or matching solid colors.

5. Textures and noises

Subtle use of texture and noise in the background helps in creating a visually appealing retro design. While some offer a canvas type background having worn out look, others love to use poster artwork with subtle colors. From blending of brush works to stained structures vintage designs are a treat to watch. Drop shadows and pattern overlays are used for creating retro look of a web page. Retro textures are usually simple to create with help of Photoshop.

6. Badges and logos

Badges and logos play a crucial role in creating a retro feel. Badges are usually round shaped with a fluttering slim banner over them. Subtle and contrasting colors are used on retro logos and badges. Most of them can be created with Photoshop.

Finally…

Using retro elements in web designing is an attempt to bring back the memories of past. When a designer purposely develops an old design and blends it with new services and technology we get true retro effect. Retro designs are void of older designing techniques, making them technologically compatible with modern site designing. There are several retro elements that may not fit with our modern web designing approach. Extensive use of Flash, horizontal rule lines, large rainbow fonts, hit counters are avoided by modern designers. Background images and music along with scrolling tickers used in earlier days of web designing may create problems in modern web designing. These elements should be avoided while designing and developing a retro website.

It’s time to try your luck! 3 sets of Moo Cards and 3 Fotolia Coupons

Gopal Raju — Wed, 13 Jul 2011 08:24:23 +0000

We are excited to have MOO provide us with 3 sets of FREE business cards & business card holders and Fotolia with 3 coupon codes for our lucky readers.

1. Business Cards & Holders From MOO – 3 Winners

If you have not come across MOO before, they love to print – whether it’s unique business cards, creative MiniCards, Postcards, Greeting cards, StickerBooks and more!

You can see a cool video of the Showcase business card holder below –

MOO’s unique printing technology ‘printfinity’ allows you to place a different image on every business card in a pack! This is an excellent way to show off a portfolio, designs or business

More About MOO

MOO was born from a love of beautiful, high-quality print and design. They make printing beautiful and unique business cards, PostCards and MiniCards easy!

You can upload your own images or artwork to create truly unique cards. If you don’t have any designs of your own you can choose from a range of templates and designs for your cards and personalise them with your own details.

Prizes (FREE Worldwide shipping)

1st place – 200 Business Cards & The Showcase Holder
2nd place – 100 Business Cards & The Showcase Holder
3rd place – 50 Business Cards & The Showcase Holder

2. Fotolia Promo Code – 3 Winners

Fotolia is a popular stock photography site with a library of over 13 million images, illustrations, vectors and videos.

More About Fotolia

Fotolia offers the largest image bank of free and most affordable royalty free photos and illustrations perfect for any medium, web or print. Fotolia is convinced that the principle reason for illegal pirated use of protected images is mainly due to the high price barrier created by other agencies and hence provides them legally lowering the price barrier so that everyone may enjoy/afford these beautiful images.

Prizes

All 3 promo code winners will be able to download 3 images per day for 14 days. Definitely useful for designers and bloggers.

How to Enter

For a chance to win one of the 3 sets of business cards & holders and 3 Fotolia promo codes – all you have to do is:

Share this post on twitter or facebook or googleplus and put the status url along with your comment below that tells us why YOU need them in particular. Yes, we are looking for interesting and inspiring answers to why you need the business cards and the Fotolio promo codes.

Winners will be chosen from the comments below and will be updated on 20th July 2011! Please enter a valid email address so we are able to contact you.

Winners!

Thanks everyone for participating in this contest and special thanks to MooCards and Fotolia! The winners have been chosen and will be contacted shortly via email. The winners are (in sequential order):

Selection Process

The selection was made using a SQL Query to print 6 random comments from the post.
`SELECT comment_ID, comment_author, comment_author_email, comment_author_url FROM wp_comments WHERE comment_post_ID=2093 ORDER BY RAND() LIMIT 6`
Moo Business Card Winners
1st Place: Daniel Latsch, 2nd Place: Anthony Schultz, 3rd Place: Sabil Perbawa

Fotolia Subscription Winners
Isadora, Kiran, Charmane

Congratulations winners!