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:
Reviewing Sass, a Dynamic CSS Language
Jan 27, 2010 by Victor Murygin | Design, Tutorial, Web DevelopmentDynamic features such as Variables and Functions in CSS have been a hot topic of debate for a while. On one hand, programming-oriented people have been begging for these to be included in the next CSS installments, while countless others are pointing out the difficulties of including these inside CSS rules themselves. One of the main arguments against the Variables use is that it will be much harder to learn and decipher other people’s CSS if developers start naming their own variables for everything.
However, I think languages like Sass make a great compromise. Sass is a higher level language floating above CSS that allows Variables, Mixins (aka functions) and more readable code, while spitting out regular CSS code in the front-end. Visitors to your site can still see regular CSS code, but you can organize it by using a higher level language like Sass on your end.
Here are some of the main ideas behind the Sass language:
table
padding: 2px
td.p
text-align: left
#content font: family: serif size: 1.1em p line-height: 1.5em
This would generate the following CSS:
table {
padding: 2px;
}
table td.p {
text-align: left;
}
#content {
font-family: serif;
font-size: 1.1em;
}
#content p {
line-height: 1.5em;
}
As you can see, the Sass version groups and nests elements for easier readability and less size.
Define Variables in the beginning, like this:
!fontColor = #333333 !padding = 8px
You can then use these variables going forward like this:
#content
color = !fontColor
padding = !padding
p
padding = !padding / 2
If you’re not familiar with variables in programming languages, the main advantage to using variables is to define them once in the beginning and then use them throughout the code. This is useful if you are using the same colors or spacing sizes over and over. Later down the line, it makes it easier to just change the value of the variable in the beginning, than to change 20 different CSS rules.
Also, as you can see in the above example, Sass allows you to use basic math functions for further customization.
Mixins are equivalent of functions in programming languages. While variables let you reuse one property at a time, mixins lets you reuse whole sections of the code at a time.
First, you define the mixins like this:
=tableDesign
table
th
text-align: center
font-weight: bold
td
text-align:left
font-weight: normal
or even specify arguments:
=left(!space) float: left margin-right = !space
Then you can use mixins like this:
#content +tableDesign +left(5px)
This will produce the following CSS:
#content table th {
text-align: center;
font-weight: bold;
}
#content table td {
text-align: left;
font-weight: normal;
}
#content {
float: left;
margin-right: 5px;
}
Overall, Sass gives you a smaller, more readable code, as well as the power of reusing code with variables and mixins (something many developers have asked for) while at the same time spitting out regular CSS code in the end.
Now, there are still some issues of using these higher-level languages, and I just want to point a few things out.
1. Don’t use these languages unless you know how CSS works inside and out.
I wouldn’t advise for someone new to bypass CSS and just start with a higher level language like this. You should really know what goes on behind the scenes, similar to how Dreamweaver and other WYSIWYG tools can be detrimental if a person doesn’t know basic HTML or what goes on under the hood. However, if you know how to code HTML by hand and know how Dreamweaver works, you can use it to your advantage for HTML content formatting to save time. Similar rules apply here.
2. It may get slightly problematic if you’re sharing your work with other people.
If you’re a sole developer, you should have no problem using your own code. Even if you work within a team of developers, I believe Sass can be utilized for everyone’s benefit. Even though some may loathe the idea of learning yet another language, if you know CSS and basic concepts of variables and functions, this should take you about 5 minutes to pick up. If you’re not familiar with programming concepts of variables and functions, it may take 20-30 minutes but overall this should be easy to grasp for a developer.
The only way this may cause problems is if you’re sharing your work with other developers, or if you’re transferring your site to another developer outside of your team and they just don’t want to deal with anything new.
3. While Sass seems to be a relatively supported language, beware of others that may be more buggy.
As far as I know, Sass seems to work just fine. However, there are many other dynamic languages and implementations out there without any standards or support. It’s important to do your research and beware of buggy platforms. You want to use these languages to simplify your life. If the platform itself is buggy (i.e., generates wrong CSS code at times), there is no point of using it, as it will cost you more time and headaches.
Other Platforms and Examples
Sass runs on Ruby. I don’t believe they have made it to work on PHP yet, but here are some other dynamic CSS implementation examples:
- xCSS framework – This is an object-oriented CSS framework that runs on PHP5 and has limited overhead.
- “Supercharge Your CSS with PHP” tutorial – Even though I’m not too crazy on this one, as it does not make the readability better, you can basically use PHP to dynamically write to CSS.
- Variables in CSS – Here’s another way to introduce variables in CSS via PHP. I find it better for readability than the above example. Although this one still doesn’t have the Nesting or Mixins ability like Sass. It is also developed by one person without any community support.
Who knows, perhaps in the future Variables and Functions will become part of the next CSS standards. But for now, these higher level languages can be useful in the right hands.
If you have any other good dynamic CSS implementations, please feel free to share!
Bookmark this post:
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:
When you create profiles for your brand or organization on various social media accounts and networks, you should be thinking about more than just your profile name being used. Selecting the appropriate image or photo to use as your avatar is just as integral as the right profile name and website link you are displaying. All of these things have a great impact on how your profile, company or brand is being perceived. A successful avatar will help people relate and connect with you.
Using the same avatar or similar one on all your social network accounts can help to establish your brand and make it easier for other users to recognize you and feel like they are familiar with you and your accounts. 
Using an image of yourself as an avatar can bring you more credibility and trust. People want to get the feeling that there is a real person behind every email, profile, website or whatever other thing that represents yourself and the services you provide.
What to use?
If you are a company, use the logo. Having trouble fitting your logo into those universal square dimensions? Try to use a portion of your logo or an icon that is in the same styling. Another option is your symbol. This could be a picture of something that represents you even further than the logo, for example we use Charlie for our Twitter profile pic.
If you are creating a personal account, the best option would be a simple photograph of your head shot. Try to use an updated picture — you don’t want to deceive people. Imagine that face-to-face meet up and someone says how different you look. I get that sometimes — my beard comes and goes 
Changing your avatar too often can be confusing to people trying to find you by your photo or the avatar they are used to seeing associated with you. If you must change it out, make sure you have a good reason for doing so. I know that personally when I scroll through my TweetDeck during the day, I look for specific people by their avatars first. If they change them often, it is harder for me to spot them. However, if they are interesting enough, I will find them, regardless if they have a new avatar.
Bookmark this post:
Last post I discussed blending social media into your business cards, now let’s get into those biz cards again. With Pubcon and other conferences coming up, a lot of business cards will be being dished out. Stay on top of your social connections and utilize some of these resources.
Creative Business Card Ideas
MOO minicards are smaller versions of the classic business card format. They allow you to print 100 different images on the fronts. This can be great with promotions or coupons.
Here is a great business card Flickr set of inspirational, beautifully designed business cards. Also check out the Business Card Group Pool at Flickr for some more creative ideas.
Humor can be a great way to capture someone’s interest and keep in memory. It also serves as an icebreaker of sorts and can easily get a conversation moving along.
Virtual Business Cards
Some are advocating a paperless business card world, but the technology (or acceptance of this technology) isn’t there just yet. Sure, it’s cool to ‘bump’ your iPhones and share contact information (or maybe you would rather shake?), but not everyone is carrying an iPhone and this makes virtual cards unstable.
There are also hundreds of sites that offer services to make a virtual business card. Card.ly and Contxts allow users to make a “tiny” portfolio online in which they’ll be able to integrate into networks (Facebook, Twitter, YouTube, etc.) or share via SMS.
Although I think the main idea and green aspects of a paperless business card are commendable, I won’t be jumping on that anytime soon (much like how Kindle hasn’t make the paper page go the way of the dodo yet). I recommend recycled paper for card, as the environment matters. The one big advantage printed business cards have over any virtual method is that they serve as a reminder. Once information goes into your phone or PDA, how likely is it you’ll remember to look at it again?
What to Do with All Those Business Cards You Have?
CloudContacts is a service that scans all of your business cards that you have gotten over the years from conferences and networking events and transcribes and connects your business cards on social networks, email services and CRM systems. This allows you to access your business card contacts from anywhere in the world. Or you could just throw them all away…
Personally, I have a bin of business cards that I have gotten or collected because I met the people or I just saw the card and thought it was visually appealing. Some are beautifully designed and given such personal touch, while others are clean and classic. Whatever the reason that I saved these cards, I like the tangible aspect of them- hard proof that they are out there doing business! These cards are more than just information about how to contact someone; in a way, they are a piece of each person.
Making the most out of your business cards can sometimes be the difference between making a connection or breaking one. By using some creative ideas and utilizing other networks, you can be sure to stick out of the stack of cards.
Bookmark this post:
