articles, blogs, e-mailers, PRs and News, e-books, downloadable resources, Facebook promotional material, video content, storyboards, instructional designing, white papers/ reports, surveys or product reviews and Google ads, print ads, jingles, brochures & flyers

Concept and Framework To Plan a Website

vimeo-clip-page

When planning a website the first important steps involve just a pen and a paper. It’s crucial to understand what we are creating and its nature. To list the purpose, the expected content and draw its structure will be our first concern.

Do you need a content writer?

Need good quality content strategy for your website?

Write to Vinita Amrit at vinswins2001@gmail.com

What Kind of Site Do I Need?

This should be our first focus but we will probably have an answer only at the end of this article.
I mean that the nature of our site will vary in relation to the ammount of content, of our ability and knowledge of the instruments, and the characteristics we require.

For instance:

you may want a place to present your business and usually a static website is enough;
you may want to keep clients or friends updated with your activities and a good solution would be a blog or even twitter if you’re concise;
you may want to create a social network as you have seen many having success in the latest years and in that case you’ll need something powerful while also getting your hands dirty with php to deal with dynamic contents;
you may want a place to list some works you have done in your own field and you probably want to go for a portfolio.

For the best quality portfolio get in touch with Vinita Amrit at vinswins2001@gmail.com

As you see there are many possibilities which may vary even by your skills: Are you a css ninja or do you prefer to pick a free template for your blog? Are you practical with php or do you prefer to use a CMS to make your life easier?
All choices to consider before you start, but you can clear your mind following the next steps.

List Your Content

It’s really as simple as that: take a paper and write down what you want on your website.
Let’s say you are a photographer and you want your personal site. You know you will put a lot of pictures, maybe a gallery to collect them and different categories, each with its page; definetely you want to give your contact info and if you are willing to share maybe also a few words about you: what you do and anything you feel like saying.

Ok you have listed all these things on your paper but now you can decide how to organize them.
Split them into pages. For our exemple we already have enough content to create an home page, several pages of pictures divided by category, a contact page and an “about” page. Well, it is also true that nowadays are getting popular one-page sites for portfolios, so if you are fancy enough.. But for the sake of the article let’s consider our first scenario.
Good, now we have at least 4 pages. Let’s see what they really look like.

Draw Wireframes

Wireframes are small mockups of a page with a schematic representation of its elements.
In a practical way I mean you need to draw your pages and what they look like. Start drawing a section for the header on top of the page and one at the bottom for the footer.
You can decide where to put the navigation: you want it in the header or maybe in a sidebar?
Choose where to place your text, your headings and in this case your pictures.

I usually start with something really schematic and as soon as I make up my mind about what I want I go into details and I draw all the little things as I imagine them. Take a look at these examples of wireframes from many designers: some are quite near to the final version of the site and others are just the sketches of first ideas.Sketch1Wireframe #1 on flickr
Sketch2Wireframe #2 on flickr
Sketch3Wireframe #3 on flickr
Sketch4Wireframe #4 on flickr
This is also the moment to build the fundaments for yourinformation architecture by creating a small flowchart of how your pages will be connected among them and with which hierarchy.
This will help you create your navigation which is key for theusability and the information architecture of your site. Two aspects to take good care of through out the whole process of your work.

Update:I copletely forgot to add the presentation that Nick Finck,Donna Spencer and Micheal Angeles performed at the SXSW interactive 2009. Slides + audio, you couldn’t have a better help. Remember to show some love to the authors on their blogs and twitter.

For the best quality web content get in touch with Vinita Amrit at vinswins2001@gmail.com

That’s pretty much it for the moment.
You can draw your wireframes by hand (like I love to do even with horrible results) or there are several programs to do that professionally, generally used by designer who need to present a project to a client.
Next steps should be to write down your content and create your graphical interface. We’ll have time to talk about these topics later on. (psst, subscribe to know when)

If you have questions or you want to discuss different scenario and purpose to apply this technique we can share our ideas in the comments.
Check the related links I listed below to get to my resources or similar stuff I found around if you want to know more about the subject.
If you liked the article and you think someone else could be interested share it.

You can leave a response, or trackback from your own site.

originally published at http://eng.designerbreak.com

Do you need a content writer or content strategist?

Write to Vinita Amrit at vinswins2001@gmail.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s