Imagination is our power

Archive for April, 2012

Beginner’s Guide to Wireframes and Tools to Create Them

Wireframing, or prototyping, while designing, costs almost nothing, but can give back so much. While many designers start with a sketch in their mind and then just put it into Photoshop or even code it right away, some others start on paper. Yes, paper, that (most of the time) white thing we write on with our hands. Sounds very 2000-ish, but even today the best designers out there use this technique to their advantage. Web prototyping saves lots of frustrations later on during the project development phase, as it makes sure there are no things to undo or redesign. If you prototype correctly, you can be sure about the fact that redesigning will never be something you will have to think of.

What wireframing basically means is putting your design ideas on paper – for each of the multiple pages of a website. All pages will probably share some elements, therefore the first one will be a bit more challenging to do, whereas the rest of them will be a bit less difficult as you already have a basic idea over the general design patterns.

Keep in mind that these common elements are a must for any design. When switching between pages the user will have to immediately recognize the fact that he is on the same site and not somewhere else. Always keep the navigation and the important sections (content, sidebar, footer) in the same place. But this tends to become a novice guide to web design, so let’s move on.

General – the wireframe

In order to be able to use a wireframe, you need to know how it actually works. What this does is simple – it illustrates the layout of a website and its main components on paper. You can use different shapes, such as boxes and ovals to draw content, navigation and other functional elements. You might ask yourself why do we use shapes? The answer is simple: because it allows us to focus more on the design and forget about coding, cross-browser compatibility, images and so on. It’s pure and basic design.

Wireframing or Photoshop design?

The alternative to paper web prototyping is creating the visual design in Photoshop first. While it has advantages to some extent, creating the layout in Photoshop is not as effective because it does not allow you to focus on the basic design elements. If you start designing in Photoshop you will probably also start thinking about colors, images and fonts. There is no need for this if done on paper. And the process is way faster on paper as well, so why not go for it? You can obviously start designing in Photoshop at a later stage, but I wouldn’t recommend doing it before you have a clear idea of what you want to get out of the project. The only way to achieve this is to start on paper.

You can call a wireframe a sketch if you want to. As a matter of fact, a wireframe is a basic, simplified sketch of a website. It communicates some ideas to the client which he can accept or not. If he doesn’t, it is quite easy for you to take another sheet of paper and draw other ideas from the top. The main reason behind a wireframe is to let you focus on what is really important on a website: how each page looks, where the most important elements go and how to achieve the overall positive balance you need.

After you get the idea to the client and he accepts it, you are welcome to evolve the basic sketch into something more detailed. Now it is maybe time to start thinking of fonts, colors and images.

The Prototyping Stage

It is crucially important for designers and clients to work together during this stage of the project. While a client doesn’t have too much to say during the coding phase, this is where he usually gives a lot of input you should consider. Remember that once he accepted the design, he will gladly give into your further ideas – at this point in time he already believes in you and your skills. It will be a tough and long project if you don’t get the acceptance on the basic wireframe from him.

If you are a client remember not to stress a lot about the lack of colors, images, fonts and other styles. The job of a designer for now is to give you a basic idea of what he thinks is good for you. If you ask for more detailed wireframes from him and reject them three or four times, it will cost you lots of money. On the other side, if you ask for basic wireframes and reject them, it won’t cost you as much, because they are easier to draw and think of.

Tools for web prototyping

Here is a list of some tools I recently tested in order to see how much designers can trust them in building wireframes. If paper is not good enough for you then, in any given order, here are the other possible solutions:

1. iPlotz

This tool allows you to create wireframes which you can click on and navigate through. This helps creating the experience of a real website. While you can get a free account on iPlotz, I recommend one of the premium ones if you are serious about starting with web prototypes from now on.

2. Balsamiq

If you like drawing, then this tool will give you the feeling of it, only now it is digital. The elements can be tweaked and rearranged easily and the control over them is quite easy as well. The results are clean and one of its advantage is that everything can be reiterated in real-time.

3. Pencil Project

This tool can easily be used to make diagrams and GUI prototyping.

4. templatr

Although it will not allow you to draw anything, this tool lets you create individual designs for your website on the go. You don’t need to know any HTML and you can download the template in the end with a single click.

5. Flair Builder

This is a tool capable of creating interactive wireframes very fast. It is quite easy to use and comes with a palette of functional components which will ease the process of creating prototypes. Flair Builder is also interactive and will improve your experience a lot.

 

Bottom line

Wireframes, or web prototyping, is a process known to many designers, although just a handful of them use it. While it might seem that it takes a lot of time, on long-term it will help you a lot. If you know how to properly communicate and closely work with the client during prototyping, the rest of the project will go smoother than expected. I totally encourage you to prototype your designs before actually starting to code or to create the whole visual design in Photoshop. It will make the process easier for you and will spare you frustrations down the road.

Until next time, let’s spark some discussion here for my 50th article on 1WD. How often do you prototype your designs? How effective has it been for you? If you don’t do it, why is that?

Best Browser Features According to Users, Designers, and Developers

User’s Perspective

Well, users are the key to everything. So, we will start by understanding the user’s perspective about the browser’s of today. This section will concentrate on the usability side of the browser features as that is the most important feature that users look for.

1. Memory Utilization

The most important issue for users who are using old machines. As of now almost every browser uses a separate process for every new tab opened in one window. This means that if you open one browser window and then open five tabs inside that window then you have indirectly opened five different browser windows. Now, these five different browser windows will use up equal amounts of memory and sooner or later you will see a resource crunch provided that you don’t have loads of memory to back you up.

2. Processor Performance

This is another aspect of browsers that is a turn off for users. Browsers tend to over utilize the system resources especially when they are loading pages that require a high amount of CPU cycles. Like if you open multiple tabs with YouTube videos running in all of them then you will see a significant slowdown in performance. See, I don’t mean that this will happen in all machines. There are processors that can bear almost any load, but then not all of us have that sort of processing power. Right?

For such users it is very important that their Internet Browser does not over use the system resources.

3. Less Power Usage

Well, this one is a far-fetched dream but then we are kind of dreaming only right now. True? There is this notion that because Internet Browsers use a lot of system resources they end up consuming more battery power. This in turn degrades the battery life. I am not sure how, but there has to be a way that one can get rid of this issue that plagues almost every user, regardless of how good their computer is.

Nowadays the mobile browsing experience has gone to amazing heights and so has the lighter version of browsers that power these mobile phones. I am assuming that these light version of browsers will soon be available on desktops so that we don’t consume too much energy and save battery power.

4. Synchronization

Data synchronization between multiple platforms is an important factor that must be addressed by various browsers. I don’t like the fact that my browsing history is not always in sync between my mobile browser and that I have to follow a set of steps if I want to synchronize the same between two platforms. Although Firefox has been good enough when it comes to synchronizing data between two devices yet most of the other browsers are still catching up. We just hope that they do so quickly.

5. Socially Sound Browsers

The Internet has emerged as a place where all over-the-top socially sound human beings connect with each other. Lately, Internet Browsers have started to integrate most of the social networking platforms in the browser itself which helps the users to stay connected throughout their browsing sessions. Still, the seamless sort of browser and social media integration is still missing from most of the browsers.

Designer’s Perspective

Designers look at the web from a totally different perspective. For them load time, memory issues and over usage of CPU just don’t matter. For designers it is all about the aesthetic looks of the website, the UX and the flows. Now, in such a scenario it was really difficult for me to figure out what could be the best browser feature from a designer’s perspective. Henceforth, I won’t squeeze in much from my side. As of now I can think of just one feature that designers will surely appreciate and let me push that for the readers.

1. Deep Social Media Integration

Well, social media has become an integral part of the web. No website is complete without social media integration. It is so necessary that designers are forced to pick up space in their design and push social media apps in those spaces. The end result is that even though the design looks good some of the precious space is lost due to this necessary integration. If, somehow, browsers provide a sort of social media integration that is compatible with every website then designers will have the freedom to design websites without worrying about any sort of social media integration for that website. The code itself will interact with the browser and help the users connect to respective social media accounts of that website without even trying to worry about the social media buttons on the website.

Just image, you won’t have to think about leaving Facebook Like box and other similar stuff on a website. You can easily use that space for ads or much useful content. Helps remove the clutter.

Developer’s Perspective

Developers. Another important chunk of the web design industry that shapes the Internet. From their lens the Internet is something else. They don’t think like the daily Internet users and neither do they think like the designers. They think in code. They are someone who dreams about creating codes that will do every possible bit of work that users do. Crazy people I tell you.

If it wasn’t for the developers then cross-browser efficiency would never have been a topic of discussion. Let me try to dig into the requirements of the genius developers.

1. HTML5 Compatibility

HTML5 has surely taken the web by storm but alongside its success has been this chunk of developers who have been left behind just because of its compatibility issues. A huge section of the Internet is using old browsers and somehow HTML5 might not be able to show its real firepower when used in older browsers. It is this incompatibility that is a turn-off for developers. HTML5 will be a treat for developers as soon as it starts working equally in all browsers, though such a day is far away, really.

2. Cross-Browser Compatibility

Another compatibility issue that developers have to fight with on a day-to-day basis. Imagine the headache a developer has who has to make sure that a website displays the same in all sorts of browsers. This proves to be a headache as (like we know) most of the browsers have this sort of fight going on between them due to which they don’t pay much heed to compatibility issues.

Nothing will be possible till all the browser companies sit together and pledge to come up with one common platform where developers will get the freedom to create one code that works for all browsers. Till then, developers have to perform cross-browser checks over and over and over.

3. On the Fly Editing

This is one browser feature that developers dream to have. Firefox add-ons like Firebug provide similar functionality where developers can edit the code on the fly, but then we are far from what we want. Browsers must have the on-the-fly editing tool which developers can use to edit code and experience changes right away. It isn’t difficult, is it? It is just the matter of time and sooner or later it will happen. The question is when will such a feature be built-in on all the browsers?

Conclusion

The list is huge and will continue to evolve with time. It is human nature to look for more than whatever he or she has. That is the reason why we have been evolving ever since we landed on this planet. I just hope that some of these features will be quickly implemented in all browsers and not just a few. Seamless compatibility is what I am talking about. Get it, anyone?

Create a Website Planning Spec Before You Build

Successful website design requires both skill and creativity. Another BIG piece that I think separates successful website developers from unsuccessful website developers is the ability to Plan. Website Planning is one of the most critical pieces of website development, yet it’s the piece that I see Website Developers skipping over most often.

Many developers are so excited to get their projects going that once they have a little direction and all of the assets from their client, they simply give the website a little thought and jump right into development. Website Developers who neglect to take time for website planning will ultimately fail. They may succeed once, twice, maybe a few times, but eventually they will drop the ball and it will come back to lack of proper website planning prior to website development.

 

In this article I will talk about Website Planning, what it requires, how to do it, why it makes website development much easier, the benefits of website planning, and provide examples of documents that I always use during the website planning phase of any project.

Where Does Website Planning Fit Into the Website Development Process?

instantShift - Website Planning

Website Planning should start immediately for all Website Developers. For most, it does start at the beginning. Where the difference between most successful website developers and those who are just getting by is when the website planning phase end. For the majority of developers, website planning consists of the following:

  • Initial meeting(s)
  • Asset delivery
  • Website Concept Development

After receiving approval on their website concept, which is usually just design & layout of the different pages that will make up the site, most Website Developers jump into the build. What I’m hoping for, after reading this article, that more Developers will take one extra step up front during the website planning phase. Successful Website Developers follow these steps before starting to build:

  • Initial meeting(s)
  • Asset delivery
  • Website Concept Development
  • Creation & Approval of Website Planning Spec

Website Developers who take time to complete one extra step during the website planning phase of any project will have a better chance of being successful than one who does not. Creating what I call a Website Planning Spec provides benefits to both the Website Developer and the Client.

Define a Website Planning Spec

A Website Planning Spec is to a website as a Blueprint is to a house. What I refer to as a Website Planning Spec is a document created by the Website Developer. The Website Planning Spec takes the Website Concept to the next level. A Website Planning Spec is a detailed “manuscript” of every page on the website. Each page is broken down in three main areas:

  • Architecture – Layout and navigation of the website on a page-by-page basis
  • Design – Look and Feel of the website
  • Copy – Search Engine Optimized copy for every page of the website

A Website Planning Spec allows both the Website Developer and the Client to think through every page of the website before it’s built. It allows major changes to be made up front before requiring a rebuild. It also allows everyone to think a little about SEO and Website Navigation. What is the goal of your website? Where do you ultimately want your website traffic to land? Is it your Services page? Is it your e-Commerce area? Do you want them to sign-up for something? Thinking this through up front will allow the Website Developer to link certain pages together and to create a flow from all pages to one or a few main pages. This provides you with a great opportunity of achieving your goal. If you don’t take time to think through these things up front, one of two things happen:

  1. Most Likely – You end up with a website that doesn’t achieve your goals (ie. It doesn’t do what you originally wanted it to do)
  2. Very Common – The client realizes you’re going down the wrong path during first client review and the changes that come through require a lot of rebuild hours.

Either that or you get death by 1,000 change requests. You know what I’m talking about…

By taking time to create the Website Planning Spec you reduce the possibility of either of the outcomes occurring. Both you and your client are on the same page from the beginning. Now all you have to do is following your Spec to build the website.

Website Planning Spec – Architecture

instantShift - Website Planning Spec – Architecture

When drafting a Website Planning Spec one critical element to think about is website Architecture. The main components of Website Architecture are:

  • Website Main Navigation
  • Website Sidebars, Footers, Widgets, etc.
  • Inter-Page Linking

Most Website Developers hit the first element of Website Architecture when designing their Concept. Some even go as far as thinking through the second element(s) of Website Architecture. The element that almost always gets left out until the very end of the project is the flow of the site. If your client has certain goals of where they want traffic to end up, there are ways that you can ensure that happens. You can design pages in a certain way. You can include specific plugins or widgets in the sidebar or footer. You can link certain pages together through copy. All of this either gets missed completely, thus the website fails to achieve the owners’ goals OR it gets done at the end, which may require more hours than scoped for and/or rework.

Thinking through the Architecture of every page individually and collectively as a full site leads to greater efficiency in website development, gets the client to buy in up front, and allows you to be successful in achieving your clients goals.

Website Planning Spec – Design

The Design element of the Website Planning Spec is the one area that most Website Developers do a decent job with already. That said, usually the design is covered only in the Concept. Usually Developers think through website colors, font size, style, and color, logo placement, social media placement, etc. What’s lacking when Website Developers do not create a Website Planning Spec is that they don’t think through design on a page-by-page basis, nor how it impacts traffic flow as it relates to achieving their client’s goals. When Website Developers think through Design on a page-by-page basis the following critical areas of the website come into focus before anything has been built:

  • Page layout for all pages
  • Site Imagery
  • Design techniques that guide website traffic to click-through to the right pages

Great Design is plays a HUGE role in the success of websites. When Website Developers take time to think through site design on a page-by-page basis through their creation of a Website Planning Spec, both the Developer and the Client have a better idea of what the site will look like and how to best use Design to help achieve client goals.

Website Planning Spec – Copy

instantShift - Website Planning Spec – Copy

Copy is the third element of the Website Planning Spec, but it’s perhaps the most critical. Good copy can make or break a website. When creating the Website Planning Spec, Website Developers should either write the copy for every page of the website or receive the copy for every page of the website from the client. Laying out the copy up front will allow the Website Developer to think through:

  • Website traffic flow
  • Search Engine Optimization

We’ve talked about how both Architecture and Design can be made to help with flowing website traffic to certain parts of the website. Neither of these two elements of a website come close to making as much of an impact as good copy can make in regards to flowing traffic through a website. You can write copy in such a way that provides readers with information on one page and leads them to click on a link within the copy to get to the next piece of information under a given topic.

Another reason why good Copy is so important for a website is because it plays such a big role in search engine optimization. Before writing the copy for the website, Website Developers need to either create a list of Keywords for their client or have a list provided to them from the client. Having your list of keywords when you go to write the copy will allow you to infuse those keywords into your copy, which will ultimately help the website move up the ranks of search engine results.

Far too often Website Developers leave copy creation to the end, which is the wrong approach. Good copy is way too important on so many levels that it only makes sense to knock this out first. Not only that, but crafting good copy can take a decent amount of time. Leaving it to the end creates stress on whoever is developing the copy in order to get it finished so that the site can launch. This leads to poor copy development, which leads to poor SEO, which leads to clients not achieving their goals. Do yourself a favor, next time you get ready to build a website, knock the copy out during the Website Planning phase.

The Benefits of Website Planning

As you have probably already realized, there are a ton of benefits to creating a Website Planning Spec before building your next website. We’ve covered a lot of those benefits in the sections above. Taking time during the Website Planning phase to craft a Website Planning Spec actually benefits both the Website Developer and the client. Here are two lists of benefits, one listing all of the benefits to the Website Developer and the other listing the benefits for the Client.

Benefits of Creating a Website Planning Spec for Website Developers.

  • Allows you to think through the entire website
  • Flushes out 3 critical elements of successful websites – Architecture, Design, and Copy
  • Ensures everyone is on the same page as to what’s going to be built
  • Avoid too much rework
  • Ensures great design and copy
  • Gives the website a better chance of moving up the ranks of Search Engine Results
  • Reduces website build time

Benefits of Creating a Website Planning Spec for the Client.

  • Provides the client with a better understanding of what the website will look like, feel like, and read like
  • Gives the client an opportunity to weigh in on important elements of the website before they are built
  • Reduces the chance of a spiraling budget

