Advertise here with BSA

Centering your attention throughout the workday can be a difficult process. You need to truly love your work and cherish the time you spend. Unfortunately not all of us can feel this way 100% of the time.

Freelancers are often given tasks related to concepts they care nothing about. In this regard there isn’t much compassion to put into your work. So how do you keep yourself motivated and on-task? I’ve put together just a few ideas which you may try to follow throughout the day. The sooner you complete work the easier it is to move onto the next task. Keep your mind in-check and always pay attention to what you’re focusing on!

Take Infrequent Breaks

To start off with this suggestion seems like I’m advocating slacking off. But honestly breaking from your work every so often is possibly the most important choice you could make.

It’s simply not healthy to stare at a monitor for 5-7 hours in a row. This is especially true if you’re churning out monotonous work in graphics design software or a programming IDE. Even a 5-10 minute period of stretching and walking around will give your mind some clarity. You’ll feel a lot more level-headed sitting down again and tackling projects.

Some people require more frequent breaks than others. I cannot truly offer a distinct set amount of time, so just feel it out for yourself. I like to break every 60-90 minutes after completing a large chunk of work. This gives me plenty of motivation when sitting down again to hit the next task on my list.

Work in Smaller Intervals

The best way to kill motivation is to start over-analyzing each of your daily tasks. If you spend 20 minutes going over what needs to get done you’ll feel majorly overwhelmed. A tasks list is only handy when it can be accomplished in bite-sized chunks.

The best advice here is to jump right into it! Don’t waste any time in the morning except to glance over your to-dos. Start with the important stuff and just bang it out as efficiently as possible. I also recommend waiting to check off tasks until a later time in the day. It takes away focus to move back-and-forth between your to-do list and real actual work.

Follow the End Game

Ultimately your motivation can stem from the reasons behind why you’re working. If your current project is for a paycheck then use that energy. Everybody needs to get paid to make a living!

It can be a bit more difficult with high-priority projects as stress is an added factor. Keep cool and follow through with smaller tasks one at a time. Whether freelancing or working on a personal project all designers will hit a wall sooner or later. However don’t let this creative block discourage you.

I use this time as an extra break session from the workday. I’ll go and throw on TV or call to chat with a friend or colleague. The only time I would force through the work is creating on deadlines – which at the end of the day is about money.

Find your own end game within each project and use this as the ultimate source of motivation. What is your bottom-line finishing point? And how quickly can you get to this point without too much struggle? Ask yourself these questions before taking on a project so you have an idea of how much work may be required.

Kill Over-Analysis

Another huge deal-breaker to losing motivation is over analyzing too much. When you try to perfect each work it takes a lot longer to achieve any results. This can be fruitful when you have a lot of compassion towards a project idea.

But you can’t expect perfection out of every artistic work you create. And this is especially true when you need to design for a living. Not all freelance projects can wait for your stroke of creative genius to kick in as unfortunate deadlines loom. Try to put aside ego and just get the work done. You’ll feel a lot better having something to look at rather than a blank slate.

This also gives the illusion of accomplishment even if you feel the work is sub-par. It’s generally much easier to go back and correct work you’ve already made than to build something entirely new from scratch. Take this lesson to heart and you will not have trouble cranking out loads of successful projects.

Get Plenty of Sleep!

In a similar domain as taking frequent breaks you need sleep to function properly. I can’t think of a single designer or web developer who has felt good running on barely any sleep.

Now I’m certainly in favor of pulling an all-nighter every so often as necessary. When you have projects piled up to the ceiling it can feel beneficial to work all the way into the wee hours of the morning. But this isn’t a strategy you can incorporate into your “normal” weekly schedule. Get to bed at a decent time and start working on projects earlier – this should give you a bit of extra time in the afternoon to build on your own ideas.

Conclusion

Motivation is key to the success of any business model. You’ll need to dedicate yourself to getting work done and moving forward even just a tiny bit each day. Luckily with so many handy web tools it’s never been easier to jump-start a new project.

But it is still a difficult scenario trying to force out creative work. When you can’t flow with creativity you often have to resort to mindful tactics of tricking yourself into motivation. This can be invigorated through money, connections, branding, promotion, or a dozen other self-rewards. Stay true to yourself and never lose sight of the end goal. Life seems to always have a way of working itself out perfectly.

Advertise here with BSA

It can be a bummer when you’re stuck in a freelancing rut. Anybody who has worked this field will understand the grief of struggling to finish project deadlines in time. Often the work quality will suffer along with the accompanied mental fatigue. Rushing to the finish line will additionally put a huge strain on your creativity!

But there are some techniques you can follow to alleviate a bit of the stress. Notably you’ll want to keep yourself organized and on-task throughout the day. Following a type of schedule is great for keeping plans in motion – but this often isn’t enough!

Check out some of my tips below for building on freelance deadlines. Both web designers and developers will follow this path and it helps to understand the management side. Client work can be very rewarding and nicely fills into a portfolio. But you have to pace yourself and not get caught up in the super-fine details!

Hold Perfectionism at Bay

As artists we all scrutinize our work to the nth degree. This is usually a sign of strong will and careful attention to detail. But there is certainly a line to be crossed where you’re wasting time trying to perfect an already great piece of work.

Try to become objective to your projects and think about things from a higher perspective. Don’t spend an extra couple of hours on a new feature you just thought about on-a-whim. You should try to adhering to a set of standards and move on once at a certain point. The work needs to be completed at some point!

As you continue trying to perfect designs you’ll spend more and more time analyzing, and much less time actually finishing the work. The best mindset is to realize you are on a strict time frame and desensitize the work itself. Without getting your personal feelings involved it just leaves the client’s opinion and your design skills in the mix.

Defining Allocated Tasks

One of the best techniques is situating specific tasks one at a time. For example, once you wake up and get online you may begin with a typical routine. Check e-mail, social networks, etc. It’s best to keep these types of activities set aside for early morning/later evening and break periods.

