Today I am rolling out the first change to Tech Stream after 2 years. Being a personal website there was no big plan behind the redesign, it was just thought to revamp to learn new trends although It's kinda what I do daily.
After weeks of research, testing, discussing with a couple of friends I think I have convinced my mind its ready to change, this definitely is a big overhaul. Here is a small list of redesign features:
- New Coat of Pain
- New Management System: I have always run my blog on a custom crafter CMS, this is a new one.
- Responsive Design: The initial design was responsive so there is no much deal here.
- Build using the Front-end Framework White Board, a free time project made over a weekend after supersolanki and I thought of making a frame work for fun :P.
- Build with Speed : Improved Load times.
Note : Given below is my views & experience in the redesign process for Tech Stream, Being a personal website I didn't have any big plan behind the re-design, just a thought to revamp made it happen.
Why the New Design
The initial design was made when was made 2 years ago after I set out to make something to show case my works & test my skills out, I wanted it to be my own in all aspects including the presenting systems, So Designed & crafter a Management system, I am still happy with what I did that day with the experience I had with code, on the other end this stands as reference to measure my skills after some period of time.
To make the next reference point I moved on to sketch the V2 of Tech Stream, to craft a good-looking but a simple & faster website. After digging through analytics data I managed to collect a rough sketch of audience to Tech Stream :
- Developers looking for code snippets to use in their project. ( Highest )
- Passionate Code lovers.
- The one who read for pleasure to know about it.
- the rest.
this helped me to estimate the time a user spend on the site and shows the need for simple and focused design. Simpler design needs low attention on design processes so I planned to give importance to each component.
Fonts defines every thing, using a clear, Legible & good looking font is a must do task especially on a website focused on content. I planned to go with a single & web-safe fonts, the reason they are called web safe is because they works on multiple-platforms with out need to include externally and satisfy the needs.
None of the fonts in the criteria managed to pass my design scene, so I ended up with 2 fonts.
- Articles :
Georgia & Times New Roman the two fonts considered to be the Best fonts for improving reading experience
- Headings (Bold) & Other areas (Light) :
Source Sans Pro
New Color Pallet I love colors, but I changed my mind this time to use minimal colors, new design uses a total of 4 different colors under various levels of Opacity.
- Front-End Frame workI am against using frameworks just for the fact it narrows the workflow, so I build one White Board, with help from Amit Solanki.
Responsive was build in the core of template sketch without doubt. This design consist fluid grid that adjusts itself from a 1200px to 320px.
Index template in different resolutions, I did take a little time crafting this one just to make it unique for other blog layouts.
I would like to thank Athul, Abid & Hemanth thanks for the help they offered in testing & design of V2
Mock-ups of the redesigned pages, from left to right: Home page, Articles, other pages
Logo Choosing a log was a hilarious task, with many options to choose from this was a tricky decision. The main concern when designing logo for self is that you never get convinced its good or its alright and its natural to ask for feedbacks from your fellow designers. I ended with around 20 logos in 2 days, this made me run a Logo Hunt.
A few logos that made it to the last round of selection in the logo hunt, unfortunately non of them made it through :p .
The CMS I am also rolling out a new CMS. Thought not easily customizable, it a good one to try if you want to I am open sourcing the CMS in Apache License. (please wait for a few days, till I complete documenting it).
I am introducing a New section Bits. Bits contain small spinets of code.
This is not it, there is more. Big schedule changes in the past month made me fail to complete the tasks I set out for the launch:
- Brand New Back-end : I am still using the basic Administration system I build last time.
- Custom Search on Angular.js
- Migrate to Python Django.
- and more ..
I will still continue to work on the uncompleted tasks hoping to complete soon. The third plan is still a question I cannot answer right now.
There's a lot more about this, and hopefully I will share then when I finish the left over till then Happy coding.