Building my website

The idea and work behind my website design & development.

TLDR;

Kick off

Most of the initial ideation happened in papers. At the very beginning, I set the purpose clear, so I know why I’m doing this — to express myself. It gave me clarity on what needs to be in the website and whom I’m expecting to be the audience.

Focus

I looked around my online presence to see what I’ve been having as common and it was evident that I like my hat image to be my representation. So I decided to keep that image as the center of the website, around which everything revolves.

Name

Though I liked “Mr. Fancy hat” and a lot of my friends call me “Brad”, I had to chuck them out. For instance, having one name in the title and another in the page is very confusing. And though Bharath is my complete official name, I added Raja so that it’s unique. bigOmega was picked by default.

Colors

I took my image and looked at the options it had. There clearly was a striking yellow, a mild green and a big black hat with some whites in the background. I love yellow, but it couldn’t be the primary color because yellow text would be unreadable in white background. So I picked the green. But still it was light green and it wasn’t strong, so I removed some yellow from it and came up with a darker version of it. Then obviously, I also had white and black.

Typography

I’m not the best person when it comes to typography, so my easiest move to checkout the fonts at GoogleFonts. I preferred sans-serif fonts and Raleway caught my eye and I felt it was very unique. So I used to everywhere in the page. When I got feedback from another designer Swathi, I realized may be my choice was not great. She was outright against Raleway and she wanted Helvetica-Neue at the least. So we came to a common ground on using OpenSans for normal text and Raleway for headers because I was very adamant 😆.

Content

Parallelly I started writing up the content for the website in medium, predominantly the “about page” text. I rolled it over to a my a few of my friends to get suggestions and also had it spell checked. The self-description was the one very tough to decide on. So the page randoms one of two selected descriptions.

https://medium.com/@bigomega/self-description-draft-e5003ad4a3a4

Later I remembered what once Dhinesh told me, that I was an erratic perfectionist. It felt like the exact words to describe me, like I’ve been searching for such words for a really long time, like the word unrequited love to describe a feeling. So I added it along the description.

Preloader

There’s a loading text behind image, just in case

Since the hat image was the focus of the website, I wanted it be there while the website loads. And “the loads” just means “waiting for all the images”. Since the image is circular, I was trying a radial progress and I came across this amazing blog post. But later I realised I could get away with a simple repeating loader and so I did this.

Page — Home

Once I fixed the image to be focus of the website, I tried drawing up thing around it. I tried using the circular hat image of mine and added cosmetics to it based on the things I love.

Landing page

I wanted to decide the categories my interest was into. I also wanted to improve the wording of the categories.

And from there it was easy to get the final version, replace “love” with heart-image, find the common text and rotate it.

An initial version of roate text

Page — About

My initial plan was to show the things I do around me. I tried few variations of circles, a hive type. I also thought of drawing up my desk and point out things each showing a thing I love.

But none of them was convincing enough, so I decided to have a straightforward approach to the things I do. I had a scroll-based fullscreen+ page for about which looked like this.

1366x960 version of initial about page

As I got feedback from friends I realized it sucked. I was too deep into solving this that I was a little blind to looking with simple eyes and getting a first impression. I almost gave up, but later spent a few more nights and improved it.

I also worked on an animation for design and develop. It was interesting to get to the final idea of this. Once D in design and developed hit as the common letter, I started ideating. I went to a white board and started drawing out my mind (forgot pics). I started off with the DareDevil logo and eventually ended up in YinYang with each side animating to the “D” of the words Design & Develop.

https://codepen.io/bigomega/full/MeaNvx/

Still it was a little kiddish(or so I heard) and I was okay with it, meh.

Page — Connect

Since I’ve already thought about the hive idea for about page, it was a Eureka moment to realize it would fit perfectly for the connect page. So I started iterating on different hives and each cell would be a social media with me in the center.

But I couldn’t randomly place the icons, I went to photoshop and kept moving around the list till I came up with a logical segregation.

This was awesome except the left-top → Instagram is the first thing everybody would see. So I rotated it 180 deg and it was perfect. Coding it directly into HTML was so annoying, so I found a quick way to render it from a config with jQuery.

But I was ambitious, I wanted to to have a really cool animation for it, like a ripple in water. After some search, I found an example and I modified it for my use case. It wasn’t as striking but it was still really good :)

Page — Work

As I started on the work page, I wanted the hat image to be still in focus, but represent my work. So I thought of a silhouette my face and hat inside which the things I do are evenly split.

Looking that gave me a better idea that I could try to bend the lines to mimic the hat shape. And color it appropriately.

The darker brown was added randomly and it looked like the hat-shadow and so I went with it. Of course I reduced the size, corrected and smoothed the edges and also iterated a bit.

The colorful one looks very yummy :D

Interestingly this made me draw a simplistic version of my hat-character which turned out to be the reeeeallllly good. And i’m preferring it the most these days, thought there were other drawn versions.

I also iterated on the animation for the big hat split.

Then I needed to list my skills and work. Piece of cake, it was very straightforward. All I needed to do was to curate the information.

I had percentages for every skill and thus show my level of expertise in them. Yes I’m horrible at singing, it’s almost zero, so remember to close your ears the next time I take a mic 😆.

var skills = [
[‘Art’, 40]
, [‘Illustration’, 55]
, [‘3D modeling’, 15]
, [‘Sculpting’, 30]
  , [‘UX design’, 70]
, [‘Graphic design’, 35]
, [‘Web design’, 80]
  , [‘HTML/CSS’, 95]
, [‘Sass/Less’, 70]
  , [‘Javascript ecosystem’, 100]
, [‘ReactJS’, 75]
, [‘App development’, 90]
  , [‘Node.js’, 80]
, [‘Python’, 35]
, [‘PHP’, 30]
, [‘Ruby on Rails’, 25]
  , [‘BrainFuck’, 60]
, [‘Hacking’, 90]
, [‘Shell’, 60]
, [‘Git’, 90]
  , [‘Dancing’, 70]
, [‘Singing’, 5]
, [‘Guitar’, 20]
, [‘Trekking’, 75]
, [‘Biking’, 65]
, [‘Photography’, 20]
, [‘Blogging’, 45]
, [‘Rambling’, 100]
, [‘Soccer’, 35]
, [‘Dota2’, 95]
]

There were multiple way of visualizing this and I went with pills and loading-bar. And I randomize the list every time, so that… umm, well, I have no idea why I did that. But it’s random.

The work list was simple too. It just has a title and a link sorted by date. I also added tags so I could sort by tags later.

Final touch — bigOmega icon

This was a random thought that occurred to me when I was watching Elon Musk’s interview in Code Conference 2016. I was curious what he thought of us being in a simulation. I also noticed the logo of vox media in the background. It was a V made of triangles (I think it looks like a fox).

So I started wondering what are the possible symbols I could draw with triangles and thus I started drawing Omega (how predictable, huh).

I couldn’t stop myself, I knew I’m gonna do it. Finally I fixed on the top right one. It seemed apt, compared to the rest of it’s peers. So I started drawing triangles in HTML. I needed 4 layers and I made a simple triangle mesh.

Again, I wanted it to be config-driven, so to color the specific points, I wrote a 2d array and this will say which part should be colored for every point. And point(div) will have a top triangle and a bottom triangle (represented as “t” and “b” in config).

/* JS */
var bigomega_grid = [
‘ bbb’,
‘ bttb’,
[‘’, ‘tb’, ‘ ‘, ‘tb’],
[‘b’, ‘tb’, ‘’, ‘’, ‘tb’, ‘b’],
‘tt tt’
]
/* SCSS */
.point {
// basic triangle styles
  &.b {
border-bottom-color: black;
}
&.t {
border-top-color: black;
}
&.tb {
border-bottom-color: black;
border-top-color: black;
}
}

Also I iterated to see if another shape along with Omega will fit. It didn’t.

I tried animating it, but it was initially horrible because of the monotone. Later I randomized animation time and start delay of each element to finally get the shine I saw in Luxe Cinemas. I iterated on the line width, just to be sure smallest one was the best.

Turned out, this was the piece everybody loved the most. So I added it in the footer of other pages as well.

Epilogue

This entire process took me about a month to finally have my website out there and I had t0 pull a lot of all-nighters. There were moments when I almost gave up. There were moments when so much effort will result in so less. There were moment when I had to start over. But finally, it was all worth it.

If there’s a website you’re developing, keep this as a checklist. It’s a little adhoc but I hope it helps

  • Purpose & Audience
  • Categories & Navigation
  • Focus, Color & Typography
  • Content
  • Feedback
  • SEO (meta tags)
  • Share & Blog
Like what you read? Give Bharath Raja a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.