I tend to sit down and work best when I can focus at 100% for a few hours. Not everybody can follow this dynamic, so taking a 15 minute break every hour or two is necessary. But don’t let yourself get distracted by e-mail and websites every 20 or 30 minutes. You’ll never get any real work done and feel quite unaccomplished when evening comes around.

Plan a Daily List

It can be difficult to predict how much work you’ll finish in a day. Especially because you can’t read the future to plan for possible interruptions. But you can get a realistic idea for how much you could finish, then work from there.

The best part about building a tasks list is that it’s not set in stone. If you cannot complete something today it’ll likely be waiting for you tomorrow. Completing even just a few objectives every day can give you a new-found sense of accomplishment!

But I know many freelancers who fall into a self-defeating system with expectations a little too intense. If you set yourself up to complete an enormous amount of work in a day then fail to do so, it can really bring down your mood. Because of this it’s much simpler to plan for less and finish the day completing more than you thought. It gives your spirits an extra boost of confidence and a positive outlook going into the next day.

Now if you can grip multiple freelance projects every month you may end up very busy. A small to-do list isn’t always the best solution. If you’ve never scheduled work on a calendar it’s worth a shot to see how you feel on such a routine.

Break Down Complex Projects

When you design a tasks list the goal is to keep your attention focused on specific work. If you setup the list full of complicated activities it’s unlikely you’ll have much to check off at the end of each day.

I enjoy creating sub-lists of my daily tasks which involve small yet important steps. This amount of scrutiny isn’t always necessary, but on larger projects it’s almost mandatory to keep myself attentive. The action of checking off tasks as you complete them feels very rewarding and attaches a level of commitment. It can also take up a lot of extra time – so keep this in mind.

It’s important not to force yourself into an uncomfortable position where the work quality suffers. Spend one morning writing out a few tasks and follow along throughout the day. If you feel breaking down any tasks into smaller lists would help just give it a go! I find the best way to adapt into a new routine is to just start doing it immediately. Most likely uncomfortable at first, you may end up pleasantly surprised under a new freelance schedule.

Detail Monthly Project Work

Depending on your attitude it may be worthwhile to plan out a week or even month’s work in advance. Through a physical desk calendar or a digital alternative such as Google Calendar it’s very simple to schedule out a daily routine.

You can even lineup tasks set in hourly intervals to plan out larger projects at hand. But if you don’t feel like going into such detail, just a rough sketch of your upcoming week is always handy. You don’t want to end up forgetting some important items or project deadlines. Whether you stick to digital or paper is completely your call – but it is truly a good idea to have some form of record keeping.

Setup Reward Times

With the constant day-in day-out mentality freelancing can be grueling at times. This is why you need to have rewards at the end of each work session. It’s important not to break your time limits and stick to getting things done for the day. But when it’s quitting time you have to remove yourself from “work mode” to enjoy your life.

Any type of reward system will work, and the activities vary between each person. Some enjoy watching TV, playing video games, surfing the web, exercising, or just hanging out with friends/family. However you split up leisure time should be focused on your personal needs. Just make sure to keep these two different modes(work & leisure) separated from each other.

You may even consider implementing a 2-3 day no work period each month. This could be a time where you refuse to do any work, no e-mails, nothing you don’t want to do! As long as you stay ahead of projects and continue to pay the bills there should be no stress with this kind of schedule. You could also mimic the typical 5-day working period with weekends to relax.

Conclusion

I hope these ideas can be helpful to freelancers all over the globe. It’s a tough job to follow up with web design/development and keeping focused on a single project can feel miserable at times. But just remember whatever your end goal may be – money, experience, references – and make this your ultimate focus.

In due time you’ll learn the ins-and-outs of a daily routine and slowly adapt. This is not a weekly transition and will take some time! So don’t get discouraged with yourself if deadlines are becoming all too much of a burden. It only takes a bit of practice and some real work time spent over a keyboard. If you have similar ideas or thoughts on working freelance design let us know in the post discussion area.

Advertise here with BSA

Designers aren’t just creating pleasing graphics for the Internet anymore. As a web designer you need to consider other properties of user interaction and coding. UX design is possibly the most important topic to cover, and this is especially true designing web forms. All webmasters should understand this message.

Your goal is to offer the simplest path for your users to move from filling out input forms to hitting the submit button. There isn’t a lot of special effects required, although jQuery form plugins have always been a popular topic. In this article I’d like to focus on the user interaction and how each visitor is experiencing your forms. There are techniques you can use to streamline the process which converts to less frustration in your audience.

Keep a Small Focus

I’ve heard dozens of users complaining about signup forms which require too much info. If you’re looking to increase user registrations then you want the form to be as simple to complete as possible. The same goes for newsletter signups and other similar types of input data.

The minimum number of fields will vary depending on your objectives. Registration forms may ask for a username, e-mail address, and 2 password fields. This is certainly reasonable and users looking to signup will be expecting about this length. But consider other signup forms such as the default WordPress style.

Here your visitors are only required a single username and e-mail address. The system then generates a password and sends an e-mail to the given address. This works to reduce original form size and keep spammers at bay. You don’t need to verify your e-mail through a link, but you do need access to your inbox to acquire your new login password!

Perform Actions as Expected

The one thing most users hate is unexpected page activity. You will absolutely want to keep your form behaving in a natural manner, and reduce any JavaScript extras to a minimum – popup guides and Ajax validation are key components. Usable forms shouldn’t be split into multiple columns and spanned across the page. This is just one example of poor technique.

Another mistake I run into often is misuse of the tabindex HTML property. This attribute is wonderful from a usability standpoint since your visitors can fill out forms even without a mouse. But if you have these numbered out of order, or only fill out a few input fields then the whole system is thrown off. This is certainly true with signup forms but even more-so with other types of input – especially online shopping carts.

Security is Priority #1

Whether you’re dealing with customer credit card numbers or simple e-mail addresses you should always put website security first. Visitors are trusting your website and backend code to process each form properly and store user data in a secure database.

If possible I recommend using an SSL certificate on your entire domain. This way users won’t just be protected during signup, but their entire viewing session will be protected via https. It can be a bit of work, but some web hosts like Fat Cow will actually aide you in the setup process. It’s certainly not a requirement for every site but it doesn’t hurt to go that extra mile for security. Your users will feel much safer, and it builds a level of trust going forward.

Additionally don’t fall for some of the more obvious ploys to detect data. Always use a POST data type in your forms unless the information isn’t exactly “private”. GET requests should only be used if the URL structure can benefit from the data(ex. search pages like search.php?q=my+search+terms).

Both of these methods will pass backend data in a similar fashion. But GET data is processed openly in the URL and is susceptible to hijacking. POST data is much more secure, especially behind an HTTPS connection. This fantastic guide by Think Vitamin explains the differences in an easy-to-digest format.

Large, Spacious Inputs

I have listened to a lot of arguments surrounding the sizes of web forms. Standard CMS brands including vBulletin, Joomla!, and Drupal use fairly smaller text sizes for input fields. These are generally default 10px-12px fonts with very little padding.

The signup form on Diigo has a very spacious layout! You need to alleviate room between the many different input elements. Also bold text lets you know which fields have been entered and which are still untouched. As you highlight each field the form responds with a faint blue tint – just a marker to let you know where your cursor stands.

The classic Digg registration form was designed and built in a very similar way. Twitter’s registration form is also oversized so you can’t miss a beat. They are not afraid to use extra white space which gives prominence to the input fields. Their system of labels is also very unique by setting placeholder text when the field is empty. By dropping the color to a light grey you can easily distinguish between user-added text and the field presets.

Conclusion

There are a whole library of new trends emerging in web design. The newer CSS3 specs are still growing in popularity and we can see these properties in various layouts. Web forms are no different and deserve just as much attention from designers.

I hope these guiding principles behind user experience can invigorate you towards building better web forms. The process of handling backend data can be tricky even with simpler languages like PHP. But with just 1-2 weeks of practice you can likely figure out a system that works for you. Web developers both frontend and backend would do well to learn and understand these paradigms. If you’d like to share ideas on building accessible web forms please let us know your thoughts in the post discussion area.

Advertise here with BSA

The world of digital design is full of both young and experienced talent. Freelancing has slowly become a more affordable career path for many web designers and developers. But it’s not enough to just create pretty websites in HTML/CSS. You also need to have some sense in marketing a business!

There is a thin line between the responsibilities of a web designer and a freelancer. Some overlapping examples between the two jobs are design skills like Adobe Photoshop, Dreamweaver, and JavaScript. But you’ll also need to understand client relationships, basic time management, project organization, and a few other corporate-class ideas. It can be a tough, but I hope these tips will help you juggle the numerous tasks assigned into the freelancing world.

Never Overload Yourself

This is a big lesson which takes some practice before you can understand. Many young web designers are often eager to jump into the freelancing business and start earning money. Over time you pickup project after project, and soon you’ve got no time left for yourself. It’s a self-defeating cycle of endless stress.

You need to figure out what is realistic to accomplish in any given day/week/month. Each person’s schedule will be different depending on their obligations. But we can all find time for work, even just hours a day. So it’s only a matter of planning out a proper to-do list.

Manage what you can at first and slowly increase your workflow as time goes on. I started freelancing with 1-2 web projects per month and slowly moved up from there. This process gets easier as you meet more people and build credibility for your name. But you have to know when you’ve reached your limit and learn to say “no” – even when the additional work & money is tempting. It’s not worth the strain on your mental health and some clients will be understanding in waiting a few weeks for your services.

Practice New Skills

It’s important to prioritize your design skills first above all else. Working freelance is a privilege compared to the routine 9-5 lifestyle. As time pushes forward you may become complacent with such a schedule. But try to keep your passion for design in check and held at the utmost importance.

Each of us is coming into the web design field with a different skillset. Most beginners already understand HTML and even a small amount of CSS. It’s important to keep on practicing these languages even if you are well-versed.

The industry is always advancing, so there’s likely new trends to pick up on. And if you grow tired of the easy stuff why not challenge yourself? Try to master a new skill such as Adobe Photoshop, Illustrator, Fireworks, or even another language such as JavaScript. The HTML specs have also introduced new media elements such as native video/audio components.

Staying on top of your game will keep you ahead of the competition and surely improve the quality of your portfolio. It can become a distraction if you have too much work on your plate. So make sure between client work you take at least a few hours to brush up on some interesting topics. I prefer to spend a day or two researching into new ideas I’ve never studied before. This opens me up to a deeper understanding of web design which I can apply to future designs.

Work Out Steady Pricing

How much you charge on any given project will greatly reflect upon your experience. It’s crucial that you can pay bills at each month’s end! Managing your earnings can be an exhilarating process to some, much nicer than the cut-and-run weekly paycheck. You gain leverage and control over your financial life in areas many haven’t experienced before.

But don’t obsess over your prices and payment methods for too long. Clarify upfront with each client how much you’ll be getting paid and through which method. This pushes all the business talk out of the way so you can jump right into the design work. At the end of your day it may be wise to go over each contract again – possibly a 5-10 minute rundown on your current status.

Relationship Building

We all know how important networking can be in the business world. Ultimately it’s who you know that will help you succeed and make a name for yourself in the design industry. You must spend some time networking your brand and getting your portfolio links out there. E-mails, social networks, online forums, and job boards are just a few places you can start out.

You don’t want client work to become an annoying chore in your day. Keep a healthy relationship with all your contacts. If your work is good, they will most likely come back for any future design needs. And positive word-of-mouth references are always helpful towards gaining steady business in the future.

How people find your work will greatly impact their first impressions. Make sure you present yourself in a compassionate and professional manner. You’ll impress even the toughest clients and make a strong name for yourself.

Focus on Individual Tasks

The months may grow overwhelming as your work piles up. Don’t let your focus wane too much off course, or you’ll find it difficult to get anything done. I find it helpful to break up the day into segments of focus. You could start with design and web layouts for a few hours, then switch to coding, and finally end with e-mails and other paperwork.

This is just one loose example schedule, but you should feel out whatever works best. The ability to hold a solid focus for a few hours is crucial – even if you end up switching between different tasks over time. Ultimately you should be able to reflect on each day and feel at ease with the amount of work accomplished.

Conclusion

I hope this article can reach even a few aspiring freelancers. The career path can be stressful at times, but also extremely rewarding. You set your own hours and have the freedom to work with anybody you choose! The growth process is exhilarating, especially for graphic & web designers. If you have your own freelance management tips feel free to share with us below in the discussion area.

Advertise here with BSA

With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. These nice up-to-date cheat sheets, created for WDL by InMotion Hosting, can help web designers and developers keep track of it all.

The cheat sheets are broken up into three graphics:

• Tags
• Event Handler Content Attributes
• Browser Support

Each differentiates between the new, existing, and unsupported features of HTML5. The clean visual grid is easy to run through, lending itself to be a very practical tool for a busy designer/developer. The most useful aspect of it all – it is print-ready for you to pin up on your wall for quick and easy referencing.

HTML5 Tags Cheat Sheet

Click graphic below to enlarge, print or share on your website.

HTML5 Event Handler Content Attribute Cheat Sheet

Click graphic below to enlarge, print or share on your website.

HTML5 Browser Support Cheat Sheet

Click graphic below to enlarge, print or share on your website.

Other Recommended Articles On HTML5

• HTML5 & CSS3: Take Your Design to Another Level
• Fresh Examples of HTML5 Websites
• 10 Online HTML5 Tools For Web Designers

Advertise here with BSA

Social web 2.0 trends have taken over many of our modern static websites. Nowadays it’s difficult to find a company who isn’t on Facebook or Twitter or Foursquare, or any of the other increasingly popular social networks. It’s important to consider this experience and how you can portray social connection in the eyes of your visitors.

I’ve provided a few ideas for sprucing up any web design for a positive social UX layout. You’ll need to consider a number of factors such as interactivity and page elements for user interaction. From what I’ve experienced your visitors will be noticeably more interested in branding than anything else. And this interest always leads to more signups, conversions, and sales.

Form a Community

One of the first tasks you can perform is to surround your visitors with a sense of membership and community support. There are a number of ways you can synthesize this feeling with different web elements. Facebook lets you create a small widget you can embed into your sidebar, and FB users can “Like” your website right within the page. Additionally this widget catalogs the number of Likes as well as recent users & profile pics. Check out the Facebook social plugins menu to see what I’m talking about.

This opportunity grants users a chance to connect with each other and consider the Internet community as a whole. If you run a blog through WordPress or Google Blogger it’s easy to update the comments form with Facebook connection as well. This means users can respond to each-other in real time and hold dynamic conversations.

Allow OAuth Connection

Most websites these days have some type of registration or login process. Members can sign up with their e-mail address and log in for extra functionality. But more web developers are getting into OAuth support for popular sites including Facebook and Twitter. These big players are of course a good option – but even smaller networks such as Instagram and Tumblr have support for Open Authentication.

You may be asking how this can really affect the user experience? Well for one thing it can dramatically cut down on registration time. Additionally users are not storing sensitive data such as passwords or e-mails within your database. OAuth connection verifies the user on the external party’s website and thus requires no personal account information on your end.

This also means your visitors won’t need to update any profile information to leave a comment on blog posts. All their personal data including username, display name, and avatar icon can be pulled from whichever network they use. Try reading a bit more about OAuth in our “Future of Web Design” article published last November.

Threaded User Comments

Threaded comment displays are a bit difficult to implement with your own code. If you have built a website around WordPress or another similar CMS you may be lucky enough to find a workable plugin. A quick Google search for WordPress threaded comments is likely to find at least a few results.

The biggest benefit is that you gain users interacting with one-another in detailed conversation. You’ll find a lot of different opinions about the content you publish, and with different threads you allow users to chain along in a few conversation topics. If you feel more comfortable with a dedicated comment system I recommend Disqus for WordPress.

They have plugins for other CMS engines such as Joomla! and Drupal. However WordPress is easily the most popular of the bunch and I feel this plugin is great for building up social interaction. Users aren’t required to log into your website at all – in fact as long as their Disqus account is logged-in they can comment immediately with their full credentials.

And while we’re considering custom comment systems I might recommend adding a variation of user voting. Digg really hit home with their old comments system, and Reddit threads are most valuable with user participation. In this mass-controlled system spam naturally gets buried while insightful and helpful remarks float towards the top.

Widgets & Badges

We’ve all run into the popular Digg-style voting badges around the web. These type of in-page widgets allow members of such networks to share and vote on your stories. The most popular examples include Reddit, StumbleUpon, Google+, Twitter, and of course a few others.

What social experience could be complete without direct access to social media sharing? Your visitors are likely going to use at least one of these services, if not many! If they enjoy your content these badges(when properly placed) make viral marketing just a few clicks away. But you certainly don’t want to go overboard with this trend.

It’s best to test out the waters and include a few different badges over a couple of weeks. Using this knowledge you can best choose which badges have the most impact based on your visitors. I’d limit to using 3-4 vote badges at most, unless your layout can support more.

Include Your Profile Links

And finally you want to include links back to your own social media profiles wherever convenient. As mentioned earlier you should definitely sign up for a couple of the most popular networks if you haven’t already. Twitter and Facebook are the biggest, and you can choose from other alternatives based on your niche.

Small businesses will likely see no point in a Friendster account or mlkshk. But joining LinkedIn may be a good idea for both networking with friends & possible customers. The mobile check-in service Foursquare could also prove helpful in drumming up local business.

Conclusion

These are just a few popular ideas for additional social outlets on your website. The Internet is a constant buzz of attention and information. More people are using the World Wide Web than ever before, and thus we’re more connected globally through alternative media. Your website will stand out among the crowd if you can successfully follow with the trends and keep your visitors connected in new and exciting ways.

Advertise here with BSA

It’s that time of year again, where we look into our crystal ball to see what will be the hot trends in web design for the upcoming year. It’s no secret that trends come and go, with some hanging around longer than they should. (Yes, splash page, I’m talking about you.) But trends are a necessity in the development and growth of our craft. Trends are born, improved upon, and often spawn other trends. So as a web designer, when you apply trends to your projects, challenge yourself to expand upon them and make them your own.

As you read this article, keep in mind that the shift in trends from one year to the next may be subtle, and you will probably recognize some of these trends already. But it’s our estimation that the concepts we mention below will grow and become even bigger in 2012.

1. Responsive Web Design

I believe eventually, we’ll all stop talking about responsive web design – not because it will go away, but because it will become what’s expected. However, I don’t think this will happen in 2012. It’s still too new of a concept, and there are many web designers that are not familiar with it at all.

The continued introduction and adoption of more an more mobile devices is what will make 2012 the year of the responsive web site. Web designers and developers will move to the use of fluid layouts instead fixed width, and media queries will find their way into many more stylesheets – allowing more sites to easily be viewed across multiple screens sizes and devices.

2. Fixed-Position Navigation

We have all run into this technique at some point, mostly on personal websites or individual blogs. I have seen a large drop in this trend during 2010-2011, but a resurgence has been appearing over the last few months.

If your website doesn’t have a lot of main navigation then you only need to provide a few small links. So why not keep these visible to each user at all times? This can dramatically improve website performance and even blend into the overall page layout with ease. The concept idea is to keep the navbar and internal links/logo locked in place as your visitors scroll through the content.

jQuery has allowed for very rapid prototyping of this effect. And even without JavaScript enabled you can apply some fancy CSS code to replicate the sticky nav effect. Most of the static navigation bars in 2011 have followed the user’s movement around from page to page. Yet in the example below Simon Wuyts has taken fixed navigation into a new level.

You never consider keeping your webpage content set into a slideshow-like panel for easy display. Not only does this remove the worry of screen resolution, but the navigation system is easy to work with and carries over nicely into mobile browsers. You may seriously consider this technique and all the major benefits during a 2012 site layout re-design.

3. Circles

This trend has actually been noticeable in web design for a bit, yet it recently had died down to lay low for a couple years. During the web 2.0 boom designers were focusing more on desktop-based trends such as drop shadows and rounded corners. But with CSS3 it’s now easier than ever to create these fancy box effects.

Additionally you can design circles and shapes without the need for any images. The impact of these features has caused designers to look at photos in another light entirely. I constantly check out portfolios for web designers and have noticed a dramatic increase in circular-shaped elements. These archetypes can be setup as navigation links, footer icons, or even displaying important portfolio works as seen below.

But the most extreme examples aren’t always the best. Circular shapes are smooth and encourage eye contact from your visitors. Use these to single out specific areas in your design such as listings to helpful resources and pages. Just the shape itself is pleasing enough to be dropped into the background and still hold a delightful effect.

4. Big Vector Art

The goofy oversized mascots you can spot throughout websites have begun to claim a brand of their own. Just a few years ago you could not find very much illustration work tied into web branding. But the quality of individual designer’s talent has improved greatly. And I can think of no better marketing brand than a lovable vector-based creature.

The many faces attributed to Mozilla and Firefox are just the tip of the iceberg. MailChimp is another great example which has set the bar higher than ever before. The infamous mailman monkey is featured all throughout the website and also throughout their iOS and Android apps.

Additionally the small businessman found throughout Freelance Switch really sticks in my mind. There are a slew of unique vector dudes to be found in their layout. This kind of practice has adapted into a whole new realm of website aesthetics. And if the year 2011 has shown anything it’s that 2012 will be chock-full of these adorable vector logos!

5. Multi-Column Menus

Contrary to our previous example, there are times when a website consists of way too many links to handle. Reasonably the standard type of navigation gets too messy and congested unless you move links into the sidebar. But user experience testing has shown very good results in keeping core links towards the top of pages.

This new year of trends offers designers a new chance at rebuilding. Ideas are often so black and white, but there is a whole realm of creativity waiting to be tapped into. Multi-column layouts are elegantly brilliant in their own regard. You can easily display numerous links to your visitors and keep this section fitted squarely around your logo.

The best way to get comfortable with this style is practice. Check out some recent articles on the topic to educate yourself about trends in web navigation. Designers are eagerly jumping into the testing arena with new ideas every year. Clearly the reform of standard navigation is a big one on everybody’s plate.

6. jQuery/CSS3/HTML5 Animation

I have always recommended jQuery effects when applied in small portions. Web design must encompass the whole user experience as well as fancy aesthetics and bonus animations. Luckily advances in the jQuery library as well as CSS3 specifications allow for some really outstanding effects with much fewer lines of code than ever before.

In just this past year alone I have run into some educational tutorials to be found all over the web. jQuery is the master of frontend browser effects but unfortunately doesn’t boast 100% major support. Thus using a fallback method tied into CSS means your website is compatible with mostly all visitors and still provides an exceptional experience. I can only imagine what developers are planning for new ideas to roll out as we move closer into 2012.

7. Ribbons & Banner Graphics

This is one design element which I had begun noticing a lot more in 2011. Designers began to write simplified tutorials for creating page ribbons, banners, bookmarks, or other types of display badges. Because of the massive emergence of free information more designers have begun jumping into the trends, too.

You would be surprised how many websites have included this style of design in just 6 short months. Beta testers often use these ribbons to classify the current release version of software and mobile apps. Additionally you’ll find banners wrapped around free downloads or featured articles in blogs. I’ve collected a few of my favorite ribbon PSD downloads below, so check them out and be sure to keep your eyes peeled for additional freebies in the coming months.

• Corner Ribbon
• Dark Slider with Featured Ribbon
• Colorful Ribbons
• Green Corner Ribbon Templates
• Simple Product Box

8. Custom Font Faces

