Category Archives: Web Design

Everything from xHTML to AJAX

Web 2.0 as a Guide

Over the past, I’d say, year and a half the term Web 2.0 has been thrown around an awful lot, but with no true definition it’s hard to peg the meaning of the word. For some its definition is a style (subtle gradients, shines, and beta tags), while for others it’s a term used simply to describe the change in technologies used on the web today (AJAX, Ruby on Rails, etc.). I personally see Web 2.0 as a guide more than anything.

While I don’t live or swear by it, I think many do. As a guide the term Web 2.0 gives us a vision of something more intricate, more advanced, yet easier to understand. It produces thoughts of products like Flickr or YouTube. With all of their features and technical intricacies they still remain two of the simplest tools on the web. Web 2.0 is the thought that design and the tools we use to communicate can be advanced and visually pleasing, yet simple at the same time.

This, to me, is the true meaning of the term Web 2.0. I realize I’ve just blabbered on about the most over talked about subject of the year, but with so many different definitions around I just had to throw my own opinion in.

Leave a comment

Filed under Design, Miscellany, Technology, web 2.0, Web Design

The Universal Zero Rule

It’s old, it’s been used a million times before, but I guarantee it’ll fix 99.9% of the margin and padding errors you’ll come across. The Universal Zero Rule is a very simple snippet of CSS that you can add to the beginning of your CSS document.

Many times when coding a page using CSS you’ll find that even though you’ve specified certain padding and margin values they may be off by a few pixels, mainly because each browser has it’s own default value, which it will add to the element. The UZR resets these values to zero so that you can define your own measurements without having to worry about browser interference.

Simply add it to the beginning of your CSS document and it should fix most of the problems you’ll come across without the need for hacks or other workarounds. Copy and paste and you’ll be all set. If you want you can even define and overwrite default browser colors, backgrounds, etc by adding other properties to the selector.


*{
  margin: 0;
  padding: 0;}

1 Comment

Filed under Design, Miscellany, Web Design

The 10-Step Design Process

Not every designer is the same; some begin designing a website by laying out the content, while others start in a fresh Photoshop document. Each has their own way of dealing with clients and each charges different rates. While it’s hard to say what you should charge, it’s rather easy to find a pattern and stick to it.

I personally begin in Photoshop, but there’s a lot that comes before that.

1. Initial Contact. Your initial meeting with your client is very important. It’s important that you pay close attention to the way the client speaks and presents his or herself. It’ll help you get a feel for what they’re trying to do with their website.

2. Planning. Before you begin any drafting you need to ask your client some essential questions concerning materials, payment, colors, logo, content, etc. Everything you need to know prior to doing any actual work should be gathered in this stage. It’s also a good idea to get a down payment to prevent the client from dropping out of the deal after you’ve done all your work. This money should also be used for materials like fonts, brushes, any outsourcing, etc. All contracts should be signed and even notarized in this stage.

3. Drafting. Based on the information you’ve gathered you should now begin drafting a sample website for the client. Start with a simple grid you’d like to follow and from there add colors, effects and any other specialties you’d like to add to give life to the design. Fill in any content areas with Lorem Ipsum text as well.

4. Variations and Client Approval. After you’ve created multiple variations of the same basic design present them to the client. To prevent ripping you may wish to watermark your images. At this point no coding should have been done. Once the design has been selected and approved you should discuss a final website launch and payment date, along with any other services you may offer. Now is a great time to tell your clients about copy writing if they haven’t already provided content, and telling them about Search Engine Optimization is very important. Make sure they know it is the key to the success of their website.

5. Coding. Now that you’ve gotten approval on the design it’s time to chop up the design and begin coding it in your favorite editor, preferably in CSS, but to each his own.

6. Presentation. Present the design once more to the client now that it’s been fully coded and see if they’d like any minor changes such as width, colors, etc. Make sure your launch date is finalized by this point.

7. Launch Preparation. Now that the website is complete make sure the server and all other components are ready, such as Content Management Systems, Flash Applications, JavaScript’s, etc. Also begin optimizing the website for search engines and get it listed on any design directories and news websites that will help with the promotion process.

8. Launch. Launch the website by removing the holder or teaser page on the date you agreed upon.

9. Payment. Shortly after the launch or on the same day you should receive final payment from the client. To get on their good side it may be a good idea to throw a tiny party for the website launch (if dealing with a large or medium sized company) or purchase a tiny gift like a cake (when dealing with small companies)

10. Gather References. As I’ve mentioned, it’s important that you gather any references or quotes now that the project is complete. Make sure you add all this to your portfolio.

Follow this simple set of steps from start to finish and you should be able to easily and effectively complete a website and deal with your clients too. Like I said, everyone has their own methods, but I find this way to be extremely easy to follow.

3 Comments

Filed under business, Design, Graphic Design, Media, Web Design

On Being Outsourced

I’ve recently begun doing web design work as an outsourced employee, meaning I’ve been getting paid to do only a portion of a job. In my case that job is web design. While it hasn’t fully kicked in I’ve been getting paid 15% on all web design projects I take on, but I only complete one part of the project.

My main worry is that I’m placing these designs in my portfolio, yet the final product isn’t always what I have displayed. My main function in this whole process is actually drafting the website in Photoshop. From there I pass it on to another person who then proceeds to code the website, usually in tables. This leads to my second worry, displaying work in my portfolio that reflects poorly on my own talents. I specifically work in CSS and xHTML, yet most of the websites I have been working on end up littered with tables, and I surely don’t want those types of websites in my portfolio. While the average web user may not notice the difference, or even care at all, it’s the peer attention I’ll receive that has me debating whether or not I should actually place this work in my portfolio.

My main question is, would you place this type of work in your portfolio? I mean, I’m the one designing the visual side of the page, should it really matter what the other designer does to it after the skin’s peeled back? Let me know what you think.

And in case you’re wondering, this all ties in with my whole summer reinvention goal I’ll be writing about soon. If you’re a member of my forums, chances are you’ve probably already heard about it, but I think it’s exciting all the same.

2 Comments

Filed under Design, Friends, Miscellany, Web Design

The Online Learning Curve

With the emergence of AJAX and similar web technologies we’ve been introduced to multiple new features that many users have never seen before except in Desktop Applications. Features line inline editing, drag and drop, and the ability to customize items without ever having to refresh. Up until now we’ve only ever seen these features in the desktop applications we know, love, and use on a daily basis.

While these technologies make using the web easier, and certainly more pleasing, the simplicity comes at a cost, a cost some may not be willing to pay. These technologies not only offer a new way of browsing, but also a new learning curve to explore. It is expected that the majority of internet users are not savvy enough to quickly adapt to inline editing and similar features, which makes building a website around these types of features extremely difficult, but there are a few ways to help break in new users.

Offer some sort of invitation. Style certain parts of the page, important parts, in a different color, or with a noticeable effect that will help attract users. Make sure they know exactly how the website works and how they can use it. Write an introduction post or a simple tutorial, perhaps a video for those who need extra help. Remember to write your guide in laymen’s terms as not to confuse the simpler browsers.

Tool tips or cursor changes are a great way to invite users into new features. When designing a website with these new, rich media technologies it’s important that they know how to use them right off the bat, or your concept and ideas will quickly fall through. While designing a page it’s easy to forget about the user and get lost in your own design fantasies, but you must remember that the user always comes first.

Leave a comment

Filed under Design, Technology, web 2.0, web apps, Web Design

Shutting Down

A brief explanation for my lack of posts. Basically, net access has been cut off at my home, so I’ll be unavailable until I go out and purchase a wireless card for my laptop. In other somewhat related news, I’ve been working at a brand new skate shop for the past 3 or so weeks, and will also be producing two websites plus print and web ads for the shop. Can you say free merch?

2 Comments

Filed under blog, Design, Elsewhere, Family, Microsoft, Miscellany, Technology, Web Design

Another Year, Another Reboot

Can you smell that? It's the smell of fresh pixels, of computers overclocking to keep up with all the memory Photoshop's using. Yes, today is May 1st, the day of a million reboots. For those of you thinking I'm on an acid trip, I'm not. I'm talking about the CSS Reboot and it's Flash Counterpart, the one that started it all.

While Textonic has been neglected for the second or third time in a row I did manage to do a miniature redesign of my portfolio, though the loss of PSD files prevented me from doing a complete overhaul. But you can see the progress here. IE users beware, the site is somewhat broken, and looks a whole lot better in Firefox or another similar browser. But don't worry, I'll be doing a complete redesign over the summer, maybe for the Fall CSS Reboot.

But other than my site a few reboots have really stuck out in my mind. One of those is the Random Shapes redesign, which I, unfortunately, had no part in this time around. Another brilliant site is that of MattBrett.com, what an amazing new look, and who says Pink doesn't look good anymore? Now if only Evan would launch his redesign so I can give him some crap about it. 

19 Comments

Filed under blog, Design, Elsewhere, Friends, Miscellany, web 2.0, Web Design