How I have built my website
Last year I have decided to rebuild my website with a fresh new look and new concept. As a result I have launched my new site on New Year.
This is how I have built it.
My previous site was based on the static Viewpoint template which I have adapted to my needs which was ok for a year or so. Nevertheless the site was lacking a clear concept and consistent layout, colors and style.
Concept and generating ideas
As a first step I had a look at the site and decided to completely rebuild it from scratch. For that I had to generate ideas and a clear concept for my new site.
I was sure the content would not change much but the way I present it should be changed. In that respect I had an idea for the general structure of the site already and how much content I would have available to present. Since the content was not a lot I would go for a more visual way to present the information and separate the sections in a better way.
I have generated my ideas by browsing some CSS showcases or pages I have found on Twitter and Dribble which is great site for creative ideas.
From idea to build
My first ideas I have just sketched on paper and adapted until I had more or less clear idea what I want to achieve. As a next step I have started to build a draft prototype from scratch — no template, no boilerplate etc.
The only elements I have included form beginning were Bootstrap and Font Awesome which are one of my favourites when I start a new site.
Since I am not a designer neither an artist — all designing happens hand in hand with coding the site. That means I start from zero and then build up the CSS until I am satisfied with the look. Nevertheless I had a general look and feel already in mind.
Colors and fonts
I had decided to have a 3 color scheme for sections and switch between bright and darker backgrounds. As for colors I have decided to go for:
- white #f5f5f5
- grey #777777
- orange #f6905d
Grey and orange go well together and are not too strong fitting the flat design influence I wanted to integrate.
As for the font I have been looking for a font that fits the flat approach being not too curvy. Google Fonts is a great source for fonts of course and so I went with Lato in the end.
Scripts and animations
Once the layout was done and the content transferred from the old site, it was time to spice up the site a little bit with a few animations and scripts.
I wanted the site to impress but be not too overloaded with scripts and flashing elements. So I have decided to go for a few animations on scroll-down and some transition-triggered animations e.g. circles will roll-in from the side once they are in the viewport or the sonar effect on hover on icons.
As a result I have been adding divpeek (a animation trigger script), jquery.nicescroll for the scrollbar, jquery.easing for smooth scrolling, jquery.waypoints for anchor tags and Bootstrap’s scripts. A few other transition animations are just hand-made by myself.
Management and promotion
The source of the site is stored on a private GitHub repository making it easier to manage the source and to try out new features on different branches for example. Also any issues someone found or features I have in mind are stored on GitHub for my reference. My hosting provider Hosteurope offers SSH and so Git is not an issue to use which makes the deployment simple. Besides I am using a few other tools described in my article about essential tools I use to run my site.
Once I was happy with the status of the site I have switched the domain to the new site and started promoting at new year . For that I have used social networks such as Twitter, Facebook and LinkedIn for example. Also I have decide to submit my site to several CSS galleries and showcases.
As a result my site has been features and a few CSS showcases as an award nominee. Those features and backlinks bring in some traffic until today.
My main sources for inspiration
Certainly there were many sites that have inspired me and trends like flat design but there are 5 sources I would like to promote which were my main sources for inspiration:
Michelle Lee — milee.co
Michelle is a designer for product design and illustration.
Her website is a great example for simple and clean layout. The site inspired me most in terms of presenting myself, fonts to use and color scheme.
She has also been a great help with recommendations and finding some glitches in my site.
Have a look at her site
Joyce Leung — madebyjoyce.com
Joycec is a frontend developer and designer from Vancouver, Canada.
Her site has been featured on my showcases and is a great example for neat work.
For my site I took her site’s HTML structure as a base. Also the icon navigation and site concept itself where inspiring me a lot.
Adam Coulombe on tympanus.net
Adam is a Canadian designer who has shared his great work on tympanus.net.
He has created an impressive infographic using SVG and CSS animation which inspired me for my resume/timeline.
Mary Lou on tympanus.net
Mary is a freelance web designer and developer owning and publishing on Codrops / tympanus.net. Her sample of circles with CSS animations was inspiring to me and merged them into the timeline infographic.
Hong Liu on codepen.io
Hong is designer and web developer from Beijing, China.
He has shared some nice work on codepen introducing some sonar-like effect on hover which I have used for a few icons on my site.
Roadmap and future development
In today’s web you can never stand still and not only major sites roll-out new designs and new features every year or so. A website requires continuous work to stay ahead of other sites. For that I have created my own roadmap for the siteand keep track of new ideas in GitHub trying to improve the site on regular basis.
How did you approach your page re-design or rebuild?
How do you try to keep your site ahead of the others?
Let me know in the comments.