Archive for the ‘Web Design’ Category

My Favicon

Sunday, Sep 7th, 2008
Comments
f234bd03a24c1d435a2cdfaf1bf3ec70 Del.icio.us

Today, I spent about an hour or so creating a (very simple) site favicon for Winston{YW}. There are a number of tutorials out there that provide easy-to-understand instructions on how to create your own site favicon, but I found the one by Jennifer most detailed.

Ideally, you should be able to see this on your URL bar and (Firefox) tab:

My Favicon

I know this cannot be compared to those featured by SmashingMagazine, but at least it’s my own unique creation.

Bookmark & Share
Subscribe to WinstonYW

A New Simple Design

Monday, Aug 11th, 2008
Comments
4403cbfb6b15f6fa309e08e065995cf7 Del.icio.us

After a hiatus of nearly two years, I want to start blogging actively again. This new design is created for that purpose, as a celebration of my return to blogging.

I have it made to be just a plain and simple blog design that’s absent of many colours or other funky design elements, as I hope that the content would eventually be the main draw. But, I also have it optimized in several aspects to make it look aesthetically pleasing (at least to me).

New Blog Design

Firstly, the main fonts are 13px at least, and there’s a line height of 1.5em between the lines to make sure that paragraphs are easily readable. Secondly, for every paragraph, the number of words per line is in the range of 12-18 words which is what I understand as the optimum number of words per line. Thirdly, I am using a grid layout that further enhances readability. Last but not least, I am using dark coloured wordings on a white background which is the safest colour combination for any blog design. You may disagree with me on all the aspects I listed above, but well, those are what I believe in.

Anyway, I don’t call myself a designer and this blog is a culmination of inspirations I got from a number of blogs. This list is not exhaustive, but the following are the ones that I felt had the strongest influence in my new blog design:

As of this writing, this blog design is almost complete. But I am still looking to integrate my FriendFeed into the blog. I had a look at the FriendFeed plugin, but am not extremely fond of it. So, for now I would sit on it while I brainstorm for fresh ideas on how to do the integration.

That’s all I have to say about my new blog design. I hope you like it as much as I do, and I welcome feedback or suggestions!

Bookmark & Share
Subscribe to WinstonYW

Blog Design + Layout Explained

Sunday, Jul 9th, 2006
Comments
60cab65624edf21f29b8be57ca998b15 Del.icio.us
Update on 6th August 2008

The blog design as described in the post below is now history, and can be seen here.

As a second post, I believe it is only appropriate to describe the site design, layout and several items which you may be unfamiliar with, or are not commonly seen in normal blogspot or livejournal blogs that work with just a few clicks of the mouse.

Firstly, the original design of this blog is credited to theundersigned, who have also created several other wordpress template designs. After a week of endless PHP and CSS re-coding, I have successfully modified the original design and layout, and added several “features” to achieve the current state.

The layout is basically separated into 3 major segments:

  • Top: Navigation
  • Middle: Primary Content
  • Bottom: Secondary Content

Navigation

As the name suggests, you navigate the blog with the links.

Primary Content

On the index page, you see 2 columns. The larger column contains the content of the LATEST POST, while the smaller column contains information about the other latest activities on the blog, such as the “Latest Posts” and “Latest Comments”.

That was quite intuitive, but did you notice several icons at the end of the LATEST POST? If you know what they are, you may skip this paragraph. Those icons are known as “Social Links”. Basically what it does, if you click on any of the icons, is that it would post (or bookmark) the article which you were reading to the corresponding bookmarking and social-sharing site, such as digg or del.icio.us. That is, of course, assuming you already have a registered account under one of those sites. Anyway, this makes it really convenient for anyone who would like to bookmark certain articles for future references.

Another feature associated to each article is “Tags”. With the proliferation of Web 2.0 methodologies, it is no longer adequate to file articles under categories only. For easier search and archival purposes, it is best to associate tags to the articles as well, so that there exists a more descriptive record for the article rather than just a broad category name, and vieweres would also be able to gauge, at a glance, the content an article entails.

Secondary Content

In this area, you would find not-so-important information.

Again, this area is divided into 2 columns. The larger column contains excerpts of the earlier posts, my digg and del.icio.us links, and photos from my Flickr. The smaller column mainly contains archival information, based on timeline, categories and tags.

As the name suggests, excerpts are short snippets of a post. To be exact, the excerpts shown on my blog contains 120 words, with HTML stripped. To read the entire content of the post, click on title of the post and you would be directed to another page.

What are “my digg and del.icio.us links”? These are 2 websites I visit daily. For interesting news or sites featured on digg, del.icio.us, or discovered by myself, I would bookmark them in either digg or del.icio.us and they would be displayed on my blog as links. So in a nutshell, you would be able to see the latest headline which caught my attention. Check out the Remove-Windows Genuine Advantage links I have which saved quite a lot of people.

As for the other items found in the “Secondary Content” area, they should be quite self-explanatory.

I hope you found this description of the site layout helpful, and that it cleared most of your doubts as to what certain things were? Basically, I have chosen to present, in my blog, information which I appreciated for their significance in making this blog look “fresh” and I hope you would as well. Suppose I do not have any posts, then check out the latest comments or even the latest links I discovered.

Bookmark & Share
Subscribe to WinstonYW
Winston{YW} Copyright © 2008
Powered By Wordpress, JQuery and A Lazy Search Monkey