You need to upgrade your Flash Player to version 10 or newer.

Our Category: Web Design

Should designers do personal projects?

business | Design | Graphic Design | How to | outsourcing | personal projects | Productivity | Web Design | workflow 0 No Comments

As creatives, most times we feel like we can do it all, or we are put in a position to do it all. We typically take on a ?Jack-of-all-trades? mentality, that can either help or harm us.

For some odd reason, there seems to be a discrepancy of sorts when it comes to doing the work for ourselves. Some designers feel like of course we should take on that Jack-of-all-trades mindset, while others just feel like it makes sense to pass the work off and let someone else do it.

The truth is, they?re both great ideas but vary depending on your situation. How creative are you? What is your skill set? What kind of things stress you out? All these questions should be taken into consideration when determining whether or not designers should do their own personal projects.

Keep in mind, that for the purposes of this argument, we will say that a personal project is any type of work that contributes to yourself and your services. For example, we are talking about business cards, websites, etc. Read More

A 5-Step Checklist for Mobile Website Design

mobile web | Tips | tools | Web Design 0 No Comments

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren?t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn?t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I?ve missed important steps, or wish to touch upon any of them.


Choose the Right Markup

In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it?s important to choose one markup language and stick to it. Explore your customer?s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.

WML Read More

Do You Have What It Takes To Be A Web Designer?

design project | design skills | Tips | Web Design 0 No Comments

Being a web designer, whether it?s freelancing or working in house, is a difficult job. There are a lot more skills needed than just knowing how to code a web site. If you?ve ever considered becoming a web designer, continue reading to see some of the skills needed to compete in the job and freelance web design market. Some of the skills might surprise you.


Writing Skills

web designer skills

image credit Read More

Developing Visual Rhythm in Web Design

Inspiration | visual rhythm | Web Design 1 1 Comment

Think about the driving, repeating intervals of drum beats in the song ?When the Levee Breaks? by Led Zeppelin Read More

30 Greatest Online Project Management and Collaboration Tools For Easy Communication!

collaboration | communication | Freelance | online | project management | tools | Web Design 1 1 Comment

Project management and collaboration skills play a major role in every business and often the outcome of a project is highly affected by the initial planning and monitoring stages of a project. Project management is especially important for small and flexible businesses where all the work is based on a few people who have to communicate and develop the workflow. Globalization has made collaboration even more essential since many modern businesses like web design agencies don?t even have a constant address ? people all around the world are working from their home.

Web-based project management and collaboration tools are the top choice of hundreds of entrepreneurs and thousands of small and medium size businesses. These tools will maximize your productivity, organization, and help you keep on top of your projects effortlessly. Keep track of your projects, manage your workers, set milestones, schedule your work, upload your files, send invoices, sync with your mobile ? all of these features and more make these apps almost necessary.

Continue reading if you?re looking for your first project management app or just seeking to check out alternatives. With a lot to choose from it might be frustrating to find the right app for you. This article presents some of the best project management and collaboration tools out there. There are also tools for brainstorming ideas, hosting conversations and even managing a newsroom. Each of them share common general features, however each of them also has something unique to offer. Most of these tools come with a fixed monthly price, some of them you?ll have to pay for per user and month. Also a trial period is available with most of them so you?ll have the chance to examine and check out if it?s the right choice. Each description contains brief features the service offers as well as the pricing plans.

1. Teambox


Teambox is voted Read More

Web Development Tools, Elements and Techniques

app | extensions | Tips | tools | Web Design | web development 0 No Comments

When I was starting out as a web developer, I had to face some struggles when finding solutions to some of my problems. I had to learn and try new things but there weren?t as many tutorials as there are today. The best alternative was to learn and study from the work of others, analyzing their process and work methods.

These days, it seems like a new tutorial appears every minute, but personally I believe that looking at actual implemented solutions is still a powerful way to learn, and you also have many tools and methods at your disposal which can help you see and figure out how your favourite websites were built. Everything you need to know and learn is right in front of you and at your disposal.

Web Development Tools and Extensions

The traditional view source code option was not enough for a good code inspection. It became very important for a web developer to have a toolbox that could provide him with a set of possibilities specifically made for code analysis and inspection within a web browser. Those tools are called Developer Tools and are usually installed by default or as an extension/plugin, working directly from the browser itself. With the developer tools you can see all the source code of a webpage as you did before with the traditional View Source Code option, but with way more options and functionality than before. You can inspect, edit, watch live results and much more.

Google Chrome (Developer Tools) / Safari (Developer Tools)

Google Chrome Developer Tools

You may be wondering why am I including Chrome Developer Tools and Safari Developer Tools together, well that?s because they belong together. The Developer Tools is part of the Webkit open source project which means Safari and Google Chrome share the same code base, they even share the same layout.

So let?s start with Chrome, my new favourite. Google Chrome?s Developer Tools  is very recent compared with others like Firebug (Firefox), but it?s growing fast and getting better and better with each new version.

The same obviously applies to Safari.

?The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the WebKit open source project, where the tools are called Web Inspector.?

?All of Safari?s powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.?

For a better understanding, you can check the links below.

Google Chrome Developer Tools

Safari Developer Tools

Firefox (Firebug)


With Firefox the smart solution for a web developer is definitely Firebug, one of the most popular Firefox extensions out there. Although the Webkit Developer Tools is growing at a really fast pace, Firebug is probably the most complete and mature tool you can have for web development and code analysis.

?Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.?

Firebug?s interface and work process is extremely similar to Chrome?s Developer Tools (or vice-versa).


Opera (Opera DragonFly)

Opera Dragonfly

This is Opera?s gem for code analysis and inspection. It?s surprisingly powerful and personally I would put it in third place right behind Google Chrome?s Developer Tools. The downside is definitely the aesthetics but its features and cross-device compatibility places Dragonfly among the best.

?A full suite of tools are ready at your disposal. Debug JavaScript, view the DOM, monitor network traffic, preview resources, edit colors and a whole lot more. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered.?

For more information, check the link below.

Opera Dragonly

Internet Explorer (Developer Tools)

Internet Explorer Developer Toolbar

Yes, Internet Explorer has one too. Although the interface looks a bit old and not as good as other solutions since it lacks some functionality, it can be almost as good as the competition.

?The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.?

You can learn more about it at the link below.

Internet Explorer Developer Toolbar

How To

Check a website font

Check another's website font

With real text (not an image of text), the first and easiest way is by using Developer Tools / Firebug, so if you have it just select the text, inspect element and you should immediately see on the right side the font or font-family property which tells you the font that?s being used. Another way to do it is by using an extension/plugin for this purpose. There are probably similar plugins for other browsers like Chrome, but if you?re using Firefox, you have a great add-on called Context Font. With Context Font all you need to do is select the text (again, needs to be real text and not an image), right-click on it and you will immediately get the font and size used.

If the font you?re looking for is being used as an image, you have only one way to do it. One of the many places you can do this is Upload your font and follow the steps.

Good luck!

Check the box model of an element

Check the box model

The box model represents the visual structure of the elements of a webpage using the corresponding properties like width, height, margin, padding and border, according to the visual formatting model. It?s possible to check the box model of any page and element using Developer Tools or Firebug. In order to do that, you just need to inspect the desired element and select Metrics on the right side of the Developer Tools panel. With Firebug, you need to select Layout (not Metrics).

Copy all text content of an element with Developer Tools

Copy all text content of an element

This one is a popular trick which is achieved by using the Developer Tools console. So let?s say you would like to copy this article?s text without the need of having to select all the content with your cursor (particularly useful on very long pages with too much text). To do that, inspect any element on this article page and look for the text container?s name from which you would like to copy the text (which in this case is called articlesContainer), now go to the console option and write the following command: copy ( articlesContainer.innerText ). Now paste the text anywhere you want and you are done! You?ve just copied the text inside our articlesContainer which corresponds to our main article text.




MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.



Design's Spry Media

Design is a suite of web-design and development assistive tools which can be utilized on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.


Favelet Suite

Favelet Suite

When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets included. Simply click the link you want to invoke the favelet. An ?info? icon is available to take you to the favelets information page on slayeroffice. Included in the suite: Color List, Document Tree Chart*, HTML Attribute Viewer, HTTP Header Viewer, Hidden Field, Modifier, JavaScript Object Tree*, MODIv2, Mouseover DOM, Inspector, Object Dimensions, Page Info, Remove Children, Resize Fonts, Ruler**, Show Source, Style Sheet Tweak*, Style Sheet Viewer*.


W3C Markup Validators

W3C Markup Validators

Quick markup validations of any web document.