Monday, April 6, 2015

The secret of creating a beautiful website

I was in Mumbai for a couple of months, and the volunteering team I had started there has now grown to have a bunch of enthusiastic new software programmers joining the team.
We wanted a website of our own to present our activities and to interact better with our colleagues, but the volunteers weren't very familiar with HTML, CSS, JavaScript or JQuery.
Although I wasn't very familiar with JQuery, I had acquired a good knowledge of HTML, CSS and JavaScript.

To put to ease our volunteer's fears of the new languages, I spent three full days in getting a website prototype ready. Some of my priorities were:

  • It should make use of simple technologies
  • It should look good
  • It should be interactive

Technologies

I chose HTML5, CSS3, D3.js and JQuery.


Looks 

Spent many many many hours in finding out what the secret of a good looking website is. To cut a tree in 8 hours, spend 6 hours sharpening the axe. The secret is in how you use your images. It's the images and the graphics that create that first "wow" impact on your audience. If you don't have good looking images or graphics, create them. If you can't create them, hire someone who can. I've worked with Interaction Designers of international repute, and learnt a lot from them about design.
If you'd like me to create, improve or critique your website, I'd be happy to do so, provided it gives me value for my time and skill.

Do have a look at websites like Awwwards. They showcase a range of well designed websites you can learn from.



Interactivity

There's a huge amount of open source software out there which will allow you to effortlessly add some splendid interactivity to your website. Of these are d3.js, CSS animations and JQuery.
The interactivity in itself adds huge appeal to your website even if you have just a plain white background.


Space

Most importantly, allow a good amount of space in your website. Try your best not to clutter it with information or content. Minimalist designs can help you with these decisions.


I created a little prototype and uploaded it on GitHub: https://github.com/nav9/crteam

Our volunteers, on seeing the prototype, got inspired and were encouraged to learn and implement the rest of the website. With some further guidance from me, they made use of a lot of openly available knowledge and open source software to build what turned out to be a beautiful and interactive website which got "very very good's" from our HR department and our colleagues! A website by the volunteers, of the volunteers and for everyone! :-)

These are some screenshots of the prototype I created in just 3 days (attributions for open source code are in the readme file of the github project):







When developing a website, you need to have a good command over HTML and CSS. If you think you need Dreamweaver, then you seriously need to consider learning CSS properly, because even with Dreamweaver, you'll find it tough to make changes and understand what is going on under the hood.
My post on CSS will give you links on what to learn.

And oh...once you create the website, softwares like Xenu link sleuth will be indespensible in verifying if all your links work :-)

All the best!

No comments: