I’ve been working on a new design for the blog since last month, and I think by the end of this month it will be totally updated, I hope so. Meanwhile, as I’ve received some emails of people asking me how I did the header of this site, I decided to make the PSD file available to everyone. Just download it and enjoy. About the new design, we will have new colors, yes the brown will be gone. Besides the colors the site will be more organized, it will have some new features like request a tutorial, and we will try to updated it at least once a day 5 days per week. We are very excited with the new design. However we want to know what do you think about the blog, what would you like to have in this new version? We are totally open for new ideas and your opinion is very important for us. Please if you have something you think it might be very cool to have on the blog, just leave a comment with your suggestion. Download the PSD file Click here to download the file.
Last night I finished the transition to the new version of my blog. It's been like 4 months since the first release, although I really liked the previous version, I had to make some adjustments in the design.When I designed the first version, I had no idea about who would read it, if someone would read it. However one of the most important thing, which resolution would they use, browser, system and stuff like that. Analyzing my blog's web traffic for the last 4 months I noticed some issues with my blog's design.Resolutions: Firstly, my blog was designed for a minimum resolution of 800x600, after 4 months, no one has visited it using that resolution, besides, the most used resolution is 1280x1024. Browsers & Platforms: I thought Internet Explorer would be the first in the list, and for my surprise, Firefox has been the most used browser when visiting my blog. Now talking about platforms, Windows continues to dominate the market. The new designThe new version is totally different from the previous, starting from the logo that I changed to make it simpler and easier to reproduce, I think I’m going to make some stickers. The color scheme has changed too, now I’m using a brown and orange combination. However the most important thing was the better use of screen, white spaces and to make it more organized. I hope everybody enjoys the new design, and feedback is really appreciated.
Throughout this article I will illustrate the creation of a weblog with the web 2.0 style. From the briefing to the CSS development. Guidelines The blog will be created to my brother who had asked me to do that, besides, he gave me some guidelines of some design aspects that he would like to have in his blog: Dark background; big font sizes; some round corners; a place to put some logos; Also he send me some links of site that he thinks are really cool, below there are some of them. Research With the guidelines and some references in mind I started my research and found some good links about designing web 2.0 style sites such as this Web 2.0 how-to design style guide, which explains really well the web 2.0 features showing examples of sites, concepts and what not to do. After reading a lot of site and got some good insights I became the creation of the layout, first the idea of columns, where the navigation will be, the main content, and stuff like that. Talking to my brother, he said that he would like to have a vertical navigation with a sidebar where he could add his favorite links, search, the blog's navigation, flickr photos, delicious bookmarks and etc... so I came up with a pretty simple wire frame. Wireframe of the blog, liquid layout Layout creation With the wire frame done I knew where to put the content, so I had to start adding loren ipsun content there. One thing that I think is really cool on the web 2.0 trend is the gradients, they create a really cool visual effect of difference on planes, elevating some parts and put some in a lower level. Another cool effect that I have already used on a personal project and I thought would be cool is that "emboss effect" in lines that divide content as Bartelme uses in his site. The dark color and the variation of them are a feature to be exploited. For the header I thought that would be nice to add an illustration or a photo like Veerle does. I start thinking which photo would be cool, looking for the right shot I remember that my brother had taken one pretty cool in Philadelphia in front of that Metropolitan Art Museum where Rocky Balboa always finished his training, as my brother loves Rocky and with the new movie coming to the theaters, I thought that image would fit like a glove. After all of that and several hours in front of my computer using Macromedia Fireworks I came up with the layout below. Click here to open the real size version in a new window The layout, round corner in some parts, gradients, pretty much everything Showing to my brother, he said that he liked it a lot but that there were some issues to be fixed. However he hasn't told me them yet. So the only thing that I can do now is wait, and as soon as he point the issues and we fix them, I will continue this article until the CSS is done.
This is my very first test using Performancing as blog client. I have to say that it looks pretty cool so far.The whole process of setting it up and use it was really easy, I had to install a module on my Drupal called Blog API, and after that select the content types that I want to allow to post content using applications that supor XML-RPC.Selecting and installing the moduleSelecting the content types to be used with the blog clientAfter that I ran a wizard pretty straight forward, very easy, and that's it, it's done.Using PerformancingNow the only thing that I want to know is if there is a good blog client like this for Safari, because I really like the way that Safari render the page, allowing text-shadows and other cool stuff. Maybe with the new Firefox and that Cairo, but that is for another entry ;).Technorati Tags: Performancingpowered by performancing firefox