Productivedreams.com » web design

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.

12 Steps to better navigation

Siobhan Ambrose — Sat, 18 Jun 2011 20:23:51 +0000

Navigation should be thought of as a tool for your users. It’s there to help them find their way around your site. Like a map; only you’re marking the points on it and passing it over to your visitor to use. This means that your navigation is for your visitor, not for you. While there is scope for some design flair and creativity you should be ensuring that it is fit for purpose, that it helps your visitors rather than hindering them. Here are 10 steps that can help you achieve better navigation.

1. Plan Your Route

Planning is one of the most important steps in any web design process. You should be planning out your content and your navigation before you pick up a pixel. Plan how you want your visitors to get from A to B on your website. Make sure they can get there as quickly as possible. Your most important content should be easy to access and at the top level.

2. Be Consistent

Your navigation needs to be consistent throughout your site. This means keeping your main navigation areas in the same place and ensuring that you use the same colors for links across the site. Your main menu should appear in the same place on every page, although you should feel free to have page specific sub-menus for drilling down into different content.

Using a different color(with a lesser saturation) for visited links and adding an icon to external links would make the site more accessible though.

3. Keep Clicks to a Minimum

Your visitor should be able to locate what they want as quickly as possible. This means that you should keep clicks down to a minimum. If a visitor has to spend more than minute searching for content then your navigation isn’t working. You can help to improve this by having a sitemap, pull down menus, anchor text and tables of contents.

4. Make it Easy to Get Home

These days the web design standard is for the logo to be located above “the fold” – i.e. is visible to the landing visitor before they scroll down the screen. This is usually linked to the home page. People browsing the web have come to expect this so you should make your logo clickable. In some cases it may also be appropriate to have a home button on your navigation bar. Should your visitors get lost (which they shouldn’t if you are following these steps) they should always be able to get back to your home page.

5. Be Searchable

Search functionality is such an important aspect of web navigation. A visitor should be able to search your site. This is particularly important if you have a large amount of content and pages. It will help your visitor to pinpoint what they want without having to manually search through your whole site to find it. Google makes it easy to add custom search functionality to your website with Google Custom Search Engine.

Adding the search functionality on 404 pages will be useful for the visitors to browse through other sections of your website.

6. Make the Wording Accurate

It has become trendy, in certain circles, to have navigation buttons that are pretty vague. You may think that this makes you look cool, that you’re breaking the mold, but really it can be annoying and frustrating for your visitors. If you have used wording in your navigation that you think makes you sound cool/clever/cutting-edge, change it. You should not assume that anyone else will have a clue what you are talking about. Not everyone else thinks like you, right? Keep your navigation language specific, direct and to the point.

7. Pagination

Some websites just have the next/previous button which doesn’t give any clue on the number of pages. Pagination simply means dividing the content into discrete pages. Can you imagine a book without pages?

This is useful especially for blogs, e-commerce websites, where the content blocks/product listings are huge in number.

8. Read More links

Visitors hate to read huge blocks of text content. They always prefer to read the excerpt and choose the one they like to read further. It would be a good idea to show excerpts (wherever applicable) with a “read more” button linking to the in-depth article.

9. Include a Site Map

A site map should be a key part of your navigation toolbox. This isn’t so important for small sites, although it can come in useful and is great for SEO, but if you have a huge site with lots of pages and information it is a necessity. When I visit a big institution’s website the first place I go to find what I need is the sitemap. You should make it easy for your visitor to find the link to your sitemap. This is often at the bottom of the page, but if it’s important to your navigation you could include a link in the main navigation bar. Some sites, like Apple, for example, include the whole of their sitemap in their footer.

10. Breadcrumbs

Breadcrumbs are those little links at the top of a page, usually below the navigation bar, that show where you have been and where you are now. They make it easier for a visitor to figure out where they are at that moment, and how they got there. They take the form of Home > Sub-Page > Sub-Page.

11. Keep to the Essentials

Too many links on your navigation can end up causing it to be cluttered and confused. You should keep the top level of navigation for your most important content – i.e. the content that you want your visitors to get to first. Anything else can be dropped down a level or two. This helps to keep your navigation clear and focused. Sub-pages can be contained in dropdown menus and flyouts.
In some cases, it would be more meaningful to add icons.

12. Test

