Veiko.com

CSS3 Button Maker

2010-06-10T09:39:00.000-07:00

With the arrival of CSS3, designing in Photoshop is seemingly becoming less and less necessary. But remembering all those new attributes can still be a little tricky at times. That's where this CSS3 Button Maker by CSS Tricks comes in handy. This is a really nice tool for quickly and automatically developing code that could save you a lot of time flipping between your code and a CSS3 reference guide.

CSS3 Experiment: Solar System Fun!

2010-05-18T16:51:00.000-07:00

Now that CSS3 is out and about with all its nifty animations, tranformations, etc... I've seen several interesting attempts to push these new properties to the limits while having a bit of fun in the meantime. Our Solar System is a great little experiment, complete with animated planets and other orbits. It does look a little quirky on my browser, Google Chrome 4.1, but an A+ for effort anyway. Here are a few other great CSS3/HTML5 links.

Having fun with CSS3 and HTML5

Evan Black: An Experiment in HTML 5 and CSS

This is a great example of what we can look forward to in terms of web design when these new standards actually become standards.

Windows 7 start menu using CSS3 only

Great job here. I don't actually have Windows 7, so I can't vouch for how realistic this is, but it sure looks good enough to me.

CSS3-Man: A pure CSS3 animation

My favorite... an actual animated comic

I love typography a lot

"...a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS2.1, and modern browser implementations of a couple of CSS3 properties. Along the way a few new browser bugs and inconsistencies were exposed..." Explanation here

Social media icons in pure CSS3

CSS3 Transforms and @font-face experiment

10 Examples of Illustration in Web Design

2010-05-12T11:58:00.000-07:00

blog.torondel.net

www.birdboxx.com

www.silverbackapp.com

www.logolabs.nl

www.orangeapple.com

www.arbel-designs.com

www.glasshouse.co.za

www.morphix.si

www.carbonmade.com

www.deanoakley.com

New features in Google Chrome 5 beta

2010-05-11T17:36:00.000-07:00

The latest beta version of Google Chrome includes several new features which certainly have me anticipating the release of the stable version. More synchronization, disabling annoying translation requests and the ability to reorder extension buttons are among the highlights. Read on to find out more about what's new and improved.

The most interesting

Google Chrome can synchronize themes and preferences

As I have mentioned before, the ability to synchronize all elements of a web browser across multiple computers that I use frequently seems of vital importance to me. I have never really used themes, but having preferences synched will definitely be a nice feature.

Manual translation

I work at the same time on webpages in at least 5 different languages, and while I realize that this may not be the case for everyone, I will definitely not miss the translation bar popping up EVERY TIME I am working on a design for a site that is not in English. And no, for some reason it never remember the setting to 'Never translate this domain/page'.

Reorder extension buttons

This is just something that slightly bothers me every time I install a new extension. I find myself clicking on the extension's icon, and trying to drag it to a more convenient location. Until I remember, oops, nope, can't do that yet.

Other new improvements include a new bookmark manager, the ability to delete individual items from the history, Flash plugin integration and ability to manually disable plugins, remembering zoom settings, extensions in incognito mode and native geolocation. You can read more about this at Google Operating System.

Thousands of free fonts for web design... FINALLY

2010-05-05T17:42:00.000-07:00

Monotype Imaging has recently announced a "New Solution to Offer Thousands of Fonts for the Web including the Iconic Helvetica and Frutiger Designs". I couldn't be more excited... AND I have just received an invitation to try out the beta over at Fonts.com. At first glance, this service seems quite similar to TypeKit, which I had been using previously. But I had always found their selection quite limited (at least with the free account), and didn't really consider the service to be worth the extra bytes it was downloading. However, browsing through the list at Fonts.com, I am really starting to see a silver lining for web typography.

The first step once you have set up your account is to introduce the domains that you are going to be loading your fonts to. Then you get to browse through their HUGE directory of fonts and select whatever strikes your fancy.

Once you have chosen your fonts, you have to introduce the appropriate selectors, paste a line of javascript into your page, and you're done!

