Same Site, New Look

I tinkered with the site's CSS and played with Photoshop to inject some style into the web page. On the left is the site's old format, and on the right is the present format.

Blogging is not synonymous with writing; the word “blog” denotes much more than solely written English. Granted, a blog’s foundation is it’s content; however, blogs also need style.

As obvious as that may sound, I only came to this realization  a few days back.

During the past week, I’ve been working on revamping the layout and design of debugmind’s web page (which explains the recent lack of articles). The flat background on which my posts were previously plastered seriously irked me, so I moved to a more dynamic one. Such a transition may sound easy; however, for a design amateur like me, forging my own background was a frustratingly involved process.

Initially, I tried adjusting the hexadecimal web colors using CSS; the result was a horrendously bland wall of color which drove me up a wall. I wanted a background with more substance, more pizzaz, so I fired up Photoshop.

Having never used a graphic editor software, I proceeded to randomly fill colors and click the icons in the sidebar, desperately hoping to splash the canvas with an artful assemblage of color. Obviously, this approach failed miserably. Reluctantly, I pulled up chrome and googled “Photoshop Tutorials”, and with some patience, I learned how to create appealing gradients. Satisfied, I uploaded my gradient as the background image of the site, only to learn of the dreadful “repeat” issue: since the gradient was not a uniform image, the background appeared to be comprised of several tiles, instead of a contiguous image. I went back to the drawing board and continued to craft more gradients, yet the same issue surfaced again and again.

I was on the verge of giving in when inspiration hit me—I would make a vertical gradient and merge the background color with the color of the faded spectrum of the gradient! This process involved creating a vertical gradient, of course, and then using the eyedropper tool to ascertain the hexadecimal color value of the web page’s background. The CSS code is: “background: #dee2e6 url(/*insert img url*/)repeat-x;” “background: #dee2e6 url(/*insert img url*/) repeat-x;”. Done!

I made some additional changes to the site, but none of them were as involved as creating the background. In particular, I changed the header image and gave the content and sidebar sections a unique background so that they stood out from the rest of the page.

There’s still quite a bit I’d like to add to my site; but for now, I feel that it’s time to dedicate my time to writing posts.

Like the new layout? Dislike it? Have any suggestions? Leave a comment!

Update[10/11/10]: the “repeat-x” gave me some issues with IE; chrome and safari accept “url(/*image*/)repeat-x;” IE wants a space between the parenthesis and the repeat.


2 Comments

    • I know it’s not a drastic change, but the previous layout was just really bland. I feel that the gradient/white containers make the site more readable. Feel free to tell me any suggestions regarding how to make the site more visually engaging.

Leave a Reply

Your email address will not be published. Required fields are marked *