At the end of any web design process, you get to the next most important stage – testing. You need to test your navigation to make sure that it is actually a useful navigational tool. Don’t just test it yourself. Ask your friends and family, people unfamiliar with the site to test it for you. That pair of fresh eyes will help to pick up on any problems and inconsistencies. You should also test your navigation to make sure that it works cross-browser. You might find that your navigation bar appears differently in Firefox and Chrome, or that IE doesn’t like those rounded corners you’ve so lovingly added.
Follow these steps and you should be on your way to 100% navigation success!

Any plans to look into one of the many security systems? If so, there are important steps to take. For instance, protecting your family from possible problems can be as simple as obtaining CCTV cameras. If installed properly, wireless Security Cameras allow you to view them locally, even remotely access them over the web via any web browser such as IE, Firefox, Chrome, etc. Be sure to browse the web for additional information.

Announcing the launch of IndoFolio

Gopal Raju — Fri, 18 Dec 2009 12:33:47 +0000

Good News! I’ve quit my day job to get to do the things I enjoy doing very much on the internet! Yes, that means I’ll be spending more time on ProductiveDreams and taking up freelance projects at the same time. As a first step, I am launching my portfolio – Indofolio.com

In this post I would like to give you a brief overview on IndoFolio and its design.

Why IndoFolio?

I wanted to use a domain name that makes it clear that I am from India and Indo is the most popular prefix used to indicate India. My second requirement was to include “folio” which makes it obvious that this is my portfolio.

Concept behind the design

My name “Gopal” is another manifestation of Krishna who was one of the incarnations/avatars of Lord Vishnu according to Hindu mythology. This inspired me to include other avatars of Lord Vishnu as well. Nothing religious! This was just an attempt to come up with a unique design concept.

Just to let you know, I am a great fan of Russian Art! and was very concerned about achieving an Indo-Russian effect. Though it took me some time playing with Fireworks and Photoshop, I’m happy with the final output.

Softwares Used

The initial draft of IndoFolio was created using Fireworks and was purely vector. Then I took it to photoshop, to burn and dodge a few areas which helped me achieve the “painting” effect. I believe Photoshop gives more control when it comes to burning and dodging.

In the following images, you can compare the Fireworks and Photoshop version of the avatars. I’ve given a one line description about each avatar, for those who are curious

Matsya – The Fish Incarnation is the first one among all.

Kurma- Lord Vishu assumed the form of a tortoise for this avatar.

Krishna (aka Gopal) is considered to be the 8th avatar.

Varaha- The Boar, is one of the interesting incarnations which appeared in order to defeat a demon.

and finallyVamana, the dwarf brahmin.

These are just 5 of the 10 incarnations of Lord Vishnu.

Image Optimization

Optimizing the images was a challenge as I had to maintain the image quality. Transparency being a major thing to consider, I had to convert most of the images to 24bit PNGs. I used some online image optimizers like PNGCrush to reduce the file size.

HTML/CSS Development

This was really challenging as my goal was to create a single page website using these avatars. I planned to use JQuery to make the site more lively, different and user friendly. Using JQuery intensely for a single page website is no sin

After doing some research, I decided go ahead with horizontal parallax. For more details about Parallax check out my previous blog post (I created this post while working on IndoFolio).

So that’s it! I would be glad to hear your comments (good or bad) on IndoFolio.

Learn how to create web designs with HP0-J38 tutorials. These 156-215 tutorial and 642-072 guide include everything from basics to advance features for beginners.

We offer complete range of practice questions for microsoft certifications and pmi certifications. Pass your cissp exam using our up to date exam dumps.

Trend Review: Paper Planes

Gopal Raju — Thu, 20 Aug 2009 18:41:55 +0000

Paper Planes

are normally used to represent speed or a medium to send message. Here goes a list of sites that use Paper Planes.

Paper Planes in websites

Please share your thoughts on this trend using the comment form below

With 70-667 course you will learn how to create stunning web image. Try out self paced 646-230 tutorial and 642-982 guide to become expert web designer.

Download the latest security+ questions and practice test to prepare and pass ccda exam. Join our online oracle training program for guaranteed results.

Trend Review: Coffee Stains in Web Design

Gopal Raju — Mon, 13 Jul 2009 18:47:33 +0000

Hi, hope you had a great week end! I know it’s been a while since I posted something, so here it goes…

In one of my previous trend reviews, I had mentioned about the cofeecup trend. What if you drop the cofee on your table or paper? yes, it becomes another trend

Do you think adding some coffee stains to your design would make it look better? Here goes a list of hand-picked designs that proves it! I’ve included links to tutorials on how to create such stains in photoshop as well.

Stains in websites

Coffeenatic

iSpoil

teh C peng

