Small business owners or site owners who can’t afford to hire a custom designer will sometimes purchase template websites. A template can be considered a pre-made website. A good template design should allow for easy customization. This is a cost effective solution that can work great if the design is handled and molded into the company/site’s brand. Here are some simple tweaks that can be used to reshape a template to give it a little bit more customization and personality.
When you are working with a layered PSD, it is easy to modify design elements such as font, color and overall layout and composition. The template should be broken down and labeled as layers for the main components like header, navigation, content and footer.
Logo
This may be the most important element that needs immediate attention. Most templates give you a generic graphic. If you have a logo, some simple resizing and good placement is all you need. If you do not have a logo, creating one can be as simple as buying stock imagery and some fonts to go along with it.
Most of my website design starts with the logo as the jumping off point. If a company or site already has this part of the process complete, I move forward with the logo’s color, feel or mode to layout the page.
Color
If you have a logo that is going to be used for the template, figuring out the color scheme will be simple. This color scheme will then be used to direct the header, text and content color to some degree. ColorSchemer Online v2 is a great color picker/scheme tool that can be downloaded to your computer (PC and MAC). ColorSchemer also has a great blog that covers various color topics, as well as tips and tools for how to design with color.
Favicon
“If you create a favicon, they will bookmark it.” Ok, all Field of Dreams references aside, favicons are a great way to reinforce your brand. Everything is a brand. Creating a favicon is simple. When a visitor sees one, it can be a strong indicator that they are in the right place. Here we took the ‘e’ that is in the 10e20 logo and used that as a favicon. Favicon.cc is a simple, easy to use tool that creates favicons, then allows you to download them for easy implementation.
It is cost effective to use a design template for your site, but try to make it your own so you’ll stand out and look professional. Some things are obvious and simple to do while others require more resources and time, but keeping with the idea of a brand and sticking to that brand’s ’style’ will make the design look cohesive and not picked off the shelf.
Bookmark this post:
Looking for a new widget for your site or blog’s sidebar? New apps and ideas spring up all the time and lots of them disappear just as fast. Let’s take a look at five options for your sidebar.
Flickr Slideshow
These third party websites let you use the Flickr URL address of the user, photo set or group and tags to customize a slideshow to the dimensions you desire.
FlickrSLiDR allows you to easily embed the classic Flickr slideshows on your website or blog. All you need to do is enter the Flickr URL address of the user, photo set or group you would like to embed along with some options. You’ll receive the HTML embed code in return. Flickr Slideshow does the same thing.
Twitter for Wordpress
Twitter for WordPress displays your latest tweets in your Wordpress blog. Check it out to the right of our site!
Wordpress Widgets
There are so many great (and some not so great) widgets in this list.
Follow Me
The Follow Me Widget allows you to display links to all your social media profiles in one easy to access button or window.
Retaggr
Retaggr creates a central location for your personal info and a gateway to all your online profiles and networks. Your own content from those sites are automatically included.
What other great sidebar widgets do you use? Share your favorites in the comments!
If social media is your thing and you also live for web design and pushing pixels, I am sure you are always looking for a few more sites that can feed your cravings for both. Here are a few social media user-generated content sites that focus on design and web design.
These niche social media sites are great because they focus on the content you are after. The homepage will be filled with specific content rather then a general hodgepodge of every type of category. Some of the sites listed below have huge amounts of traffic, and others are just starting out and look promising.
Design Float
Design Float is community controlled content for design. This site has grown tremendously since I first started visiting it sometime ago. By becoming part of the Design Float community, you decide what content is submitted and made popular. The community relies on its members to provide relevant content and rate each entry through “Floats” so that the best and most relevant entries float their way to the top.
Design Bump
This site is very similar to Design Float in that it is a social bookmarking website aimed purely at the design and web community. It’s an extremely helpful place to find both great new design content and to submit your own articles for votes.
Pixel Groovy
This site is a user controlled tutorial directory. Pixel Groovy provide the members, not editors, with the control to decide which tutorials are worthy of being published and which are not. This site has a lot of traffic so the content changes frequently. Pixel Groovy’s RSS feed currently has over 1200 subscribers.
Design-Newz
This is a site that features articles, resources and tutorials written by designers and developers. All articles featured on this site have been hand-picked by a staff of editors to ensure the highest quality. Simply click on a link to visit the source article or browse this site by tags. The site is updated daily with at least 5-10 new articles.
Graphic Design Links
This is another social media site focusing on the Design Industry. Registered users can submit and vote links related to design industry.
Pixel 2 Life
Pixel 2 Life is one of the largest collection of tutorials on the web for web designers, programmers and developers.
These sites all feature design-related content and rely on user-generated input. What sites do you check out for all your design tutorials, articles, inspiration and resource needs?
Bookmark this post:
Crowdsourcing is when someone can post a creative project and sit back and watch as the world contributes ideas through submissions, then the best idea is selected. User generated design sites have always had their share of controversy, and designers/creatives have set up camps on both sides of that discussion. Some say crowdsourcing is evil because it works on ’spec’, while others say that it fills a niche that is cost effective and competitive for designers learning to sharpen their skills.
When I was in school some of my professors would caution us to stay away from these competitions, then there would be some teachers that said it is good practice. I still submitted lots of work when I was freelancing to these sites.
Whatever your stance is on the issue of crowdsourcing design, let’s put that aside and take a look at a few sites and how they can potentially help your design. Some of these are not crowdsourcing designs at all, but rather they are user generated showcase sites.
Web Creme
This is a beautifully simple design showcase site. Think of it as inspirational fuel for your creative fire — the best of the best in design for the screen. I often look through what other designers have done, and this site has a lot to look at and can surely stoke your ideas and have you thinking in new ways. The site offers a link to the designer’s site and also link to the designs being showcased.
CrowdSpring
One of the most popular of the crowdsourcing sites, this site boasts a network of more than [47,000+] creatives from 140-plus countries who vie to provide logo, website and collateral design to primarily small and medium-size business clients.
COLOURlovers
I like this site a lot. It has a great interface and is a simple concept to share and be inspired by color, palettes and patterns. I have this site bookmarked in my inspiration folder and check it out if I need some color ideas. This is a community of designers and artists of all kinds who visit the site to get color inspiration, ideas and feedback for both their professional and personal projects. COLOURlovers’ loyal members create colors, palettes and patterns to nurture their ongoing love affair with color. They join color-inspired groups and forums and share the love by commenting on their favorite creations.
Strip Generator
Tired of pixel-by-pixel painting? Trying to create seamless stripes textures? This free tool allows you to unleash your personal style by experimenting and downloading the tile. You can use it directly in your CSS file or as pattern in Photoshop. The site also has tons of great user generated ideas.
A lot of user generated sites can be very helpful to both creatives and clients looking to find talent in the most cost effective way. There are pros and cons for each, but it surely is a trend that has been growing more and more. What are some great crowdsourcing design or user generated sites you frequent?
Bookmark this post:
As 2009 rolls out and the new year comes in, we will see new ideas being born and some old ones leaving us. This is the circle of design life. What will be trendy in the new year? Why should it matter? 2010 doesn’t mean that all new trends in design will pop up; rather, it just might be that the current trends will slowly evolve. Here are some of my design predictions for the coming year.
Icons
In 2010 I feel we will be seeing more and more icons on the web. This icon craze is partly fueled by social media and the great need to have social media icons on websites. They’ll allow users to easily find things like RSS, Bookmarking, links to other social sites, etc. Icons shouldn’t need elaborate 3D modeling and rendering, unless they’re used for other media as well as the web, but I do see this as an evolving and growing trend.
However, tiny, pixelated and flat colored icons have always struck me as more efficient (think ATM machine, browser windows and your smart phone) and conventional to interface design.
Big Typography
I see typography being used even more as a design element in and of itself, especially big typography. There are so many great type foundries out there creating incredible fonts and giving away some freebies along the way. This way designers have much more access to great fonts now than ever in history.
Magazine Style Layout
The magazine style look for websites and blogs seems to be dominating. This allows the site or blog to be clean and simply designed, eye-catching enough with photo/imagery and splashes of color, and the ability to show off a lot of content on one page with little previews or teasers of the main content.
Less Realism, More Minimal
I see a lot less of the realistic trend in 2010, no more paperclips and notepad looking paper. This is is all fluff unless it relates to the content directly. Minimalism is more of the direction nowadays. I see 2010 as a year designers will stop following trends, because that is a trend in itself, and explore their own unique flavor that each designer posses. But… trends are trendy for a reason, and designers should be made aware of them. The point of conventions is that they work and people are familiar with them.
Maybe we won’t see so much in terms of new trends, but rather an evolution of the current trends. As with everything, in 2010 you can certainly expect the unexpected! What are some trends you see in design for 2010?
Bookmark this post:
When do you stop creating and send your work out to face the public? Deadlines can be a motivating factor most of the time, but you can’t perpetuate the design process forever — sometimes you just have to trust that its wings are strong enough to fly. When working on a project like a new tool, a program, design, etc, you have to have a finish date or you’ll just keep tweaking and reshaping and second-guessing until infinity because there will always be new technologies, conventions or new opinions that shake the ground you built on.
I was reminded of this after reading an article on Wired called Learn to Let Go: How Success Killed Duke Nukem. The creator spent 12 years reshaping this video game sequel until finally his company couldn’t keep pace with the speed of technology and had to shut down. “The story was like many suits-versus-creatives relationships: Developers want to make their product superb, and the publishers just want it on the shelves as soon as possible. If the game starts getting delayed, it’s the publisher that cracks the whip.”
The creative process may seem like a lot of smoke and mirrors, but it is a process. Each designer develops a method for solving basic problems, then evolves that method over time. I have a process, which evolves, that works for me. Sometimes the process is specific to the design problem or general in nature.
The Concept, Research and Discovery
The concept is the starting point of all design; it is the prime mover. Research and discovery play an important role in figuring out what defines the concept as well as what can be added to or removed from this idea. For a website design I will initially look through all the content (text, imagery, logo, etc.) and create a hierarchy based on the purpose of the site. What are all the details of the problem and what is the client’s main goal?
What is already out there that is similar? Researching pre-existing work in the same field by mentors, friends, competitors or legends is helpful to me by competitively analyzing the good and the bad of other work. Plain and simple, learn from others’ works. For some projects I even put together a look book of ideas and images that relate directly to the concept or more indirectly to feelings about certain elements I may want to use in the design.
Form, Pencil Meets Paper
When an idea hits, I find that sketching it out on paper in thumbnails or words is still the most effective way to get a good creative flow going, before I even set up a document on the computer. These thumbnail drawings or word mappings (sketching with keywords) are used to gather the basic idea or composition. This is where form is given to the concept.
Content and Digital Implementation
After seeing a fleshed out polished version of the thumbnails, I get into the pixel pushing. I flesh out the composition and work to create contrast, tension, balance and areas for the eye to rest with all of the design elements. Here is also where I can be inspired to go another direction. This is where the design can evolve or get stuck on the designer’s treadmill. Sometimes the concept is so specific that it cannot be changed. Other times a better idea is found along the way, and the concept is changed to take advantage of the new discovery.
Feedback, Rinse, Lather and Repeat
Client, friends, mentors or coworkers can provide valuable feedback that can improve the design. This in and of itself can become a cycle of review and approval if not checked and limited. You may not be working on the next Duke Nukem video game, but setting up a design process is helpful and necessary to tracking and monitoring a project’s flow and progression.
Some ideas may come out of thin air, but I assure you that there are no smoke and mirrors behind most design work. Setting goals and milestones for projects can be the motivating factors for completion. However, sometimes you just have to throw in the towel and learn from your success or failure… and step off the treadmill.
Bookmark this post:
In wrapping up 2009, it’s good to assess our sites and projects by seeing what needs updating or revisions, like that copyright at the bottom of the page or those old holiday deals that need to be changed out. By thinking of your site or design as a living/changing thing, you can build on the story you have already created and demonstrate to your users that you have a good attention to detail.
Policy Pages, Terms & Conditions, Copyrights, etc.
Make sure all of these documents and terms are updated and reflect your company’s standards and procedures. This routine maintenance can help you avoid legal issues. Update your copyright to reflect the new year.
Photos and Illustrations Up to Par?
You can connect and enhance your message with the use of strong imagery that goes further than the generic, actually works with the content and expresses the story deeper, adding to the experience. Does that image work with the overall message or is it simply filling space? If it is just filling space, you have missed an opportunity. Are the stock photos showing people with huge cell phones or 80’s neon jumpsuits? If so, think about updating them.
Typography and Copy
Strap lines, headlines and pull quotes! Pay attention to these type elements. These are often the triggers that the viewer starts from. Use the copy on a page to further the design, echo the design, and let the text influence the design elements. Now is the time to swap out those holiday deals for New Year ones or just remove them entirely. Make sure all of your expired promotions and coupon codes have been removed from the site, and focus on keeping your copy clean and updated for the new year.
Try Something Different or Just Be Good
Headers, footers and sidebars?! Challenge the status quo and push the pixels without fear of getting it wrong — this takes guts, but it’s worth a shot. Forget any idea that this is how a website design needs to look. Start your ideas on paper and save the wireframes for last. Aesthetics, functionality and usability are all involved with great design but don’t forget storytelling. Connect with the viewer emotionally, think beyond the screen and the web itself and work work backwards. As you try and juggle cutting-edge design and ideas, don’t forget that people have to actually use the site.
Don’t be afraid of inspiration — it comes from everywhere, not just the web. Check out your old record collection, doesn’t that sleeve inspire you! The screen, the browser, is a two dimensional canvass… however, it is a canvass that allows user input and interactivity. Conventions are conventions for a reason. An experience should not entail searching around a company’s website for their contact information. I also hate scrolling sideways unless it is a portfolio site or something that encourages an experience like that. There are always going to be usability issues as well as technical limitations, but this goes for every medium.
Revolution is a Series of Mini Evolutions
Even by pushing your ideas and designs just 2% further, each time you will gain movement and in time be something larger. Have patience with your work. Consider context and the users’ previous experiences with similar content and functionalities.
As 2009 comes to a close, it is always a good idea to check for any old lines of copy or outdated images. The new year is always a good time to think about your designs and sites and see if your message and story is still the story you set out to tell. Being a designer, we have to express the goals and ideas of each of our clients. With every new project we also express a piece of ourselves. Have an exceptional 2010, design your dreams and tell your story with everything you have got!
Bookmark this post:
Content for a blog is the same as a product for a company — it takes more than just a high quality product for the customers to flock to it. You need to present that content in a package that fits your branding.
All blogs have certain visual features in common, no matter how you change the theme or appearance. Blogs are a part of a brand’s overall message, whether you are just a blogger or part of a larger organization’s site. Here are some do’s and don’ts that I have picked up along the way.
What are you about?:
Do you have an About Us page? What is it saying about yourself or your authors? Do you have a nice photo to go with your text? This is the place for new visitors to go and get an idea and or some background on what it is your blog and its contributors are all about.
Don’t make it look drastically different:
Keep it simple and consistent. Having a blog design that is extremely different from the style and branding of your main website could be disorienting to visitors and cause them to make a hasty retreat. The same goes for redesigning it all the time. Consider the blog as a part of the whole and not an entity onto itself. Throwing in a new color or design element that is not needed could clutter up the layout and add to visual chaos. Reviewing your blog at times for these extra elements can be a good idea and allow you to tighten up the design.
Embrace white space:
The spacing between elements on a page is considered white space. This space can add to readability and the lightness of a page.
Do play above the fold:
Keep important information like RSS subscribe buttons, contact email and various calls to action on the top half of the page when it loads in a browser window.
Do use visual interest:
By using a title graphic or photo that helps tell the story you are writing about, you pull in the reader/viewer. Sometimes this will be the pull to read the article in the first place.
Don’t forget about usability:
Ask some friends or coworkers to explore the blog and listen to what they have to say. You may have been too subjective in the design phase and overlooked things. Check the blog in multiple browsers because each one may display things differently.
Do put it on a sub-directory if you can:
If you intend to sell goods or services from your site, putting your blog into a sub-directory has certain advantages. Your main page can then be freed to advertise your products or services and link to your shopping cart. From that page, you can still have a link to your blog (e.g., domain.com/blog). Any links your blog attracts will benefit the overall domain vs. if you were to have your blog on a separate website entirely (e.g., myblog.wordpress.com).
Integrating social profiles:
Integrating Facebook, Twitter and other social profiles into your blog is a great way to get extra exposure, whether you cross-promote your blog content on those social pages or supplement it with additional content. Check out Tim Marsh’s great technical read, Dummies Guide to Integrating Facebook into WordPress.
Do encourage comments:
Blogs can be the best way to establish a conversation. Make sure, if this is your goal, to make dialogue easy and rewarding for visitors. Reply to good or interesting comments as much as possible. Don’t just give the readers an impression that you care about their views, really care and learn from them all. By doing this you create a richer, more active community and this will be noticed.
These do’s and don’ts are simply suggestions to help your blog design/techniques become a success and flourish. What other ideas or tips would you suggest? Share in the comments or tweet at 10e20 with your response, and don’t forget to subscribe to our RSS feed for more great blog posts and tips!
Bookmark this post:
Ok, so you may not have the Twitter following that @apluskor @britneyspearshas, nor may you ever. But there are a few things you can do to increase that followers number in your profile.
Avatar: check, Background Design: check, Bio: check
Here be the basics. People want to know who and what they are following. If you don’t have an avatar to me, that is a big Twitter Fail. Use the two simplest ways of showing and telling potential followers what you or your business is all about. Design a Twitter background that reflects your ideas and slap on a nice picture of yourself or your company logo, mascot or colors. Also tell me about yourself in the bio line; this is a simple way to tell me more and show me where else you reside online and off.
I find it hard sometimes not to just follow someone back out of politeness; however, if I get to that profile page and none of what is listed above is included or I don’t find anything interesting in their stream then I say oh well, I gave them the benefit of the doubt and leave without following.
Private, Why?
Don’t set your tweets to private. Plain and simple. When you shield your account from the general public, you’re going to get fewer followers than if your account were publicly accessible. People like getting a sneak peek of someone before deciding whether they want to follow him/her.
Links to your Twitter Page:
Linking to your Twitter page from other social profiles like Facebook or LinkdIn will help with adding more followers. The more links to your Twitter profile out there, the more chances of someone checking you out and following you. Have a bunch of friends on Facebook? Ask them if they are on Twitter. “Oh yeah you are, well what’s your user name?” Add your Twitter URL to all of your signatures, go ahead- pimp it out! Make a comment on a blog? Why not add your Twitter name underneath the post?
Follow Reciprocators:
Reciprocators are those who will probably follow you back because they have about as many followers as they have people following them. If you come across someone who follows a large number of people and has a big following, chances are this person will follow you back once you start following him/her.
Timely Tweets:
During peak times is when you should try to tweet your best stuff. This will help maximize your retweet potential. The time of day? 4PM Friday EST. How did this number/time come about? Viral marketing scientist Dan Zarrella in “The Science of Retweeting” spent nine months analyzing roughly 5 million tweets and 40 million retweets. #followfriday anyone?
#FollowFriday?:
Some would say add this to the list of helpful ways to build followers. Follow and recommend people, and follow users who retweet your stuff the most. However, personally I rarely look at anything with #followfriday on it. What are your thoughts?
Tools of the Trade:
This site scans the Twitter public timeline for new twits to tweet. A few times a day they calculate individual statistics for each twittering twit within the database.
A site application that allows you to make targeted searches by categories. Great way to find specific industries, businesses and people to follow that may reciprocate.
They offer tools that allow you to tweet more efficiently with lots of automated functions like scheduling tweets, track keywords, follow those that follow you, etc.
If you follow some of these tips, I am sure you can begin to see the follower count in your Twitter profile increase. These are just a small fraction of all the possible ways to increase the number of people following you. For more tips, check out Mashable’s Twitter Guidebook — they have a huge list of the basics to the advanced for those hungry for more. Also check out Fastcompany’s post called Nine Scientifically Proven Ways to Get Retweeted. While you’re at it, follow me @patrickwinfieldand us @10e20 
9 Useful Social Media Extensions and Plugins
Nov 18, 2009 by Patrick Winfield | Social Media Marketing, ToolsFor any social media user at any level, add-ons and plugins can be of great help in saving time and creating new opportunities. Some of the listed are for specific sites, while others are more general. Check out some of them and see if anything can work for you.
Social Media for Firefox Extension
This tool is the the ultimate time saver for building powerful social media accounts. One of the secrets of top Diggers, Stumblers, Navigators, etc, is being the first to submit stories already becoming popular on other social news sites. For example, you can browse Reddit to find good stories already submitted and be the first to submit them to Digg. You can browse Digg and be the first to Stumble pages that are becoming popular there.
StumbleUpon Add-Ons
StumbleUpon helps you discover great websites that match your interests. Simply click the Stumble button and see the best websites. There are over 500 topics to choose from, and, the more you use it, the better your recommendations become!
Digg Firefox Add-Ons
As you browse the Web, you can see whether or not the web page you are currently viewing has been submitted to Digg and, if not, it lets you submit it with just one click.
Glue for Firefox Extension
Glue (formerly BlueOrganizer) connects you with friends around things you visit. Glue works automatically as you browse popular sites about books, music, movies, wines, restaurants, gadgets, stocks, actors, TV shows and other everyday things around the web. The Glue Bar appears right on your current page to show you friends who looked at the same things and what they thought.
Shareaholic for Firefox Extension
If you use sites like Facebook, MySpace, Digg, Gmail, and Twitter, you’ll want Shareaholic. Winner of the Extend Firefox contest, Shareaholic enables you to quickly and very easily share, bookmark, and e-mail web pages via a wide array of your favorite web 2.0 social networking & bookmarking sites — such as Digg, Facebook, Gmail, MySpace, StumbleUpon, and many many others. This is the ultimate add-on for the link sharing junkie.
Add to Any Buttons
Help your visitors share, save and subscribe to your content with Add to Any widgets.
Add This Button
Makes it easy for your visitors to bookmark and share your content with others.
Yahoo! Buzz Buttons
Stories with the most Buzz may be published on the Yahoo! home page – you can impact what millions will see on Yahoo!.
ul.timate.info Add-Ons
The Mozilla Firefox add-on aims to simplify the way people interact with social network sites including Twitter, Facebook, MySpace and FriendFeed.
What add-ons or plugins do you use? Share in the comments below or tweet your response to 10e20!
Bookmark this post:
