Posts Tagged ‘template’

Managing an Organized Freelance Work Schedule


It takes a lot of time and dedication to build a freelance career. The hours are long, work can be tedious, and often you need to multitask like crazy. But the freedom of release from a regular work schedule can be fantastic.

In this guide I’d like to go over a few solid techniques for getting organized in your day-to-day tasks. Time management is crucial if you are looking to succeed as a freelancer. You need to stay on task and feel comfortable working within constraining deadlines. With a lot of practice you can build a great schedule for your hectic workdays.

Setting Time Limits

For many of us it can feel great to spend the whole day working non-stop. But over time this is very draining on your mentality. I frequently become fatigued throughout the day trying to complete many different projects at once.

Because of this it’s important you set limits for yourself. Understand that a time limit will give you more reason to stay attentive. If you work for one(1) hour straight with the knowledge that you can take a 20 minute break afterwards, it doesn’t matter how much work you get done. Surely some amount of work will get done in the hour regardless of what you focus on.

larger clock photography

This type of work/break switch scenario can be mixed around in different ways. You could have a 30/30 minute split, or even shorter if that works for you. I feel most comfortable working in 50-60 minute periods. This is enough time for me to complete large chunks of project work and come back after the break still just as motivated.

Reflect on Each Day

Both at the beginning and end of your work day you should spend a bit of time in reflection. Go over what you have accomplished (or what you hope to accomplish), what worked, what doesn’t, and any other thoughts floating around.

In the mornings I generally like to spend this time researching online. I’ll check e-mails and go over my outline of tasks for the day. If there’s anything I’m confused about a quick Google search can generally clear things up. I feel it’s best to get this out of the way early so I can dedicate my focus later on getting work done. It also switches my mindset in gear and ready to go!

indoor house patio @ sunset

However at the end of each day your reflections will be very different. You should look over any tasks which weren’t completed and rearrange them accordingly. Try to look at the positives for how much work actually did get done. It can be discouraging when we don’t finish as much as we’d like to. But there is always tomorrow for tackling that next piece to your project.

Building a Tasks List

It’s a no-brainer that having a to-do list for each day will trim out a lot of confusion. But how you break up this list may vary between jobs. Especially if you work in many different fields such as design, coding, or writing.

I suggest testing out a few different methods for writing down tasks. For designers you’ll need to break down identifiable goals and check them off throughout the day. These could be tasks such as “homepage PSD design” or more detailed like “finish sidebar icons in PSD”. Whatever format you choose, make sure it keeps you focused on the ultimate end goal.

Wonderland Rabbit and Pocket Watch

Another trick that works well is breaking down larger tasks into smaller sub-tasks. Then you can cross these off as you go through the list, and finally completing the task will feel monumental. A detailed list also paves the road for you to follow instead of just “finish coding web template”. You can clearly define goal markers instead of bland ideas, which allows much more room to grow.

You also have to consider if you would be satisfied building a list on the computer vs writing it down. Some new-age techies really do feel more comfortable with their to-dos stored digitally. I have my project tasks saved in Things for iPhone and Mac. It means I’ll always have access to my lists wherever my phone is, which provides a lot more flexibility. Find a procedure that works for you and stick to it!

Utilize Break Times

We all need to find some room for taking a break in-between work sessions. Even if you are just breaking for lunch or a quick snack, those few minutes are of vital importance.

Take the fullest advantage of your breaks and completely clear out your mind off work. Try doing something recreational if you aren’t already planning something (eating a meal, exercise, etc.). Video games or TV shows can work well if you’re freelancing from home. Alternatively you could browse the Internet a bit, make any necessary phone calls or return text messages. Anything to get your mind off project work.

The Mad Hatter - Disney World, Florida

It’s important to have this small break session every so often as to not drive yourself mad! Work can be fun, but it can also drive a wedge into your creativity. And that’s something you don’t want to fatigue. With a fresh mind you’ll be pumped to hit the keyboard again.

Plan for Realistic Deadlines

The feeling of finishing a huge chunk of work is such a relief. It’s great to know you’ll be secure on money at the end of the month. But there is a limit to the amount of work you can realistically complete in any given day.

Because of this you have to be compassionate with your work schedules. Don’t over-promise clients on things you aren’t sure you can achieve. This will likely turn into a scenario where you’ve stayed up all night chugging coffee to finish those extra tasks. And the money isn’t always worth it!

take some time for rest!

Remember that getting yourself on a proper diet and sleeping schedule is just as important as your working schedule. Any daily routine will suffer if you can’t get enough sleep at night. You’ll build up a lot of internal stress as well, which makes focusing and completing work immensely difficult. Figure out which times of the day feel most productive for you.

I swear by waking up early in the morning and starting on lengthier tasks such as writing or editing. Come the afternoon I’ll switch to design/coding, e-mails, chats, etc. But I spoken with freelancers who can’t seem to get much done until after the sun goes down. Everybody will have their own schedule times which suit them best – so spend a bit of time figuring out yours!

Conclusion

It’s difficult to give very specific advice to freelancers on scheduling projects. Since everybody works at a different pace, a typical daily routine will change from person to person. But the overall techniques and concepts for properly managing your time should apply universally.

Whether you work from home or in an office space you always need to find ways to keep on task. I hope these ideas can give you a strong push forward. Freelancing is a very tough job yet also rewarding in many unique ways. If you have any good ideas or suggestions for managing your own schedule please share with us in the post discussion area.

You may also like…

Essential Social Networks for Freelance Graphic Designers →
Technostress – The Freelancers Disease? →
Repeat Work and the Search For The Holy Grail →
Thoughts and Considerations for Freelancing on a Part-Time Basis →
Is Working Freelance Really Worth It? Pros and Cons →
Promoting Your Freelance Design Business with Social Media →
Tips for Converting Your Freelance Operation into a Business →
Thoughts on why Spec Work is Bad and Why You Shouldn’t Do It →
3 Simple Ways to Attract Higher-Quality Clients →
Tips for Landing your first Freelance Design Job →
Browse all of our Freelance Articles



Freebie: Colorful 3D UI Kit


We have a fantastic freebie for all of you web designers out there, you’ll love this:)
Designed by Land-of-Web, the Colorful 3D UI Kit comes in .psd format and is full of beautifully designed modern web elements covering almost all aspects of web design, including:

• Drop-Downs, Silders & Progress Bars
• Switches, Tabs, Icons, Tool-Tips and many useful Navigation Elements
• Search and Select Boxes
• Media Control Buttons and Mini Player

UI Kit Preview

Colorful 3D UI Kit

Download the UI Kit

Within the .zip file you will find all of the .psd elements from above.
Download: Colorful 3D UI Kit

Copyright

This Web UI set is free for personal and commercial use with attribution appreciated but not required. You MAY NOT re-upload or re-distribute this set on any other website, and please link directly to this page for all sharing.

Thanks

Big thank you to Nataly from Land-of-Web for designing and allowing us to release this fantastic freebie. You can also follow her on Twitter.

You might also like…

Fantastic Freebie: 3D Web UI Kit →
20 Free Web UI Element Kits and Stencils →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
40 Detailed and High Quality Mobile Phone .psd Source Files →
40 Professional and Detailed Web Layout PSD Templates →
Android App Developers GUI Kits, Icons, Fonts and Tools →
iPhone and iPad Development GUI Kits, Stencils and Icons →
Illustrator Template Toolbox for Web, Mobile and App Developers →
40 High Quality CSS and XHTML Web Layout Templates →



Weekly Design News – Resources, Tutorials and Freebies (N.117)


This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

Developing a Responsive Website: Background Images

Developing a Responsive Website: Background Images

Webfont Icons: an Alternative to Images

Webfont Icons: an Alternative to Images

How Commercial Plugin Developers Are Using The WordPress Repository

How Commercial Plugin Developers Are Using The WordPress Repository

HTML5 Reset Version 2

HTML5 Reset Version 2

The All-New CSS3 Click Chart

The All-New CSS3 Click Chart

Animated Web Banners With CSS3

Animated Web Banners With CSS3

Prevent Password Reset WordPress Plugin

Prevent Password Reset WordPress Plugin

iPhone, iPad & Browser Wireframe Templates

iPhone, iPad & Browser Wireframe Templates

Meander Free Font

Meander Free Font

Free Typeface NeoDeco

Free Typeface NeoDeco

Social Media Icons Pack

Social Media Icons Pack

Mini Cards: 15 Credit/Debit Card Icons

Mini Cards: 15 Credit/Debit Card Icons

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here are our favorite webdev resources from the past week:

Create

Create

CraftMap

CraftMap

ResponsiveSlides.js

ResponsiveSlides.js

impress.js

impress.js

Revolver.js

Revolver.js

PxLoader

PxLoader

W3Clove

W3Clove

CSSrefresh

CSSrefresh

Previous Weekly Design News…

Design News Roundup Archives →



How Profile Photos Can Affect the User Experience


Social networks have grown into the norm in today’s sophisticated Internet. Modern web pages have become very personalized over the past decade including a number of user interface features. One such example is the user profile picture often accompanied by each username.

featured image - bar cafe breakfast style

Web designers don’t often realize how important this profile photo can be. It distinguishes a blend of personality between each member. And this feature also has quite a few other handy applications to the user experience ultimately offering a clearly recognizable icon. Below I’ll go into some examples of how user photos can improve your website’s performance.

Offer a Default Option

When users first sign up for your website it’s best practices to generate some type of generic avatar. Without this your profiles will look strange having some members with custom photos while others are blank. Most CMS systems including Joomla!, WordPress, Pligg, and vBulletin all offer a standard user picture by default.

example default icons through Google+

If you take some time searching through Google you will likely find a few other excellent examples. This default photo gives incentive for new members to customize their profile details. This holds especially true with members who have profiles on a number of other networks – generally I like to keep all my photos consistent between sites.

Display Photos Wherever Reasonable

Some website layouts are a bit cramped for space and just can’t facilitate room for user pictures. But I would advise almost always including a user’s picture on central pages. It can even be argued to match the user’s photo with every instance of their username.

Foursquare  founder Dennis Crowley

This reinforces the idea that each profile link or page comment is connected to a real person. The glyphs will become familiar over time and you can easily distinguish between links to user pages vs article pages.

There are plenty of areas where you may wish to omit the photo, or resize it altogether. Such an example may include a “recently logged in” widget in your sidebar or footer area. In order to display the last 15-25 active users you could setup a small block of avatars in 3-4 rows. But to fit these in place you may need to resize the images a bit.

Apply Unique Sizes

Of course the dimensions and overall size of your default avatar is crucial to the design. Larger photos will have a much deeper impact on visitors as it will certainly catch their attention quickly. On a similar note there will likely be pages that you want to include smaller photos.

This is why it’s always best to store at least 2-3 different sizes of avatars. Start with your largest (say 150×150) and scale down based on your needs. Plan out the user interface ahead of time so you can fit in reasonable dimensions. Just a few alternate areas to consider are within page comments, shared links, and on other friends’ profiles/following list.

New members on Design Shovel - sidebar widget

There are plenty of free scripts and tutorials available which can help you resize avatars automatically. Why spend time rewriting programs from scratch when there are templates you can work off? These scripts will also save room on your server without needing to save 2 or 3 local copies of a similar image.

Pictures in Discussion Threads

Over time the most active members on your website will become more recognized. Along with their usernames, including a personal photograph can become extremely memorable. The social news website Reddit doesn’t use any photos and yet plenty of members are recognized by username alone.

old screenshot from Digg v3 comments thread

But understand this is certainly not the majority! Most blogs, discussion boards, web forums, social networks, and IM apps all utilize some type of user photo for easy identification. Many users eventually become a staple to the website community between repetitive comments, massive followers, and other social activities.

On some websites you’ll even find signatures in discussion threads. These are small areas underneath the post content which is specific to each user. You can customize your signature with a graphic, website links, text, really anything you want. But for more standard blog platforms this is a bit too “over the top” for regular discussions. It’s still interesting to compare the different styles and how they play well with profile photos.

Consider your own Brand

It’s great to get behind this issue from a realistic point of view. Ponder for a moment if you were to sign up for such a similar social network, how would you incorporate your own avatar brand? The answer may differ between networks (ex: Facebook vs Twitter) but ultimately your goal is the same.

You want to be recognized quickly and easily by all your visitors. It’s just as important to the average user that their profile is recognized as quickly as a company or brand. This is why I recommend using a generally larger photo size – maybe square 200px or 250px – to represent each person. Position it in alignment with the user’s name, location, or other important metadata.

A good example of this layout is from Digg’s old v3 profile design. Avatar photos were generally aligned to the right with more detailed user information cascading along the left side.

screenshot from older Digg v3 profile page

OAuth Connections

If you feel that custom functionality for user photos is too much to implement you may consider using Open Authentication. With this open API protocol it’s easier than ever to connect into a user’s 3rd party account and pull their data remotely. This includes usernames but more importantly also includes profile photos!

Twitter bird plush doll

The Twitter Developer Center is an excellent example of heavy documentation for OAuth calls. You will need to understand a backend language such as PHP, Ruby, Python, or something similar. It is possible to access user icons through JSON/JavaScript, but it’s certainly not the most recommended method.

San Francisco at Night

Also here’s another article from Google support documenting a basic OAuth call. You can already see how this method would save you time as a developer. But it is also very convenient for your members from a UX perspective. Between Twitter and Facebook it’s likely that most of your new signups will have some option for importing a user picture. This saves your new members the hassle of re-uploading another picture.

Conclusion

These ideas are not exactly new to the web, although they have been adapting steadily over the past few years. OAuth is just one technology which has gotten the ball rolling. It is clear we’re moving towards a cloud-based interconnected transparent system of communication and these protocols are merely a stepping stone in the process.

Overall it is your decision on how to approach personal user data. If you truly feel your website wouldn’t benefit from user photos then you’re likely not missing out on much. But understand the connections which are formed through these recognizable pictures and how they may provide a crucial impact in your community.