The Greg Brady Project

The Piss Biscuit

Mike Desjardins

What would you need to create these cool hot stains?

Its simple…

Photoshop brushes

Now, how to create these brushes?

Its not that hard. Here goes a nice tutorial by web design library But make sure not to spill your entire coffee after reading this

Coffee stain social networking iconset

Wallpaper

A coffee stain

wallpaper

for to keep you inspired.

And finally, a twitter theme

I hope you enjoyed this post. Stay tuned!

We offer 000-152 design tutorial to make learning of web design fun and easy. Our 70-294 guide and self paced 640-863 tutorial are perfect for beginners.

If you want to get mcse certification and looking for mcp exam help, then join our cisco training program to get guaranteed success

Trend Review: Coffee Cups in webdesign

Gopal Raju — Mon, 26 Jan 2009 12:15:26 +0000

Use of Coffee Cups is another interesting trend I noticed recently. Some of them are relevant to the websites’ services while others are not. However, coffee cups are visually appealing and are weaving path to another interesting design trend

1. Wild Zeitung

2. Art Flavours

3. BrandStorm

4. Cofee In Town

5. Design54

6. Ficod 2008

7. Haus Hoyer

8. Icon Icon

9. Jimmyoh

10. Kinoz

11. Lee Munroe

12. Rodney Edwards

13. teh C peng

14. The Piss Biscuit

15. Jwhanif

We offer SK0-003 design tutorials and 1Y0-A17 guide to help you get started with web design. learn the most useful web designing skills with 642-681 design course.

Trend Review: Clip ‘n’ Paper

Gopal Raju — Sun, 07 Dec 2008 19:55:36 +0000

When two people use the same style it’s copy, but when many use it’s called a trend. It’s too long since I reviewed a trend. So here it goes – ‘Clip n Paper’. This is another common element that I’ve noticed in many websites. Normally websites with this element look grungy, but there are a few clean sites as well, in the list.

1. Amuki

2. Auchtertool Kirk

3. Blurb

4. Brian Wilkins

5. Concept7

6. Deadfall Camoflage

7. Dreamling

8. DrSoft

9. Eko Udruga

10. Ethem Budak

11. Jeremy Thomas

12. Josh Buckley

13. Sako Karalekian

14. Marco Kuttkat

15. Medics Away

16. Membran Ventile

17. Onskelista

18. Plej

19. Prolong

20. PSD CSS Pro

21. Revolution Driving Tuition

22. Simply Fired

23. Spoon Graphics

24. Team Green Online

25. Totally Her

26. Eton Digital

27. Level9 Design

28. Olly Hite

29. Web Notes

30. Works4Sure

31. Black Wave Creative

32. Shawn Johnston

Trend Review: Price Tags (Part 1)

Gopal Raju — Thu, 06 Nov 2008 19:41:11 +0000

Price Tag, another common design element that I’ve seen in many websites. I’ve collected 20 great looking designs with price tags. Enjoy!

1. Adservizimpresa

2. Bcandullo

3. Bigsweaterdesign

4. Blkmtnstudio

5. Davidhellmann

6. Fabricadecaricaturas

7. Fortysevenmedia

8. Fseid

9. Iemai

10. Jameslaicreative

11. Ledzuc

12. Madebyabe

13. Meaganfisher

14. Mootygraphicdesign

15. Nataliejost

16. Seftontransmail

17. Swiths

18. Thecakewalkcary

19. Ushops

20. Wedomarkup

21. Mountain Side Guest House

22. El Rincon De Blablaton

Feel free to suggest any awesome design with price tags

Get professional web designing training to pass 642-165 exam. Learn about latest tools and trends in web designing using 70-647 guide and 70-680 tutorials.

We offers up to date resources for cissp and mcitp certification. Our certified training products will help you successfully complete your itil certification on limited time.

Finally, productivedreams is up!

Gopal Raju — Sat, 20 Sep 2008 21:28:14 +0000

Finally ProductiveDreams is up and live. It’s quite obvious that designers never get satisfied with their work. Same was the case with me when I started off with this design, which took me too long to wrap up. Then a couple of weeks to find the right hosting provider.

The initial version was a static one with around 5 pages and served as my personal portfolio. I started working on the current design about 6 months(not continuously) back. My deep love for webdesign, web2.0 and blogging has forced me to come up with ProductiveDreams. This is my public blog where in I post freebies, my views on webdesign, tutorials and ofcourse my works.

I’m planing to update this site on a regular basis, so do stay connected

No related posts.