Lately I have been working with my brother on a promising project. Actually I shouldn’t even been talking about that now, but it’s necessary to say some things. Basically it’s all about CSS, it’s really cool, and it's called Wedeed. Anyway, what he asked me to do was the logo and later its GUI. “Well, you don't need to hire any creative designers for making those web 2.0 style logos for your blog - just follow any of these tutorials. And if you hate reading instructions in text, head straight to the video tutorial.“http://labnol.blogspot.com/2006/11/logo-tutorials-design-web-20-style.html It’s amazing the number of tutorials showing how to create a web 2.0 logo, actually, there are really good tutorials, but almost all of them showing us how to create those web 2.0 effects, rather than how to come up with a good idea, and that was I was looking for. For this logo our goals was to create a really simple logo, easy to understand, web 2.0, and beautiful. 1 - We follow some ideas like: Cascading Pages Separate design from data Different Colors Simple typeface Flipping pages 2 - Definitions A Cascading Style Sheet (CSS) provides the ability to separate the layout and styles of a web page from the data or information. Styles such as fonts, font sizes, margins, can be specified in one place, then the Web pages feed off this one master list, with the styles cascading throughout the page or an entire site.www.liv.ac.uk/webteam/glossary/ How CSS works 3 - Some inspiration: What people have been doing. http://www.flickr.com/photos/stabilo-boss/93136022/ http://www.flickr.com/photos/stabilo-boss/101793494/ 3 - My ideas: The idea of layers perfectly represents the separation of the design from the data. Looking for some references and inspiration, nothing like google images and flickr Some of the initial digital tests 4 - Fonts of the web 2: There are really great sites showing examples, though I think the simplest the best. Font variations, colors and alignments Great fonts for web 2.0 Web 2.0 logos(fontshop) Andy Budd's SXSW keynote 6 - Adjustments: Some adjustments in the perspective, testing opacities and effects. Trying some colors and opacities 5 - Final Result: Pretty much the simplest version of them all.
Here we go again, continuing the creation of my brother's blog, Blackbelt. Fixing some design issues and creating the XHTML and CSS template. Design Changes My brother had asked for some minor changes on the design of the blog, mainly in the sidebar, where he hadn't liked the round corners tha I had done, although he said he really liked the feeds' box which was black. Feeds' box, darker and with round corners The new sidebar was created using the same style of the feeds' box, but lighter. Using different style for visited links, however IE6 doens't do that. XHTML and CSS Using the basic XHTML generated by the Apache Roller, the blog engine that my brother uses, I started creating the CSS. After a couple of hours everything was pretty much done and working fine, however there were some problems to be fixed with .png images and the box model under Internet Explorer 6. With everything fixed, the template is done, working fine in all the major browsers: IE 6 &7, Firefox, Safari and Opera. If you want to take a look you can download all files that I have used so far.
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.
In 2006 CSS celebrates its 10th anniversary. What does that mean? CSS has changed the way web designers create their sites, separating Markup from presentation, benefitting designer and uses alike. The design community has confirmed that using CSS promotes beauty while making it easier and less expensive to build sites, ”Bert Bos, W3C Style Activity Lead The W3C published on their website an article about the CSS' 10th anniversary, where they list some benefits to designers when using CSS. Rich feature set Reuse Accessibility Cross-media publishing Well, everybody knows that there are some issues with cross browser style yet. Ok it has more to do with Microsoft and Internet Explorer, but for me CSS has made my life much more easier and pleasant. Below, some links related to this post: http://www.w3.org/Style/CSS10/ http://www.w3.org/2006/12/css10-pressrelease.html