The DesignInformer has posted an excellent article calling web designers to slow down a little and give more thought and time to exploring the roots of our craft and our origins as artisans. Principles of Great Design: Craftsmanship outlines five essential points every designer should address in the course of their careers:

1. Practice
2. Education
3. Accept Criticism
4. Attention to detail
5. Design for the future

Definitely read this one. It’s a well-thought and well-written blog post on why web designers need to get back to their artisan roots, and expands on a blog post I wrote last week about web designers getting back to using pencil and paper when designing web sites.

The idea of a web designer being first an artisan reminds me of something Walter Gropius, a famous architect and founder of the Bauhaus design movement in 1919, once said in regards to design, art and craftsmanship:

Architects, painters, sculptors, we must all return to crafts! For there is no such thing as “professional art”. There is no essential difference between the artist and the craftsman. The artist is an exalted craftsman. By the grace of Heaven and in rare moments of inspiration which transcend the will, art may unconsciously blossom from the labour of his hand, but a base in handicrafts is essential to every artist. It is there that the original source of creativity lies.

When asked about what goes into a web site design most of us web designers will automatically start talking about color palettes, image formats, UI effects, and of course, Photoshop and its endless array of filters, plugins and effects. What about the design? Where do the ideas and the creativity come from? How does a visual concept floating around in our brain make its way onto the computer screen?

The web medium is a digital one, but all good ideas usually come from analog instruments that have been around for a very long time… pencil and paper. Any good web designer should be a practitioner of sketching page after page of thumbnails while they hash out their creative ideas. Simply put, nothing is faster at capturing and visualizing our creative thought patterns than the trusty old pencil and paper. And it makes the process of rendering a comp in Photoshop much easier if you already know what it is you are designing.

To illustrate the process of how a visual web site design goes from an idea to a comp, I’ve scanned a sampling of sketches from a web design project. Scroll down to see how ideas begin as loose sketches, get tighter as they begin to congeal, and ultimately make their way onto the computer screen.

All of these sketches were completed on my paper of choice: Clearprint Fade-out design and sketch vellum. I prefer gridded paper, as it maintains some sense of order while I’m sketching.

On this first page you can see that I am just exploring some rough layout ideas. In addition, I’m writing down information I want to remember later.

I’ve found some visual elements I like and I’m sketching studies of them to see if they’ll work. It helps to focus on one area of the web site when exploring new ideas, for example, how icons might look in the navigation.

Sketching some ideas on how the web site might look in the context of the web browser using different background treatments. Also taking down notes for what labels and content will appear in each section.

The layout is getting tighter. These sketches are an exercise in how different shades and textures might look. More notes on different ideas to explore.

Trying out some unconventional ideas for the site navigation. They were not used but it was still a good exercise to sketch them out. This sketch shows why thumbnails are so powerful. They enable you to explore almost every idea so only the good ones make it to the computer screen.

This final sketch shows a layout that will be rendered in Photoshop. The subtle asymmetry of the design could not have been achieved without evolving to this point through previous thumbnails. The notes are more ideas for colors and textures to explore once I’ve started rendering the design.

The design comp! This is the first draft of the comp that will be presented to the client. Looking back you can see how different elements from the thumbnail sketches made their way into the final design.

That’s it. The more you practice sketching designs on paper the faster and better you will become. In addition, you’ll build up a library of sketches that can be referenced on future design projects. Just because one idea didn’t work on this web site design project doesn’t mean it won’t work on another.

Happy sketching!

The proliferation of lightweight web frameworks combined with a multitude of talented web designers and developers has led to an unprecedented number of web-based applications. From balancing our checkbooks to managing large projects at a small business or creative agency, one can find web-based software that does just about everything.

When I’ve been in conversations with other web designers and developers the same question almost always comes up in regards to their software and the framework underneath it… does it scale?

It’s a valid question and one that every developer should be considering even before entering the fray of online software. The framework will only get you so far. After that an intimate knowledge is required of the code base, the database, and how the two relate to your online app. You never know when growth is going to happen and increased usage will almost always reveal cracks and fissures in the stability of your app.

We’ve been developing Intervals, our web-based time, task and project management software, for several years now. And during that time we’ve encountered many scenarios where scalability of our online application was critical. While we’ve depended on the shared knowledge of our development team and many veterans in our field, we’ve also learned a lot by watching how the big boys do it. Facebook, in particular, has been a poster child for learning how to address scalability.

For example, take a look at this presentation summary from “High Performance at a Massic Scale: Lessons Learned at Facebook” from Amin Vahdat, a Professor in Computer Science and Engineering at UC San Diego.

The Intervals development team has certainly benefited from the contributions made by Facebook. Here are some highlights from the article on what we believe web designers and developers should focus on most when scaling their web-based software.

1. Site Architecture
   Plan out how many servers you will need and leave yourself room to scale. For example, a single dedicated server may be fine for smaller applications, but if you see your app growing beyond the capabilities of one server, start out with an additional dedicated database server. Designing your online software to run on multiple hardware makes scalability less difficult because you can easily add additional servers and a load balancer to the mix.
2. Memcache
   Memcache is perhaps one of the easiest ways to scale an application. Facebook has open sourced their additions to the memcache library which make it versatile and easy to implement. Memcache allows a web-based app to store data in RAM across multiple physical servers, saving trips to the database. Commonly accessed data can be stored in memcache which will decrease load on the database and increase the applications response times.
3. Faster web server
   In addition to new lightweight frameworks there are a number of new web servers with a much smaller footprint than Apache. Faster web servers have been recently built from the ground up to do the minimal amount of lifting required to serve up web pages. Web servers such as Nginx and Lighttpd are two in particular that are gaining traction. Facebook has written a web server called Tornado as well. Consider serving up all or part of your application using these lighter and faster web servers.

That should be enough to get anyone started. There are a lot of other tips in the article, some of which may challenge conventional thinking (database denormalization, for example) on how we design and develop web-based applications. However, when it comes to serving up online software, speed and response times are more important than code prettiness and database neatness.

Most importantly, remember that the web is in a constant state of flux. You are going to make some mistakes and most likely your customers will forgive you for it. Amin paraphrases this well:

…an interesting philosophy from Mark Zuckerberg: “Work fast and don’t be afraid to break things.” Overall, the idea to avoid working cautiously the entire year, delivering rock-solid code, but not much of it. A corollary: if you take the entire site down, it’s not the end of your career.

We are quickly coming to the close of a decade. One that began with the great Y2K scare and ends with yet another end-of-the-world doomsday prediction, 2012. Some things never change. But that isn’t the point of this blog post. We’ve just ended two decades of widespread public Internet usage. The Internet is one area that has been anything but stagnant over the last two decades. The Internet has experienced exponential changes these last twenty years. Going all the way back to the early ’90s, it’s obvious the Internet has come a long way…

The 1990s

The 90s began without much awareness of the Internet. The Internet was an elusive entity known only to the military, university researchers, and uber-geeks. By the end of the 1990s the Internet was proliferating itself everywhere.

