Below, I share my web design process- from planning, choosing a platform, designing the site, and migrating older information and blog posts. (For a higher level, more comprehensive discussion on websites, you might want to first refer to my post "How much should a website cost" )
Definitions
First, a distintion to define the parameters of this post. While they are sometimes used interchangeably, they mean different things:- Web Design is about the layout, ecstatics and usability of the site - it is about the 'look' of a site and its pages (this is what this post is about)
- Web Development is used to describe the programming to build the site, the 'back end' that supports the 'look' (I hope to write more about this soon)
The analogy might be that of decorating a house with furniture (where do I place what), as opposed to the actual construction and engineering of the house. You can read more at BitwiseLogic's post.
Planning
This is the idea phase, pen and paper (or in my case, I used MS Notes)
- What I didn't like about the existing site
- What users would want and do on my site, what I want, and then prioritize into purpose and goals of website (both in terms of design and content)
- I also had to reexamine my overarching web strategy
- Do I seperate personal/professional web identity? What do I need for the longer term? When I researched online, there are many differing opinions, but the bottom line is: what do I need for now and later? Check out the differing opinions on this DailyBlogTips post on using personal vs website names. (By the way DailyBlogTips is also a great resource for bloggers)
- What emails do I use? What usernames for each? How to remember passwords? etc
- I also looked at standard sites in my industry, to get a feel of the design (Web 2.0 or not? serious or not?)
- Then I also looked around for sites which design I love, as well as the best and most popular Blogger or Wordpress templates. (easy enough to Google) They help me streamline my own design, adopting ideas I like, and throwing out those I don't.
- For me, speed was crucial because many audience will be from developing countries, and also, I'm a believer of simple design (which is also fitting for a professional site), so graphics and flash are banned unless they add to the content.
Choosing a Platform
This part belows partially to the web development bit, but I will say that in 2010, choosing a popular, well supported CMS, and one you can edit through a browser as well, is the way to go, as opposed to designing something from scratch and uploading via, say, Dreamweaver. I also wanted that was open and met web standards. I will leave the details to a later post on web development.
- Smashing magazine has some good general design princples in several posts, such as the one here and this one on usability here.
- To drill down on my own web design, I looked to Blog Design Blog's Guide, a comprehensive and detailed guide on issues and examples on each important element of a blog, such as:
- Header
- Content Area
- Primary Navigation
- Secondary Navigation
- Headlines
- Comments
- Post’s Footer
- Footer
- Advertisements
- When I wanted more details on any one of these elements (or others that might not be here, like designing to be mobile-friendly), I Googled for more resources. I also should have looked at other factors like accessibility but didn't.
- Then I used a templating site like Blogger or Wordpress to design my site. This worked for me because my design was simple. For more complicated design you can use Dreamweaver or another web authoring software.
- It took me about a week of experimenting and HTML coding before I settled on an (almost) final design
Migration
- By far, this was the hardest of the process.
- First, I had to consolidate my older resume pages, and lost much of the formatting when transferring the data (cut and paste)
- Secondly, importing blog posts were another headache. For blogs that I could export, I lost many of the comments, formatting, and I also wasn't able to search the imported blog posts.
- Thirdly, some blogs were not able to be imported because they were based on proprietary technology that did not allow me to export into a different technology
- I was spending too much time on this issue, so sadly, I looked for an interim solution (so that I can have a live site that I can also update with new content) while this migration phase is worked out. So I resorted to using Google Sites and Blogger (both not open source software, nor is independent hosting allowed) in the interim. I don't know how long this will last, or if I have the stamina to tackle the migration issues without external help. So that is where I am now!
No comments:
Post a Comment