Visit The ISO50 PortfolioVisit The ISO50 ShopTycho WebsiteAbout Scott HansenContact ISO50ISO50 on TwitterSign Up!

Archive for the ‘Web Design’ Category

Login Forms

Posted by alex 01/4/10 | Link

roboto
nike
loworks
redbrick
vimeo
Recently I’ve been obsessing over an often overlooked part of web design: the login form. There are few sites that have aggregated examples of login forms for perusal; this one by Design Reviver is pretty good. I’d prefer the list to be more like 500 examples, but it’s easy to go in search of other cool login form designs. The ones above are fun, but I’ve yet to find one that really knocks my socks off. Anyone know of some really superb login forms?

One of my favorite trends is the use of oversized text in the forms. Tumblr was one of the first places I saw it. Scott and I discussed it a long time ago in reference to the Nike login form, pictured above. Still not sure what it is about the giant text field that feels so right — maybe it just seems to reinforce what you’re writing. Like “Yes this IS my email address. BAM.”

18 Comments »   |  Posted by alex in Branding, Web Design

New Audio Player

Posted by ISO50 12/15/09 | Link

iso50-plb
For those of you who listen to a lot of the songs here on the blog this should make your lives a lot easier. We’ve added a new audio player to the site for individual music posts which supports playlists. This means that you can just hit play and let them go without having to click each song individually. The new system is based off the same JWPlayer framework as the normal ISO50 Playlist player (top of the center column) but it will now be for individual posts as well. We will continue to update the main Playlist each month or so, but you can think of this as a new mini playlist each day. The skin is just temporary as I refine it, but all the core functionality should be there.

So far it’s only been implemented on Jakub’s recent “Top 50 Songs of 2009″ series but it will be used for all music posts moving forward. So give it a try and let us know how it’s working. If you find any bugs or issues please let us know in the comments.

Enjoy!

23 Comments »   |  Posted by ISO50 in Music, Web Design

A Weekend with Cargo Collective

Posted by alex 08/31/09 | Link

cargo
Cargo is a terrific web publishing platform built with creatives in mind. Like many content management systems (Squarespace, Indexhibit, Joomla etc), Cargo provides a backend that allows you to quickly publish and maintain a website without ever opening Dreamweaver. What distinguishes Cargo is a focus on simple and effective design. Consistent in all Cargo templates is a layout that is clear and simple; allowing the work to speak for itself without a complicated interface getting in the way.

Cargo evolved out of the system that runs the SpaceCollective community. We found it remarkably successful and efficient in creating visual content on the web, placing a strong emphasis on design, layout, image quality and typography. Our goal is to dramatically increase the accessibility and exposure of creative individuals on the Internet, while aspiring to build a networked context that will contribute to the culture as a whole.- Cargo Collective.

Noteworthy Features
- Free hosting with the ability to set up a custom URL. This is awesome. I have also played around with Squarespace, but their hosting costs are a little frightening — especially if you are also paying URL registration on top of that.

- Multiple template designs to build off. Each one starts with a great layout and it’s really easy to apply your own brand. Simple manipulations of color, font, and header images etc quickly distinguish your site from the skeleton template.

- Follow feature, similar to Tumblr or Twitter — allows you to keep tabs on your favorite Cargo pages.

- Developer forum. I had a small issue which I posted to the forum — received a response within 3 hours. Not bad!

- Slideshow and Fullscreen features for viewing images. This is exceptionally easy to incorporate (just a matter of clicking the buttons) and is a really great feature. Works flawlessly and adds an extra touch of unique functionality.

My Experience

I spent the last few days migrating my portfolio to the Cargo system. I had done a lot of the preparation work a while ago, when I put a portfolio up on Behance, so I didn’t have to spend too long sourcing my images and writing description paragraphs. I was thrilled to be moving to a more personalized portfolio space — as much as I love Behance, sometimes it can feel a little too much like a design Myspace.

The set up process was quick, easy, and remarkably enjoyable. All in all I would say it took about 6-8 hours from start to finish. Most of this time was spent designing the look and feel after the content was uploaded. Once I got familiar with the CSS at work, it was just a matter of figuring out exactly how I wanted to look — altering fonts sizes, small layout tweaks, and making sure everything worked properly. I only hit one or two speed bumps, all easily solved by a quick Google search.

I think it’s important to note that I am not a “web guy” by any stretch of the imagination — if I can handle it, this is a good sign for anyone intimidated by the words “CSS” or “target blank”. Having a basic understanding of CSS/HTML helps, especially if you are planning on tweaking the template significantly, but it is not completely necessary. Even with my limited knowledge, I was able to make the adjustments necessary to create a site I am happy with. As mentioned, the important part of a site like this is the work, and I didn’t really feel like I needed to brand the site too extensively.

