Tag: WEBDESIGN

Ahhh, the good old days. When men were real men, and websites were horrific white-on-dayglo-yellow creations lovingly crafted in notepad, complete with animated GIFs of randomly dancing M&M's and poor MIDI versions of Oasis' Wonderwall on auto-play. Miss those days? Do you? Come on, you can admit it... we're all friends here. Okay, you don't have to say anything -- I can see it in your eyes, ...

0to255 it a very slick, well-designed tool for quickly finding color variations for borders and color gradients. You dial in a Hex color code (say, "de40d5") and instantly get a long palette with light-to-dark variations of that particular hue. Every variation has its hex color value written across it, and when you hover over it you get a small swatch showing your original color along with the ...

Ahhh, color...you can't live with it, can't live without it. At least, that often seems to be the case for me; my color vision isn't exactly perfect, and sometimes I do need to pick colors for a design. I've been known to make some very odd "matches" (well, I thought they matched very well, while others begged to differ). I then found Adobe's Kuler, which is a great tool for browsing ready-made ...

Picasa is awesome. The way that it integrates with Web Albums is very convenient, and the process of selecting your best images and uploading them to an online album is extremely polished. However, when the time comes to share this album with your friends, you might want to show them something a bit more personalized than a generic Picasa Web Albums link. If you are a professional or aspiring ...

Instant Blueprint is one of those over-the-top web2.0-looking websites. You know, gradients, lots of white space, funky looking "ribbons" from the top... the works. On paper, it provides an interesting service for web developers who have some experience: You specify a project name, document type, JS library and selectors for your project, and Instant Blueprint spits out a zip file containing a ...

Similar to recently covered Lifeyo, Viviti is a CMS for people starting out with their first website. The concept is very similar, and the execution is quite nice. You build your page out of drag-and-drop "blocks", which are high-level components. You can drop in a blog, a feedback form, a PayPal payment widget, and also arbitrary HTML and Javascript code. You start off with a template, ...

The Web Developer add-on for Chrome tries to complement Chrome's already-excellent developer tools (Ctrl-Shift-I) with some in-page hints and tools. The garbled output you see above is the result of selecting Information > Display ID & Class Details. Not very graceful, obviously. The add-on is missing a screen ruler (I'm sure the developer will add it later). Despite lacking a ...

Lifeyo is an incredible content management system for someone just trying to put together their first website. The whole system is very web2.0, but they manage to pull off this design cliché in a way which is actually useful -- all the dialogs are sensibly laid out, and the large fonts and bright colors actually make the system less intimidating to use. Their business model is also ...

Rejex is a very handy little site for building and testing regular expressions on the fly. It's composed of four simple text boxes and a very informative cheat sheet (not shown above, but after the jump). You feed your text into the "Test String" box (the middle one), and then your expression into the top box, and immediately see the matches in the bottom box. Here I am searching for instances of ...

DummyImage.com is a great time saver for web developers laying out a quick page. It receives arguments in the URL, and returns an image of the exact size, colors, and file format specified. The image at the top of this post is not a screenshot; I merely entered the following line into my editor: <img border="0" src="http://dummyimage.com/580x400/444/e0e.png"> As you can see, it's ...

You know those IQ test questions, "An apple is to an orange as a ________ is to a wall"? Well, HTML5 is to HTML4 as a photon torpedo is to a snowball hurled by a sleepy five-year old. Or something. If that sounds jumbled, it's just because HTML5 is challenging my notion of what HTML even is and that's making me very confused. The HTML5 Audio Data API is just one example of what can be done with ...

MeasureIt is another one of the simple, single-purpose tools I like because they make it easy for newcomers to develop basic web design skills. It simply lets you measure screen elements in pixels -- no more, no less. Once you install it, you get a tiny icon on the left side of the status bar. Click the icon, click-and-drag anywhere on the page, and get a tiny tooltip showing dimensions. ...

Replacing the color scheme for a site using CSS can be an annoying task. The same color may be used for several elements across the file, and you need to search and replace for it. Color is represented by hex codes, which is not very visual. This is not a problem heavyweight web developers have -- they're usually set up with advanced text editors which feature built-in color pickers. Users ...

This one's for the web developers: JS "lightbox" galleries are a dime a dozen these days. Do we really need another one? After looking at YoxView, I think it's definitely a worthy contender in this crowded niche. YoxView has the usual lightbox effect but adds a few bells and whistles such as easy support for multiple instances (great for blogs), image pre-caching, timed slideshows, keyboard ...

Yesterday we reviewed BaseKit, a web app that lets you build websites from scratch, or from imported Photoshop PSD files. Really, all you have to do is import a PSD and drag a bunch of widgets around, and you have a beautiful W3C-compliant CSS/HTML website. And now we have some beta keys to give away! In a change from the norm, we're giving away the keys on our Facebook page -- to enter just ...