So, without further delay, I am going to continue drooling over the possibilities of thousands of fonts to choose from...

Rank position and optimizing images for load speed

2010-05-05T10:05:00.000-07:00

Google has recently announced that they are now including site speed as a factor for rank position. Ouch! This makes sense, but it is interesting that as a web developer (and one who was still making entire websites in Flash until about 2 years ago), I had slowly stopped considering this issue as the years have gone by. I remember when a 100Kb image meant waiting for a couple of minutes and so was only used when really necessary. But with average broadband internet speed increasing steadily, even more than a MB could load at a *decent* rate (I'm writing from Spain, so if you live somewhere else your experience may vary).

What does this mean for web developers? I guess we will have to take into account the fact that every pixel counts. But instead of avoiding large full screen backgrounds it might be wise to read up on how to optimize these images and which image types are more appropriate in each case.

Here are some articles to get started:
PNG vs JPG: 6 simple lessons you can learn from our mistakes by Turnkey Linux
Optimization of JPEG (JPG) images: good quality and small size by AMPSoft
Speed Up Your Website with Better Image Optimization in Photoshop by UXBooth
Speed Up Web Site Load Time by WebWeaver
1 Minute Image Optimization to Make Website Load Fast by Techpavan

CSS3 in newsletter design

2010-04-29T10:47:00.000-07:00

CampaignMonitor.com has run some extensive tests to find out which CSS3 properties can be used when designing newsletters. I have been playing around with CSS3 lately and as many other web designers, I'm sure, just can't wait until there is better implementation of these new standards. I have already tried designing with just code and using Chrome, but always have to head back to Photoshop to finish off details in buttons or headers. Soon enough, I hope to be able drop Adobe's expensive software from my list of essential applications as a web designer. In the meantime, check out Campaign Monitor's list of which CSS3 properties work in which email clients or their example of an email campaign by Panic using many of these features.

Here is a quick screenshot of their findings:

Free web design icon set

2010-04-27T06:15:00.000-07:00

Smashing Magazine and Oliver Twardowski have released a new icon set for web design containing over 750 free 48x48 icons. In addition, the PSD files are available for download too. Personally, I don't think it's the nicest set of icons I've ever seen, but the amount does partially make up for this as there is so much to choose from.

The set consists of web application icons, user interface icons, e-commerce icons, general use icons, desktop icons, blog icons, smiley icons, button icons, keyboard icons, national flags icons, popular online services icons and many others.

If you are looking for something a bit nicer, I would recommend Danish Royalty Free by Jonas Rask Design which comes close to almost 100 icons.

Another one of my favorite sets is the Kombine Toolbar Icons Starter Kit which contains 45 free icons and there are another 200 available for purchase.

If you still haven't found what you're looking for you can always check out IconPot, a simple site with a huge list of free icons available from every corner of the web. This is always the first place I go to when looking for new icons. Good luck!

Inspiration: Tokyo Olympic Games 2016

2010-04-24T00:00:00.000-07:00

Beautiful concept work by Andreas Leonidou on fictional Tokyo Olympics Games in 2016.

The idea for the beautiful fractal seems to have been influenced by typical Japanese artwork and imagery. The symbolic waves and tsunamis are clearly seen. The logo is a wonderful combination of origami and the colors of the Japanese flag. I would definitely recommend checking out the entire project to see the full development of the project and the final concept pieces.

Visit link [Tokyo Olympic Games 2016]

Pictaculous: color palette generator

2010-04-23T02:22:00.000-07:00

Pictaculous is a great new tool developed by MailChimp that allows you to generate a color palette based on any image you upload. The service will not only come up with a color scheme, but it will also suggest similar color themes available from Adobe Kuler and ColourLovers (a couple of other handy color palette generators) AND create an Adobe Swatch file for you. Alternatively, you can e-mail the image to colors [at] mailchimp.com and get these same results sent back.

Below you can see an example of an image I uploaded. The hex colors for the generated palette are given as well as the suggestions from the other sites and the file to download for Photoshop.

What makes Pictaculous different from other online color scheme generators is the fact that you can e-mail the photo to them and obtain the results back in the same format, making it perfect for sending an image taken with a mobile device. Not sure how useful that really is, but it's definitely neat!

10 Beautiful Blue Web Designs

2010-04-16T09:04:00.001-07:00

www.apilot.no

www.bradcolbow.com

blog.torondel.net

www.benstockdesign.com

www.catalinuta.com

www.anipals.co.uk

www.bandthemer.com

blog.thepixel.com

www.greaterthings.lhc.org

www.honblue.com

Adobe CS5 Icons

2010-04-14T09:54:00.000-07:00

Adobe has recently announced their new line of CS5 products, currently available for pre-order. With this new release comes a redesign of the icons and splash screen for each product. Several conversations have sprung up between designers about the path that Adobe hast taken for its Creative Suite since the last couple of versions.

Personally, I would have to say that the CS4 version was my favorite. CS3 was nice enough, bold colors and simple typographic elements helped users distinguish between each product. The release of CS4 just played a little more with these same ideas and polished off the already great concepts. However, with this newest release I feel the design has gone back a couple of steps and lost the "finished" look that it previously had. You can see the latest icons on Adobe's product page.

Tuts+ introduces Creative Sessions

2010-04-13T12:26:00.000-07:00

Tuts+ has started a new series of articles called Creative Sessions that will "teach the theory behind the techniques and practices" of several topics covering "everything from digital illustration, to typography, to web design". They will launch a new two-week session at the beginning of each month and publish it in "whichever Tuts+ site is most relevant to the subject being covered, and aggregated on the Creative Sessions Hub Site". This first month will be focusing on Character Illustration and the first couple of articles are already out.

Repper: Free pattern and tiled background generator

2010-04-13T10:34:00.000-07:00

Repper is a free online tool to create patterns and tiling backgrounds. It has a very intuitive interface and allows you to make very interesting designs in just seconds. You first choose and upload a photo, select what part of the image you want to repeat and the tile shape. Repper then generates the pattern background and you can either download it, set it as your Twitter background, or even share it on Facebook and other social media sites, for whatever reason you may find that useful...

One Bit Increment

2010-04-09T10:35:00.000-07:00

This is a beautiful Flash mini-site/game by One Bit Wonder.

After many weekends of paper cuts, headaches, and paint stains on our clothing, we are proud to present One Bit Increment, the experience site. Take the hungry coo for a walk through our paper crafted forest to find potatoes to fill his huge belly. Admire the scenery, meet (and squish) hedgehogs. Climb higher and higher! Click here to experience the mini-site now (requires Flash), or continue reading to learn of the difficulties and turmoil we encountered while working on this project.

Visit site http://www.onebitincrement.com/

Using labels as folders and message preview in Gmail

2010-04-09T09:13:00.000-07:00

Two useful features have been added to Google Labs recently. Message Sneak Peak allows you to preview a message from your Inbox by right-clicking on it without having to load the whole message page. This will be great when searching for specific content in a list of e-mails, for example, from people who refuse to write subjects for each message. Nested Labels is Gmail's first attempt at allowing users to store e-mail in a folder-like structure. You can apply this by using the following structure when naming your labels: "Folder/Label" and even "Folder/Subfolder/Label". This is still rather rudimentary as the label will show up in your inbox as "Folder/Label" but is certainly a step in the right direction.

Message Sneak Peak
Peek into a conversation without opening it by right-clicking on a message in your inbox.

Nested Labels
Manage your email by sorting it into a hierarchy of labels.

Via [Official Gmail Blog]

Advanced Javascript to Improve your Web App

2010-04-08T07:21:00.000-07:00

In February 2010 John Resig, the creator and lead developer of the jQuery JavaScript library, spoke at the annual Future of Web Apps Miami conference. During this 25 minute talk John outlines many of the new features and ideas behind jQuery 1.4.

Via [Carsonified]

Portable Apps, Dropbox and Chrome Sync for Settings and Autofill data

2010-04-08T06:53:00.000-07:00

It seems that a recent Chromium build is allowing for synching of settings and form autofill data. The next step will hopefully be extensions and browsing history. For a while I was using a portable version of Google Chrome from Portableapps.com which I would keep synched on several computers with Dropbox. But this had the huge disadvantage of forcing me to leave my computer on from anywhere between 2-30 minutes after I was done working. Yes, Chrome stores that much data! Sometimes files could be up to 50MB, (which is kind of creepy, what the hell is it really storing?).
I soon discovered that I could just delete these files if I was in a real hurry to shut my computer down, but then what was the whole point? I would lose my history, thumbnails or whatever else was over more than a couple MBs. This could have been solved if Dropbox offered the possibility of shutting down the computer after synching was done. And then there was also the problem of conflicting files that were created occasionally. I had to be really careful to never run simultaneous versions of Chrome (or any other portable app for that matter). Fair enough.

There were some advantages though. I loved being able to close my browser with all my current work at home in the night and get to the office at the following morning, open up Chrome and have everything exactly as I left it. So, ever since bookmark sync was added to Chrome, I have ditched the portable version. I still do use Dropbox synching for a few other applications, but ones that I use less frequently (and that store a lot less data than Chrome) and just where I want my settings, plugins and/or extensions to be saved from one computer to another. Filezilla, Notepad, Skype, Foxit PDF Reader adn a few more are great examples. I also really like that this way I don't mess with the computer's registry as much by continually installing, uninstalling, reinstalling.

Overall, I now love my setup with a few portable applications staying the same across multiple computers. I just hope that Chrome keeps adding the ability to sync more data.

iPad = Google Killer?

2010-04-07T16:29:00.000-07:00

This is an interesting read on how the iPad could *possibly* threaten Google's position as the world's largest daily content provider. Personally, I find little to no appeal in the iPad. I am comfortable using a traditional laptop with a keyboard, and I like the fact that Google lets me search through more sites than those whose content I'm willing to pay for.

The writer comments that while using his iPad he "spent hours consuming content" and "never opened [his] browser". He relied entirely on Apps to get to everything he needed. So, instead of having to type in www... he could just open up his "favorite content, social networks, maps, weather, etc..." with the touch of his finger. Big deal. I can add all these bookmarks to a toolbar in my browser and have the exact same content available with a single click and not paying anything at all.

Via [Mele's Musings]

Browsera: Cross Browser Checking

2010-04-02T17:34:00.000-07:00

I have recently started using a great service, Browsera, for checking the compatibility of XHTML/CSS code across browsers. I had previously been using Adobe Browserlab which works fine, but simply provides you with a visual comparison of your site in different browsers. Browsera goes one step further and tells me exactly what the differences are. It reports layout differences and javascript errors for each of the browsers tested and gives specific information about what it encounters. For example, "ul#imageFade, div#content misaligned in Internet Explorer 6".

Worst website ever

2010-04-02T10:39:00.000-07:00

I just came across the worst website ever.

And yes, this really does exist.

Panic Board

2010-04-02T10:14:00.000-07:00

I love this idea from Panic Inc.

A status board they set up at their office keeps everyone informed and up to date on how things are going and what they should be doing. And it looks great too...

Refreshing POP mail in Gmail

2010-04-02T09:27:00.000-07:00

Just found a great way to refresh POP accounts that you have linked to your Gmail account. It has been very annoying in the past to have to wait for the next time that Gmail checks for mail when you know you have a message waiting for you.

Turn on "Refresh POP accounts" from the Labs tab under Settings, and the refresh link at the top of your inbox will not only update your inbox with your new Gmail messages, it will also fetch messages from any other accounts which you have set up.

Via [Official Gmail Blog]

Lovely design for an HP ad

2010-03-31T05:19:00.000-07:00

A beautiful set of ads done by Lab Partners.

[View more]

Web Design Inspiration: Deaxon

2009-05-15T08:30:00.000-07:00

http://www.deaxon.com