articles on

Abduzeedo PSD theme

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.

New Design

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.

Creating a web 2.0 blog

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.

Using Performancing Blog Client with Drupal

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

Creating a blog

Here it is, it took a while but I have finished my blog, yes I know there are a lot of details to be fixed yet (sorry IE 6 users, I haven't hacked it yet), though, pretty much of its functionalities are working just fine. I would like to talk a little bit more about this blog, one thing that I'm always trying to figure out when I'm visiting a site is, what CMS or Blog System this guy chose to use and why. I have noticed that Wordpress seems to be the most used at this moment, however there are a lot of good CMS's and Blog systems out there such as Joomla, Textpattern, Movable Type, Typo3, CMS Made Simple.... A good place to test them is >http://www.cmsmatrix.org/ and http://www.opensourcecms.com/. This curiosity made me test a bunch of them, and as a designer one of my goals with this blog is always share my opinion about the experience that I got using them. For this site I chose Drupal. Why did I choose it? Well I've been using Drupal since May or June and I think it has everything that I need to create a good site not only visual but well coded, accessible, valid and stuff like that. Now the Drupal's guys are about to release its 5th version (it's in RC1), it has a lot of improvements such as new default theme, css compressor, more organized, faster, and one of the best for me is jQuery as its javascript library. There are a lot of good article about Drupal on the web, below I list some of them. http://www.drupal.org http://www-128.ibm.com/developerworks/ibm/library/i-osource5/ (series of articles about drupal) http://www.lullabot.com/(they have a really cool podcast about drupal)