As of now, Cargo is in the pre-release stage. I am really excited to see how this system evolves as more and more people get involved. I would highly recommend it to anyone debating which CMS to choose. If you would like to apply for an account, use the contact address on the website.

Favorite Cargo Sites
but does it float
superfamous studios (aka Folkert Gorter)
The Office of Feltron
Avant
Jory Dayne

28 Comments »   |  Posted by alex in Web Design, Websites

New Features + Upgrade

Posted by Scott 08/6/09 | Link

upgrades
We’ve been doing some tweaking here and there and adding some new features over the past month so I thought I’d list them all out in case you missed any.

Featured Posts:
Selected posts are now listed in the center column of the site. There’s also an archive of all past featured posts.

Playlist Archive
As I mentioned last week, all of the playlists are now archived here. Soon there will also be a drop-down below the player containing all the lists for easier access.

Subscribe to Comments
There is now a “Notify me of followup comments” check box in the comment form. By checking this you will be informed via email if anyone replies to your comment (that is of course if you entered an email when commenting). The functionality on this one is still a bit experimental so let me know if you have any issues.

Share Links
Added share links for Facebook and Twitter as well as a “Share This” link which includes all the social network links. They’re all located at the bottom of each post.

Server Upgrade:
As you may have noticed lately, the site has been having some intermittent technical difficulties. The guys over at Mediatemple have been a big help in working on the problem and apparently something in my Wordpress install has become corrupted. They’ll be moving me over to a new dedicated server and I’ll be starting fresh with a new Wordpress install. Hopefully this goes smoothly but as with any big technical move there are sure to be a few hiccups; I appreciate your patience if something does go awry.

3 Comments »   |  Posted by Scott in Web Design

Plant a Tree in Bibio’s Forest

Posted by Jakub 07/16/09 | Link

Bibio forest
Bibio / ISO50
Warp and Bibio made a pretty interesting flash interactive site for the new Bibio album which allows you to listen to songs while creating a tree in Bibio’s digital forest, I made one really quick for ISO50, definitely nice promo and worth checking out. Bibio’s Forest

3 Comments »   |  Posted by Jakub in Animation, Web Design

Sebastian Gram / Hello Monday

Posted by alex 07/16/09 | Link

Picture 2
Picture 3
Picture 1
892641233871995
892641233932952
Seriously impressed by the diverse portfolio of Danish designer Sebastian Gram (currently art director of Hello Monday). The first image (interactive design for fashion brand Revolution) made the FFFFound rounds a while back, but it wasn’t until recently that I explored his portfolio further and found the rest of his exceptional work. Each project, whether it’s a logo or full blown identity system, is considered down to the smallest detail. It’s also cool to see process shots along side the finished product; gives you a sense how much time and refinement went into it.

I was especially intrigued by the typeface for Vertica, developed by Gram and Creative United. My guess, based on progress images like the one above, is that it was designed as a custom face for Vertica and is not commercially available. Too bad, those are some sexy letterforms. Like much of Gram’s work, it manages to rock out with a rigid, corporate aesthetic, without being boring or common. I would love to see my name written in that font.

2 Comments »   |  Posted by alex in Branding, Web Design

Loworks Japan

Posted by alex 05/29/09 | Link

picture-55
picture-62
picture-73
picture-121
picture-82
Loworks is a design company based in Japan. I’ve been on a wacky illustration kick recently, and it’s always fun to see what Loworks is up to. Their old site is one of my all time favorite website designs. It may not be the best design from an accessibility standpoint, but you can’t beat the creativity and absolute craziness at work. I wish it was still active, always made me happy. Computer Arts did a small feature on Loworks if you are interested.

8 Comments »   |  Posted by alex in Print, Web Design, Websites

New Site Alert: Warp Records

Posted by Jakub 05/1/09 | Link

New Warp Site
I’m not a web designer or am I Scott or many of you talented graphic designers but i’m really impressed with the new Warp website. I like how they finally used that Pantone patented purple they’ve owned for the first time in a proper way. Not to ever diss the old design which was done by Designer Republic which had a great interactive flash feature and gave each newly signed musician a color. I also like that this new site doesn’t feel like lego pieces stacked and that I can easily recognize what’s the important new news right from the start. Nice work guys

11 Comments »   |  Posted by Jakub in Web Design

ISO50 Playlist 1

Posted by Scott 03/16/09 | Link

pl001cover
Track Listing:
School Of Seven Bells – Half Asleep
Gang Gang Dance – Egowar
Mahogany – One Plus One Equals Three Or M
Empire Of The Sun – Walking On A Dream
The Whitest Boy Alive vs Mylo vs Cut Copy – Otto’s Golden Journey (Andy Webb’s Dreamy Blend)
Phoenix – 1901
Air France – No Excuses
College – The Energy Story
Christ. – Cordate
Flying Lotus – Auntie’s lock/Infinitum (featuring Laura Darlington)
Flying Lotus – Roberta Flack (Mike Slott’s Other Mix)
The Avalanches – Since I Left You (Cornelius Remix)
Super Furry Animals – Some Things Come from Nothing
Engineers – Let’s Just See
Sigur Rós – Gobbledigook
French Kicks – Abandon
Blind Man’s Colour – Brother Sport (Animal Collective Cover)
Beirut – The Concubine
The Kooks – Kids (MGMT Cover)
Benoit Pioulard – Ash in the Sky
Bibio – Bewley In Grey

Daedelus – Experience

Unless you’re an RSS subscriber (if you are, click here to view player), you’ve probably noticed the new audio player at the top of the page. I’ve been wanting to add a flash based player for a long time because while the small single track player we have been using (and will continue to use) for music posts is good, it’s not something you can just turn on and let it play while you work. This new player is based on the JW Player framework and supports XML playlists and all the good stuff. It was a total pain to develop though, the documentation was a little thin in the skinning department so it’s been a very protracted process to say the least. I ironed out the last kinks over the past week so here it is…finally: the ISO50 Playlist. We’ll be refreshing the playlist often, usually with 16 or so song mixes probably every couple weeks or so.

The initial mix I put in tonight is just a collection of some of my favorites from the blog over the past year or so, nothing too specific or themed. Every song in the player (now and in the future) will be songs that we’ve previously posted on, so if you’re looking for more information on the song or artist just type it in the search box below (also new…well the design at least) and the relevant post(s) should come up. This is definitely a beta so give me the heads up in the comments if you run into any issues with the player as only a few people have tested it so far. On a related note, I’ve added a “featured posts” column in the hopes that it will make older posts a little more discoverable. I’ll also be adding a “featured categories” section next week as well in which I’ll try to compile some nice groupings of related articles on various subjects. As the blog gets on in years and the posts pile up, most of these additions are aimed squarely at highlighting older content, music and otherwise.

All of these changes and additions may get you thinking about the redesign I had discussed a while back. I haven’t given up on that plan, but it’s definitely taken a back seat as the process of finishing up my next album has sort of consumed me. I decided to make some incremental upgrades (like those mentioned above) using the current theme and then treat the redesign as it’s own phase a little later. Still contemplating that light background…

At any rate, the Playlist is here and I hope you enjoy! As always, your feedback is greatly appreciated.

45 Comments »   |  Posted by Scott in Music, Playlist, Web Design

HAL Project

Posted by Scott 02/2/09 | Link

halpro
halpro2
halpro3
I came across the HAL Project site the other day and thought I’d post. There are a lot of cool visuals inspired by the original film along with your very own HAL screensaver. Link

9 Comments »   |  Posted by Scott in Film, Web Design

Jeff Doe Design

Posted by Scott 02/2/09 | Link

jdd
Back in my days in Sacramento I spent a couple years at BKWLD, a small web shop in Roseville, CA where I got to work closely with fellow designer Jeff Toll (aka Jeff Doe). Jeff has recently launched his personal portfolio showcasing a lot of the excellent web work he’s done as creative director for BKWLD. I’d urge any web designers looking for inspiration to have a look, there are some great examples in there (including the FWA site of the day he did for The Wreckers).

Jeff Doe Interactive Portfolio & Print Portfolio
Jeff’s also got an interesting blog going on here

3 Comments »   |  Posted by Scott in Web Design

Grid Designer 2

Posted by Scott 01/9/09 | Link

gridd2
gd2
Came across this very cool CSS/HTML grid designer today. Aptly named “Grid Designer 2″, this tool allows you to mock up grid-based page layouts and set typography styles. A very handy page to have in your bookmarks, now they just need to make a widget out of this. Grid Designer 2

Related Reading: Five Simple Steps to Designing Grid Systems, Aisle One

9 Comments »   |  Posted by Scott in Web Design

Wordpress 2.7 = Success

Posted by Scott 01/4/09 | Link

27
I just successfully upgraded the Wordpress install for ISO50 to the new 2.7 version. I must say, this new version is incredible. I was running 2.1 for the longest time as a result of some early edits I made to the core files when I first installed WP (not recommended, but I didn’t really know what I was doing back then). There is a detailed guide on how to upgrade at the WP codex, but I decided to use a plugin that does everything automatically. It literally took 1 minute and I didn’t have to really do anything. The plugin, Instant Upgrade, is available here. If you’re running an older version of Wordpress, you really should upgrade simply for security reasons alone, but the new admin interface and features are definitely worth it on their own.