Create a Website Planning Spec

Now that you know just how much a Website Planning Spec will improve your website builds, will you create a Website Planning Spec during the website planning phase of your next website development project? Leave your comments below. For those of you who do want to create a Website Planning Spec for your next website project, below are some images of some of the Specs I’ve created in the past for my website projects.

How to Secure the Right Interview Candidate for the Job

Significant role of an interviewer

An interviewer is entrusted with the task of choosing the appropriate candidate. He should begin with preparing a list of qualities that he wants in a candidate. The art of choosing candidate lies in finding those qualities in an interviewee through interaction.

interviewer How to Secure the Right Interview Candidate for the Job

Questions related to interviews should be specific to the task. Never generalize interviews. Most interviewers generalize interviews, and that can never help them to identify the right talent. Generalization begets ordinary talent. It will never help firms to scout for what they had been searching for.

Some firms perform two step interview processes. The first step will have a general interview, which helps firms to filter best ones from average candidates. The second step will involve finding the best from the already filtered candidates. It engages specific task related interviews, and it helps firms to trace the right talent.

However, the two step interview process is only successful when the list of interviewees is large. The role of an interviewer may change according to the post for which interviews are being held. Hunting for right managers will involve different set of strategies than looking for ordinary employees.

Again, hiring an insider for a top post is different from hiring someone from outside. Interviewers have to make a lot of adjustments while taking interviews in different situations.

Read a candidate

An interviewer’s biggest task is to read the interviewee’s mind. He should be able to pick what goes on his mind. It is important to catch the truth in the candidate’s speech; the confidence behind the facade should never be missed.

get interviewee relaxed How to Secure the Right Interview Candidate for the Job

But before the interviewer tap anything from the candidate’s mind, he should get the interviewee relaxed. He should try and open up a candidate, so that he gets on his own. A candidate’s true self can only be realized once he gets over his nervousness. In this case, the interviewer can throw questions to the interviewee to open him up, so that he gets in a position to understand the candidate.

Many interviewers are self-centered and they would only perform their chores on the interview table, without even bothering a candidate. Learn to pick signals.

Has anyone bothered to read the candidate’s body language? What do his mannerisms say about him? Is he well dressed up? But appearance is just a teaser, as the real trick to knowing the candidate is ask the right questions.

Asking Questions

Begin with a look at the candidate’s Curriculum Vitae. A curriculum vitae is the true picture of what the candidate has achieved in his life. His professional achievements are embedded in it. It is the best document to find questions to throw at a candidate. Always ask questions from his curriculum vitae.

curriculum vitae How to Secure the Right Interview Candidate for the Job

It is said that past is the most defining picture of what lies in the future. There is always some relationship between the past events and the future. Questions from the past will give a clear indication of what a candidate can deliver in future. Importantly, an interviewer should be able to grasp the nature of work that the interviewee has done in the past.

The candidate’s speech should give a clear idea of the extent of specialization that he has performed in his works in the past. Speech should be read. The behavioral response from a candidate should be read properly to make out the truth in the candidate’s speech.

Never ask questions in a random manner. Questions should be designed according to the needs of the post, and also after going through the candidate’s Curriculum Vitae. Format the interview process, especially if interview is being held for selecting the top level candidate.

Interviewer should be careful about what he says. Never say something that will provide information to candidate, or help him during the course of the interview process. That said, the interviewer should speak less. He should indeed be a good listener and a good observer, too. The more he concentrates on listening, the better his decision will be.

Understand Candidate’s Objective

Though the candidate’s main objective is to get a job, yet, there could be series of hidden objectives in the candidate’s mind. As an interviewer, the knowledge of candidate’s intention will help in the process of decision making.

understand candidates objective How to Secure the Right Interview Candidate for the Job

There are candidates who have decided to take a jump from the old place of work, just because they need a salary hike, while few seek additional responsibilities associated with the new job profile. Some candidates love to be adventurous and few do not get along well with their old boss.

It is important to follow what questions a candidate asks, as his priority stems from the questions he asks. If a candidate is worried about an increase in his salary, he will demonstrate his willingness to know what he wants to know.

Avoid those who enjoy the thrill of changing their job. Such individuals never make good employee. Select those who thrive on sticking with a company for longer period of time. They are precious, and bring value to a company. The bottom line, though, is to choose the best, so if an interviewer doesn’t find one, wait till one arrives.