• 1990 – 1992
  Most people my age were just finishing up high school. The closest thing I had to an Internet was my Apple ][e and local bulletin boards. And my 9600 baud modem was considered fast! We played a lot of Zork and Hitchhiker’s Guide to the Galaxy from 5.25 inch floppy discs that made a lot of crunching noises inside the drive. I had a shirt that read “Don’t overload your computer, you might slip a disk!” Wow.
• 1993 – 1995
  What’s this e-mail thing? At the university I attended there were rumours you could talk to your friends via electronic correspondence. I had to convince my speech professor that I needed an e-mail address for research. I actually had to get a signature to get a shell account (which I still have, btw). E-mail and telnet access to the university servers opened up a whole new world. Not only did I discover the dingiest and dankest basements filled with dumb terminals, I found MUDs where I could meet up with colleagues at the virtual pub, even when they were physically sitting right beside me. And when the basement computer labs were full I could always find a computer in the library with Gopher, whose infinite subdirectories yielded telnet links to the university servers if you were willing to dig deep enough. It was during these years I also got my first PC with a 14.4 baud modem, and shelled out $100 for 4 megabytes of RAM. Local ISPs began to offer dialup service. The local bulletin board was replaced by IRC while modem speed increased to 28.8 baud. And a basic SLIP/PPP connection could be set up to browse the web. Netscape Navigator was about to be unveiled, so in the meantime we used a browser called SlipKnot. I built my first web page for a local surf club.
• 1996-1999
  These years were noted by an exponential growth in the public’s awareness of the Internet. Services like CompuServe began to offer email (I remember them charging 25 cents per email!). AOL came on the scene, too, as a great way for computer illiterate parents to keep in touch with their kids as they ventured off to college and discovered the Internet and e-mail for the first time. By 1999 the Internet was maturing into the most newfangled technology since the television. Business were beginning to boom online and money was being thrown into the coffers of anyone with an inkling of an idea. Netscape Navigator was losing the war of the browsers to Internet Explorer as millions and millions of people were heading online. Local ISPs were still offering dialup service, but that was quickly being usurped by DSL. I dove headlong into HTML development and quickly discovered Javascript, which we used mostly to make images change on mouse over. CSS was a rumour that refused to materialize mostly because of our stubbornness as developers to abandon the <font> tag.

The New Millenium

After Y2K exited with nothing more than a whimper the world again focused it’s attention on the Internet. Maverick venture capitalists were still fueling the dot-com craze completely unaware of the roller coaster ride ahead. Nearing the end of the ride the new decade finds us more cautious but still willing to try out new ideas.

• 2000 – 2002
  We started Pelago in August of 2000. We designed and built web sites while pushing the available tools to their limits. We used Javascript to implement side scrolling on a web site and that was considered cutting edge. MySQL was still in its infancy and PERL was commonly used to build server side web-based applications but was quickly giving way to PHP, a viable alternative ideal for web developers used to working with markup languages. And then came the dot-bomb. We had only made it a year or two into the new millennium before online businesses began going belly up. Too much food had been thrown in the tank. Those businesses still in business treaded water while the economy recovered. On the tech front cable Internet became more accessible and was a perfect alternative for those of us whose homes and offices were too far from a nearby substation to receive DSL. The <font> tag was officially deprecated at some point and CSS quickly assumed the role for which it was intended. Web sites started getting a whole lot prettier.
• 2003 – 2006
  
  Although it was still early, web-based applications began to appear online. 37signals put themselves on the map with the eNormicom web site and quickly followed that up with Basecamp, a web-based project management application. The MVC framework peeked its head out from behind Ruby on Rails. It was in 2006 that Pelago built Intervals, a first-of-its-kind web-based project management application that combined time tracking and task management with a simplified approach to project management. Although many PHP frameworks were available and were evolving quite nicely, we decided to built our own lightweight MVC framework, called Archipelago, to handle the bare necessities that our web-based software would need to run efficiently. The term Ajax was coined and those web developers on the bleeding edge at Google began implementing it into Gmail and Google Maps. Meanwhile, broadband became the norm while web sites began to push the limits of streaming audio and video. Firefox came on the scene and was a substantial threat to Internet Explorer.
• 2007 – 2009
  The last three years are a punctuated collective of discontinuous flurries, that while partly to blame for the further reduction of the average attention span, have also introduced an entirely new vocabulary to popular culture. We google memes while we LOL. Viral videos are far more infectious than any real disease. And social media is here to stay, allowing us to facebook one another and tweet our random ramblings to whomever may be listening. The lightweight MVC framework has fully matured, becoming available for all web-based programming languages and allowing developers to churn out applications with incredible ease. As a result, new web-based apps are appearing on the scene weekly covering every business need from simple co-worker communications to complex business management processes. On the browser front Firefox has gained a strong foothold in the market due to its speed, reliability and custom add-ons. Both Firefox and Internet Explorer have been taken full advantage of by web-based application developers using Ajax to keep their interfaces persistent and more desktop-like in their usability.

What’s next?

The next decade will be an interesting one, no doubt. We’ve learned far too much from the last twenty years (or have we?) to let the next ten get away from us. What’s going to happen next? I have some predictions…

• SEO
  As the online marketplace becomes more crowded SEO is going to be the quickest and easiest way to differentiate companies in search results. It takes a long time to create genuine content that results in high organic rankings, so instead businesses will be utilizing more PPC methods to drive traffic to their site. However, Google always has and always will place a premium on content so new businesses will also have to focus on keeping their web sites intriguing, indexable and up-to-date.
• Natural Selection
  The lightweight framework has resulted in a lot of new web-based applications. Mainly because it is so easy to throw an app together and toss it online to see if it sticks. However, there is a lot more to offering a web-based application than just building it. In this new decade we’ll see the marketplace drown out smaller offerings as businesses evolve and crave more comprehensive online software. We’ll also see marketing play an important role in determining which applications stay online. Web-based applications will have to be continuously optimized to keep up with the demand for more desktop-like applications with fewer page reloads and less wait times.
• The Pervasive Cloud
  Despite all this talk about computing in the cloud there are still a lot of small businesses hesitant to trust their data to an online application. This adoption barrier is waning and will continue to in the next few years until the cloud becomes as common as the desktop computer. Along with this influx of online customers will come a greater responsibility for Software as a Service companies. Data integrity, backups, and the ability to restore from a backup in the event of an outage will become most important. Businesses using the cloud will become less patient with even the shortest outages. Geo-redundancy will become essential for any Software as a Service provider hoping to grow its customer base.
• The Browser War
  
  The browser war will continue much like it has. Firefox will usurp Internet Explorer just like the latter did to Netscape Navigator. Once Firefox assumes the throne it will likely become weighed down with too many features (this is already happening) and a faster browser will take its place. Most likely that will be Google Chrome.

One More Thing…

I’m sure I’ve left something out, like the fact that my first computer was actually a TRS 80 that used cassette tapes to store data. Fill in the timeline. Let me know what is missing and what you think is yet to come.

This week we launched support for the iCal format from the Intervals calendar page. Intervals users can now export the current calendar view to the iCal format simply by clicking on the iCal icon in the upper right corner of the screen. This will only export what is currently displayed on the calendar allowing users to customize which data they would like to export to other calendering programs. Users can now get their Intervals tasks, milestones and notes into Google Calendar or iCalendar on the Mac. In fact, any calendar program that has support for the iCal format should import Intervals data.