Anyways, let me know if you notice anything weird on the site, I will be trying to flush out the bugs this afternoon.

You probably won’t notice any big differences now, but this is the first step on the path to the new redesign which I posted on a couple days ago. I want to say thanks to everyone who commented, it was a huge help to get such great feedback from all of you. I will be working through all the suggestions and deciding which will benefit the blog the most. As many of you pointed out though, most read the blog via the RSS feed so they rarely even visit the page. With this in mind, I try to make the page sort of the anti-RSS reader version, not stripped down, and not super clean. This isn’t Engaget or something, people come here for more than just the content I think, that is why I’ve never focused too much on things like the inverted contrast, Sifr titles, etc. I still want the blog to maintain a unique visual aesthetic, especially considering 99.9% of all blogs out there essentially look exactly the same. That’s not to say that I won’t be taking steps to make it faster and cleaner in the redesign, I definitely will, I’m just going to try to find a happy medium between form and function. Because those looking for pure function will always opt for an RSS reader.

As for the multiple authors issue a lot of you brought up, this is something I will really focus on clarifying. But to make one initial clarification, a few of you mentioned that you felt I was simply “letting my friends post” on the blog. This really isn’t the case. First of all, Jakub is an A&R, a label owner, and a DJ. I count him as a friend now, but this is from working together (he handles a lot of the day to day stuff for my Tycho music project and ISO50). Besides, he is who I look to when I want to find new music, we have similar tastes, and he is well qualified. This isn’t simply a case of me putting on my childhood friend or something. If I had the time to find new music and put as much effort into it as he does, I would most likely be posting the exact same stuff as him, so I’ve sort handed off a lot of the music posting duties to him and I think he does a superb job (my iPhone is pretty much just a big playlist of everything he has posted on the blog). Beamer is a friend of mine, but he also happens to be the most knowledgeable person I know when it comes to early electronic music and he has a very large collection of rare electronic / ital-disco vinyl. Alex Cornell is a student and my intern here at the studio, his posts are meant to bring a student perspective to the mix. I have been in design for way too long to really see it from that early, super-objective point of view. The point is that I put these guys on the blog because I truly respect and value their opinions and tastes. I am very lucky that they are willing to participate in the blog and I think they are a big part of what makes it what it is. If it was just me posting here you’d all be inundated by a never ending stream of me ranting about what the best version of Windows is for swap disk latencies and MP3s of late nineties IDM. At any rate, I will definitely be making author pages for each of them to make things clearer.

Finally, here’s a tentative list of fixes/upgrades based on your suggestions, there are some other, larger features that will be added but that list is still secret!

coffee-and-lists2

31 Comments »   |  Posted by Scott in Web Design

New Year / New Blog

Posted by Scott 01/3/09 | Link

i509.png The ISO50 blog is now approaching it’s second birthday and with the new year I thought now would be a good time to rethink the layout and functionality of the interface. The blog runs on the superb Wordpress platform (highly recommended) so it’s extremely flexible and I want to take better advantage of that flexibility. When I first designed and built the blog I admittedly had no clue what I was doing. At the time I wasn’t really an avid blog reader so I didn’t really understand the finer points of a well thought out blog design. Thankfully, Wordpress supports themes so I snagged the classic Kubrick theme (now K2) and hacked it into the form you see here. I learned a lot during the process and during the following year or so of working with the blog so I feel better equipped now to give it another shot. But as anyone in web design knows, it’s very difficult to be objective about your own interfaces and to understand the difficulties end users may have with your design.

So I wanted to ask you, the readers, what you would do to improve the blog. Is there anything about the interface or the layout that’s confusing, cumbersome, or just plain broken? Are there any features that you feel are missing or would be a good addition? I am in the early stages of the redesign, I have some mock-ups and wireframes going and a development install running here locally, so now would be a great time for suggestions. I look forward to reading any ideas or suggestions you might have in the comments

Update: Based on Michael J.’s comments I have added to this post in the comments.

48 Comments »   |  Posted by Scott in GUI, Web Design

Web Design Sketchbook

Posted by Scott 12/30/08 | Link

hyper1_0.jpg
hyper3_0.jpg
hyper5_0.jpg
hyper4_0.jpg
This is a pretty clever concept, a real sketchbook for web mock-ups. I think I’ll stick with Photoshop but this would probably be fun now and then. Via Paranaiv

11 Comments »   |  Posted by Scott in Web Design