The free online font library Typekit provides a free trial for any interested web designers. With this tool you embed a bit of JavaScript which allows you to write any custom font into CSS styles. In 2011 this trend has shot up in popularity, especially among WordPress designers trying to keep their blogs unique from the rest.

Typekit was however a buggy system with very little support up until a few years ago. Now Google Web Fonts has been giving them a run for their money, and it appears to be more popular than ever! You simply go through a library of supported fonts and Google will output the code you need to include. Then you simply reference each font by name when declaring CSS font-family properties on an HTML element.

What I find so exciting about this trend is how recently it has shot into the mainstream. It seems now even developers are creating free plugins to make custom fonts just that much easier to install. There is no uploading of fonts required, no stress involved and very little to go wrong. Bloggers should take notice of this and check out some of the alternative fonts available to them.

9. Infographics

This trend certainly doesn’t affect the overall web design, but as for user experience and content presentation infographics have blown the roof off new-age media. Never before has information been presented in such an easy-to-consume manner. Even if you barely understand the topic most infographics provide data, charts, and supporting imagery so that a 5 year old child could follow along.

Depending on the type of website you may find this trend not all too useful. It can take a lot of practice and time spent slaving away in Photoshop to perfect these works of art. Yet if you have the talent or drive to teach yourself I say go for it! Now more than ever before the Internet has become a place we can all gather and share information. Infographics have expedited this process using the World Wide Web as a presentation medium.

10. Focus on Simplicity

Ultimately the goal of any website is to get your visitors from point A to B as quickly as possible. Simple, intuitive interfaces are the way of our future. In just the past 5 years I have noticed most of the popular design trends stemming from minimalism. This idea is not ill-founded, as the lesser number of page elements to distract visitors will naturally keep them focused on their goal(s).

We can provide so many examples of this, and there are so many areas to cover. Earlier this May we covered a fine gallery of minimalist websites which pose as examples to perfection. Depending on the type of website you have there may be too many required interface pieces to coordinate a simplistic overtone.

But to rearrange a layout into a clean setup doesn’t require minimalism at the heart of it all. Spend some time writing and drafting out ideas for your navigation, page hierarchy, headings, content area etc. I find that a little bit of pre-planning can go a long way towards simplifying everything.

Conclusion

These design trends are just some of the few to keep up with as we move forwards into 2012. The year is unpredictable and nobody can say for sure what to expect. I think the facts are obvious that your average web designer has been learning much quicker in recent years than ever before in history. As such we could only expect plenty of innovation and new semantics ushering us into a golden age of technology and massive Internet awareness.

Advertise here with BSA

HTML5, together with CSS3 and responsive design are the new buzz around web technologies these days. This article will help you get started using HTML5 on your projects today and show you some good practices to put what you learned to good use.

Lets see a typical HTML5 page markup:

<!doctype html>
<html>
<head>
   <title></title>
</head>
<body>
   <header>
       <h1></h1>
       <nav>
           <ul>
               <li><a href="#">link 1</a></li>
               <li><a href="#">link 2</a></li>
               <li><a href="#">link 3</a></li>
           </ul>
       </nav>
   </header>

   <section>
       <article>
           <hgroup>
               <h1>Post title</h1>
               <h2>Subtitle and info</h2>
           </hgroup>
           <p>Content goes here.</p>
       </article>
       <article>
           <!-- Another article here -->
       </article>
   </section>
   <aside>
       <!-- Sidebar here -->
   </aside>
   <footer></footer>
</body>
</html>

With some styling the structure of our page will be like the image below

Doctype

If you come from an HTML 4 or XHTML background, the first thing you might have noticed on the sample markup above, is the new doctype declaration. Really simple, just type it as you see it. And no reasons to worry, it is backwards compatible with all browsers. You can actually change it right now on all your html pages.

Apart from the new simple doctype declaration, you will see many new tags. Most of them are pretty much self explanatory but lets see them in detail.

Block level Elements

In HTML5 we no longer have to resort to “div-itis” to give structure to our page. We have a great selection of new block level elements that help us to create a semantic structure quickly and of course our code becomes more readable and maintainable.

With the new structural elements we can begin to forget about <div id=”header”> and <div id=”footer”> and start using the new <header> and <footer> tags. They work the same as a div but hey, less writing, more semantic code. We are also introduced to other new elements such as <section> <article> <nav> <aside> <hgroup> <figure> and <figcaption>.

The use of <header> and <footer> is obvious. The <nav> tag specifies the navigation links of our page instead of having <div id=”navigation”>. <aside> refers to a section of the page that is separated from the main content. It is mostly used for sidebars today, though some developers suggest it could be used to contain some secondary information for example, for articles.

<section> is used to give structure to our page and contain parts related to a certain theme while <article> can contain a blog post, news post, comment etc. A <section> can contain many <article> elements and an <article> element can contain many <section> elements.

We also have a new container for our headings <h1> to <h6> which is the <hgroup>. Finally we have a <figure> element which is container for a representational image, related to the content but its presence is not mandatory. The <figure> element can also contain a caption using the <figcaption> element.

Inline Elements

HTML5 introduces some new inline elements too. <time> and <mark> are a couple of these new ones that help to make our markup even more semantic.

<time> is used to display time semantically. You can choose to display time, date and both. Example below

<time datetime=”20:00”>8pm</time>

<mark> is used to highlight parts of content for example when a user searches for a specific term. Its difference from <strong> or <em> is that it gives no special meaning or importance to the content it highlights.

Media Elements

HTML5 also brings us some new media elements. We have <audio>, <video> and <embed> tags together with the <source> tag to specify media sources. The simplest way to use them is below

<!-- simple audio use -->
<audio src="audio-file.ogg" controls>
</audio>

<!-- simple video use with multiple sources-->
<video controls>
   <source src="video-file.mp4" type="video/mp4"/>
   <source src="video-file.ogv" type="video/ogg"/>
</video>

Unfortunately, support is not so great yet. Browser makers chose different filetypes and encoding for the sources they support so you have to use multiple versions of the same media with different encoding and you need a flash fallback to support even older browsers.

Canvas Element

One of the other great new features HTML5 has to offer, is the <canvas> element. It gives you the ability to draw shapes dynamically or even manipulate images. <canvas> by itself provides vast possibilities in modern web design and development but it is not a matter to discuss in this article.

Good Practices

With all those new elements some people are bound to get confused. Should we use a header inside an article to contain all the title info? Should we wrap every heading with an <hgroup>? To help you out, here are some good practices about these new elements.

The less is more motto stands in HTML5 markup too. For example when you have a single <h1> heading in your <article>, there is no need to wrap it with an <hgroup> tag. If you have two or more headings, then wrapping both of them with an <hgroup> would be a good use of the <hgroup> element.

<!-- incorrect use of hgroup -->
<article>
    <hgroup>
        <h1>Heading</h1>
    </hgroup>
    <!-- rest of content here -->
</article>

<!-- correct use of hgroup -->
<article>
    <hgroup>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
    </hgroup>
    <!-- rest of content here -->
</article>

Do you really need to have a <header> and a <footer> element on your <article>? Depends. Do you have many info regarding the article like multiple headings, date information, comment information etc? Then the <header> would have semantic meaning and would be used correctly. Again refrain in using too many elements when they are really not needed. No need to nest a single <h1> in a <header>. Same goes for the <footer> element. Do you have post information, author information etc? Then a <footer> would be appropriate.

<!-- incorrect use of header -->
<article>
    <header>
        <h1>Heading</h1>
    </header>
    <!-- rest of content here -->
</article>

<!-- correct use of header -->
<article>
    <header>
        <hgroup>
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
        </hgroup>
        <p>Date and Author information</p>
    </header>
    <!-- rest of content here -->
</article>

Should you use <section> or <article>? There really is only one way to tell whether you should use one of these elements. <section> refers to a structure that contains related content. <article> on the other side, contains independent content. So a <section> can have many <article>s and an <article> can have many <section>s. It all gets down to what the content is.

Do you use <aside> only for a sidebar structure? <aside> started out that way, but the specs have changed since then. Nowadays <aside> gets another semantic meaning when used inside an <article>. It denotes secondary content related of course to the main content inside the <article>. When used outside of an <article> it is still considered secondary content but for the page as a whole, sidebars being a perfect example.

<!-- aside outside of article -->
<div>
    <aside>
        <!-- use as sidebar for example -->
    </aside>
</div>

<!-- aside inside of article -->
<article>
    <!-- main article content here -->
    <aside>
        <!-- secondary related content -->
    </aside>
</article>

Browser support

Support is great for most of the new HTML5 tags, especially the block level ones. All you have to do to enable all the modern browsers to understand them, is to include the code below in you css file.

article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
    display: block;
}

For IE, this is, of course, not enough. Still all you need to do, is include the html5shiv script when the page load in IE. Use the code below

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And that’s pretty much it. You can start using these new HTML5 elements today and make your markup much more semantic, readable and maintainable.

Advertise here with BSA

During the process of launching a new company your logo and branding ideas are possibly the most important concepts. You have to consider not only the solid brand, but a whole slew of factors additional including website design and user interface, internal graphics, print work, marketing & conversion goals, maybe even branding yourself on mobile devices too. It can be a lot to consider all at once – but I’ve included a few tips below which may help you during the process.

I always recommend new startup companies to spend at least a few days brainstorming for ideas. These may include ideas for your company domain name or logo fonts/styles. Consider asking yourself “how do I want to portray the company?”. This question has no single correct answer, and you can take a determined startup team in plenty of different directions.

Get Inspired!

You can’t get much done without that spark of creative inspiration. This is most likely the reason you decided to launch a startup in the first place! With that said you probably have a few companies in mind from which you’d like to draw inspiration towards your own branding.

Many designers consider this plagiarism, but there is a huge difference between blatantly copying and stealing something vs building smaller ideas into your own concept. I recommend picking out traits and characteristics which you enjoy from the many brands you admire. For example you may really like how Google’s internal pages are structured in a clean, organized fashion. This model may become a template for your own website, or maybe just the idea itself can affect your overall layout.

Branding ideas can hold much more value than simple website interfaces. Consider the Dropbox home page which presents an easy-to-follow video presentation about the company and how you can benefit from their app. Some people will love this style and attempt to port it over into their own branding, which I say is perfect. Try spending 2-3 hours writing down a list of ideas from different companies and which specific bits you want to replicate in your own way.

Hit the Design Galleries

Nothing says inspiration like a whole collection of design screenshots layed out in easy-to-skim format. Web designers have become accustomed to the many galleries of logos, business cards, websites, and plenty of other stuff.

My personal favorite Pattern Tap doesn’t select just a single category to focus on. Instead their gallery boasts user interface elements which are separated into many categories. These include website footers, signup pages, sub-navigation, form buttons, tabs, thumbnails, and slideshows, among many others. You can signup for a free account and start building your own set of favorites right from within the website.

However if you are looking for logos and identity branding I have to recommend Logopond. Their gallery is constantly updated with some of the finest branding examples I’ve ever come across. According to their BuySellAds profile the site can push upwards of 3-4 million pageviews each month, which should give you an idea of their popularity. LogoMoose is another logo/branding gallery which has grown exponentially in the past year. They’ve even renovated to include a personal site blog and forums for member discussions.

What are your Goals?

The purpose of your startup is not a simple 1-sentence description. Often your goal(s) encompass more than just “make money” to include building a helpful end-result for your users. You want to create something which benefits the community and helps to propel your startup into popularity.

A good way to identify your own goals may be to look at similar startups in the past. For example, to launch a social news sharing community you may look to the steps of Reddit and Digg in the previous years. You may also be looking to build a solid community of members through marketing tactics. But how could this be accomplished?

I always find that branding and goal setting will pave the way to your company’s ultimate success. And you don’t need to be pulling in $2 million a year to be labeled as a successful startup, either. As long as you are profitable and happy doing the work then things are going very well. I consider success to be very subjective, anyway.

First Impressions

When visitors initially see your company brand on a business card or website there are always pre-judgements based on your logo and presentation. This first impression is super important for building communication and support as your startup grows.

Potential users or members are generally not coming to your website under any expectations. Thus it is your job to dazzle them with a fantastic logo and marketing display. The first few seconds your visitors will be trying to figure out what your startup is for and why they should examine it further. This is why your byline is extremely important in first impressions.

The whole logo text and byline actually plays a huge role in branding. For example check out the new MySpace re-design which uses the calling “Myspace – Social Entertainment”. Also the new Oink iOS app launched recently with a great slogan “Oink – Rate the Adventure”. Keep in mind you don’t need to include a byline on your logo, but it will become part of your overall branding in web and print design.

The Logo Formula

I hate advising on logo design because there are so many different options and techniques to use. Checking out related startups will give you a more solid realm of possibility for what you can do. Icon designs, illustrations, vector animals, or other graphics will certainly liven up the logo text.

People often question why should I even bother with a graphic component? Many companies and startups do rise in popularity with just a basic logo font and business card. And while this is true, marketing A/B tests and studies have often shown that a bit more flair in your logo will burn a unique image into the brain of your visitors. You can also pass around the graphic to different areas in your website other than the logo. The 16px favicon is an important aspect of web design, along with icons or illustrations for page aesthetics such as footer and sidebar artwork.

There are so many examples, I try not to single out specific companies. But as a case study let’s look into the market of selling website templates. There are 2 brands which use polarized yet interesting techniques. I’m sure you all know about Template Monster and their adorable monster head. This one small piece of artwork has given precedence to the Template Monster brand, shooting the company into mainstream.

A template-selling competitor WooThemes actually incorporates a small graphic into their text logo. The techniques between these two differ only slightly, yet the results are so dramatic between both brands. The logos are also memorable enough that you can quickly recognize them from a print ad or business card. This is similar to the Dream Template design which uses different colors within the text layer to jump into the foreground.

Conclusion

There is no perfection when it comes to logo design. Creating a brand for your company requires a lot of time and creativity. If possible brainstorm ideas with a few different people to mix up creative energy within the group. Along with my tips above I highly recommend our article on personal branding for even more support. If you have questions or similar ideas please share with us in the discussion area below.

Advertise here with BSA

There can be many pitfalls on the way to getting traffic to that beautiful site you created. All the design and creativity in the world won’t bring visitors to your site. You have to know a few basic laws of optimizing a webpage for search before the traffic will begin to flow in your direction.

Below are a few tried and true reasons why your site may not be converting visitors to customers and what simple steps you can take to fix the problems you may be encountering.

1. The Keyword Search Doesn’t Match The Landing Page

This is the most overlooked and perhaps the most important element if you want your PPC campaigns to pay off. Beyond doing the research and having the perfect set of keywords and keyphrases you need to make sure the ads you create for the keywords are pointing to the right page in your site and not just your home page. If your website sells bicycles you are going to want to group your keywords based on the mindset of the potential customers. For instance, you would group “low-cost bicycle,” “bargain bikes,” “cheap bike” separately from “best quality bike, ” best bikes,” “pro bike;” Of course this is a very simple explanation, but you get the gist. Create pages that appeal to both mindsets and aim your ads accordingly. For instance I recently typed “low cost bike” into Google. These were some of my results:

Pay specific attention to the “Bicycles at Target” ad that I’m sure Target is paying big bucks for. This is the page it takes me to when I click through:

What am I supposed to do with a tent when I want to ride a bike? I can guarantee Target did not convert that searcher to a customer!

2. You Don’t Have A Clear Call To Action

A focused call to action page will have your potential customers performing what you want them to do on your site. Make the page clear, uncluttered with simple enough terminology that gets the benefit of completing the action across as well as where to go to complete said action. A good example of a straight forward call to action is Spotify.

Here you see the benefit – “free music” and what Spotify wants you to do “Download Spotify.”

Another great example of a site that uses multiple calls to action without being overwhelming is FreshBooks.

Here you have a clear benefit of this product- “Focus on your work, not your paperwork.”Multiple ways to complete a call to and none overbearing in anyway. First most important call to action is “Try it Free for 30 Days,” you can see they put it in two spots. Second they give you an option to “Call Toll Free” in a very visible location and the last call to action would be to “Take A Quick Tour” which is tucked away neatly towards the bottom. Beautiful design and getting the conversions.

3. You Have A Flash homepage with little to no content and nothing that guides them further into your site…

Here is an example of a beautiful homepage:

I have no idea what this company does or what they want me to do. The only content is a “contact us” link. Why would I contact them when I don’t even know who they are or what they do.

There are instances of flash sites that have content and draw you into the site further so I don’t want to say you can’t use flash at all. Just make sure I know who you are and what you do on your homepage and there is a clear call to action. For example this artists site obviously wants me to “like” his Facebook page and I know what I get for doing so!

4. They Don’t Feel Like They Know You

Here are some questions to ask yourself before you publish that beautiful site. Do your visitors see a personality behind your website or are you falling into the “strictly business” category? Have you added that personal touch that gives dimension to your website? Can people feel comfortable handing their money over to you? Can they hold someone accountable if they buy a product or service from you?

Create a great “About Us” page with a short but effective bio of your company and maybe a sentence or two about how you got started or who founded the company. Here would also be a great place to talk about your customer service reputation or add some testimonials. People will be more likely to buy from you if others vouch for you and have had a good experience with your business.

Adding social networking buttons will boost your “likeability” and accountability as it adds an extra way for people to be in touch with you if they have a problem with your product or service. To that end, adding a blog will also help people feel more comfortable with you as well.

I hope these ideas have helped you get started with your website design and search marketing efforts. I have used these tried and true tactics on all my clients sites with outstanding results. I hope you great success in creating a beautiful website that converts!