Exciting… for me at least. There are quite a few things that need to be fixed (like all the pages and the sidebar) but having it “broken-ish” and live definitely lends me the motivation to fix it quick-like.
Please let me know what you think!
One of the most challenging and interesting parts of what I do is bridging the gap between potentially confusing technology and people who are far removed from how it works. I think people intentionally avoid this massive gray area because of lack of patience, lack of interest, or inability (or no desire) to communicate properly. It can difficult to explain concepts like table-free design, search engine optimization, and digitizing art for print to people without the necessary experience. Despite that, it’s necessary for people who are promoting themselves or their business to understand these concepts on a basic level and realize how they can expland their work into new, expanding markets.
I’ve taught billing systems and wireless networking to customer service representatives, math and science to family members and classmates, and blogs and social networking to colleagues and clients. What I’ve found to be the hardest concept to get across to people is the proper way to design and implement a website. I’m not exaggerating; explaining standards-based, table-free, search-optimized design to people without any experience can be a painful process to all parties involved. Clients want to understand what they are paying for - explicitly - and the only way to make this happen is to explain why I do what I do and why they want me to keep doing it that way.
This post explains the very basic ins and outs of website design and why it can be such a pain in the butt. Are you confused why you were charged for three hours of time just to change a few words? Have you asked for what seemed like a simple change only to be met with a sizable estimate? In adding my two cents to the conversation, I hope to clear up issues like these for people who might be looking to understand the process a bit better.
While I’m relatively new to the discipline, I’ve been teaching people and promiting understanding since I first strapped on that inbound call center headset. Let me help you find the words to use so you and your client are on the same page. Use your knowledge, skill, and people skills together to show your clients exactly what you do and why you do it that way. The worst that could happen is you lose 15 minutes and gain some personal clarity.
I have always known this but it took an article at A List Apart, one of the most reputable voices in web design, standards, and usability, to really solidify this in my head. To quote the article (to avoid unnecessary paraphrasing):
Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
At the risk of flinging this topic from comprehensible to hopelessly high-concept, it is important to address the implicit abilities and obstacles of this very interesting medium.
Taking an idea for a website and moving it from concept to execution has an interesting middle step. This middle step, the one where you weight the benefits of making precisely what was visualized against the negatives of spending an inordinate amount of time building it, is something that designers are painfully familiar with but clients may not entirely grasp. It is quite simple to sketch an idea out on paper, somewhat difficult to translate this idea digitally, and very hard to build the exact product you had in mind to begin with. Maybe the technology does not exist, maybe you’re not sure how to build it, or maybe the idea was too complicated to begin with but, in the end, what is created never seems to exactly match what was conceptualized. Please keep in mind that there is nothing inherently wrong with this frequent occurrence.
There is another force at play here as well. In the end, even if you’ve created exactly what was on that bar napkin to being with, there is a chance (a good chance) that it just won’t look exactly how you thought or it simply functions poorly. It could be that all the artwork required to make the page look amazing makes the whole page load slowly. It could also be that the revolutionary way to navigate that you devised is not at all as intuitive as what you thought. Regardless of the reason, a perfectly executed concept does nothing to correct the errors that existed in the concept to begin with. While the “it just doesn’t look right” factor occurs in all segments of art and design, the “it doesn’t function properly” can only occur where interaction is happening.
Both of these factors work together to add unique facets to web design that threaten to destabilize the relationship between client and designer.
Clients
You don’t have to fully understand the internet and navigation and usability and optimization to understand why your designer tries to dissuade you from certain things. What you do need to understand is that your expertise in other fields does not translate directly to the web. Because something “looks” easy or “seems” easy does not actually make it easy to complete. Something as simple as content change or color change could require a lot of back-end work.
Designers
You know what you’re doing and you’re as honest as they come so it can be downright insulting when someone questions your judgement. Still, what would you think if a contracting firm kept coming back for more money and more time on a remodelling job? Would you keep handing over money, no questions asked, or would you try to understand what is going on so maybe you can make an executive decision? It’s your job to patiently and effectively explain where the time and money is going so your client can budget effectively and potentially cease problems that get out of hand.
Did I miss anything? What can clients do better to help designers understand the goal? What can designers do better to make the customer know the value their getting?
Amazing work… this iPhone photo looks like it was from 1932:
I meant to use this blog as a place to update information about my business and maybe some relevant personal stuff but I’m so boring that all I write about is work and coding! I’m a hoot! So, here’s what is going on with Josh Can Help.
Thanks to Preston Grubbs for a great deal and awesome customer communication. I’ll be giving him official props on here once my cards show up and he gets his website up. Needless to say, I’m very excited. If you’re interested in cards like mine, I can design them and get them printed for a great price.
One of my recent clients was chosen to appear in a featured artists section the magazine she was advertising in. I created her print ad for the magazine…
Could my ad have had a hand in her success? I’d like to think so but plausible is that she has a great talent with a niche artistic style and her paintings can’t help but to make you smile. Good job Elise Nicole!
I’m working on two projects, one of which I’m blogging about on here, the other is a site for my lab group. The theme for my redesign in progress is here if you’re interested in seeing how far it’s come (and how much further it has to go).
This one can be found here, though it is still a work in progress. I’m really excited about how it has turned out so far, particularly because the idea (a website that looks like a chemistry textbook) was a little bit out there. Using my minimal Photoshop skills and maximal creativity, I came up with a liquid layout that retains the look of a textbook. The design will look a little more true-to-form once the two columns below come together. The other thing contributing towards my excitement with this is the fact that I’ll be linked from a University which is kind of a big deal.
I just spent a few days researching and exploring the best practices for sending HTML emails. It’s a bit of a P.I.T.A. but once you know, it makes a bit more sense. Look forward to a big post on this.
On that same note, I was asked to do a live video training on building HTML emails next month. This is very exciting for me because I love training (particularly over the net) and I really wanted to spend some time perfecting my email-creating skills. It’s nice getting paid to do what you like to do!
In the meantime, here are some excellent references:
How To Code HTML Email Newsletters
Sitepoint gives a great break-down of how to create HTML emails that most people can read. It covers the necessary table layout, how to use CSS, best-practices, and information on Gmail (which, surprisingly, doesn’t support very much CSS at all).
HTML Email Tips for Web Designers
MailChimp (my new favorite little company) has a great blog that shows off interesting email campaigns and shares best practice information. The link above goes to an entry that gives some great tips for people coding emails. Also check out their template library for some free templates (they need a little bit of work, in my opinion but they’re free and work very well for the most part).
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
A bit dry but that’s to be expected from MSDN and Support pages from Microsoft. Incredibly useful as well, another characteristic of their pages. If you want to know what will and what won’t fly in Outlook, check this article out. If you stick to this, it would be hard to go wrong in other clients as well.
I got officially got older on Tuesday. No outbursts, drunken debauchery, or mental breakdowns. I think those come next year.
As internet connection speeds get faster and video file sizes get smaller, we’re seeing more and more on-screen training for products and processes that typically would only have a written manual (or nothing at all). This videos are an excellent way to learn a product, especially if you have trouble reading text on a screen or get bored easily. Additionally, videos provide another ‘visual’ layer for people who learn that way.
I recently had my first experience with Lynda.com watching some of their free videos on Illustrator. After watching only a couple of them, I was totally sold. I’m also in the process of making a series of videos showing people how to use a certain functionality of a software program I’m working on. Working with both the consumption end (watching) and production end (making), I’ve learned quite a bit about what works and what doesn’t when recording these on-screen videos. I’ve also learned that they are a lot harder to make than they look.
I want to share a few tips that a colleague and I came up with while making these videos. For reference, we’re using the Camtasia 5 software to record and edit the videos. While it isn’t perfect, there isn’t too much more to ask for and I’m not considering a different solution at the moment. Thanks to Mark Otis for a few of these ideas.
Video training is a great way to show complicated steps or describe potentially confusing theories. Video training, however, is not great for short, easy tasks. If I wanted to show someone how to recover a file from their recycle bin, it is easier to simply say “open the recylce bin, find the file, drag out of the recycle bin” than it is to make a video.
The point being that not everything lends itself to being taught in a video format. To make a successful video, be sure to think about it from the student’s perspective. Do they gain anything by seeing it on a screen? Are there complicated steps that work better shown than told? Even better, do these types of videos already exist out there? Before you start, it might be a good idea to run a quick Google or Youtube search for your subject matter.
Off-the-cuff demonstration is VERY difficult to pull off properly. By that I mean it’s pratically impossible to effective teach people without a guide to tell you what is next. Watch a presentation without a clear, concise outline or a script and you’ll notice that the presentation jumps around, misses topics, and ends up somewhat to extremely ineffective.
Even if the video is short, have precise steps to take on-screen available and print out or write down the points you want to make. It is FAR more important to have an effective video than it is to sound casual. Be clear beforehand what you will be showing and communicate that to the viewer within the first ten seconds. Stay on task, follow your outline, and err on the side of conciseness.
Take it from someone who spent over four hours just to come out with one six-minute video: test your equipment. It takes 5 or 10 minutes to record a piece, run through the steps, make sure all the necessary files are there, and watch a finished product. This will save you hours! Listen for puffs of air on your “Ps” and “Ts”and adjust the mic accordingly. Make sure that the finished product can be heard clearly and that there are no problems with your powerpoint or the demo software. Produce a video all the way to the end and watch the finished product. Sound problems are the most common issue with on-screen demos and can be very frustrating to someone watching the video. Witha bit of preparation, you can avoid headaches for yourself and your viewers.
Screen capture video programs let you modify the size of the capture window you are using so if you’re going to shrink the capture size down to a small size, then your resolution is not terribly important. If, however, you’re wanting to capture the entire screen (from, say, a Power Point presentation), you’ll want to modify the size of your screen display (the resolution). To change this in Windows XP, right click on your main desktop window, select Properties, then the Settings tab. Try 800 x 600 first and, if that’s too distracting, then try 1024 x 768. Remember that what it looks like on your screen is different from what it will look like once it is produced. Reducing the screen size will cut down on the raw video file size and make it easier for the program to shrink the size when it is finished.
Before you start recording, consider EVERYTHING. Is the window open, letting in a lot of noise? Is your IM turned off so you’re not interrupted? Is the background picture on your desktop distracting (or inappropriate)? How about the icons ON your desktop? Is your phone muted? Are there any pop-ups happening? A great way to avoid computer interruptions is to make a new login to your computer and remove everything off of the desktop. In Windows XP, go to Start > Control Panel > User Accounts and create a new user. Then, switch users by going to Start > Logoff and selecting Switch Users, then logging into the new account. Keep this second account “clean” by not installing or logging into any programs that cause interruptions.
Smashing Magazine just posted an article about screencasting yesterday… check it out.
Last time we left off, I had put together a structure of what I wanted my website to display and what it might look like. After about weeks of stressing out in Illustrator, I finally decided on a design I like.
Matt Jurman’s article, mentioned in the previous post, speaks to a high quality design and says that the following elements should be present for a design to be considered “high-quality:” balance, unity, emphasis, contrast, and rhythm.
Welcome to the new format of all of my blog posts (news items and quick ones not included). I’m worried that I might be struggling in a vacant gray area between the “knows” and the “know nots.” This blog is specifically for people who are just starting to explore what technology can do for them and their business. As such, I want to position everything that I write to face towards the novice, not the expert. I feel like a perpetual novice, always learning, and when I share that knowledge, I feel like I know it better in the end.
So, what does this article do for the novice? You’re either someone exploring web design for the first time, a web coder or developer who is trying to improve their design skills, or a complete web novice who wants to come up with a picture of what their business or personal site should look like. Whatever your situation, you want a web site that looks good, does what it should, and isn’t too hard to maintain. I strive as much as possible to build with those goals in mind.
This article walks through some basic aspects of design and shows you how I used them to create a picture of what my site will look like when it is finished. I used to this “design language” and “core elements” were just a bunch of fancy words people used to look smart. I was surprised when I actually took the time to understand them and practice them and found that my designs improved drastically. I want to help explain these concepts to you, show you how they work, and give a few resources where you can read even more.
Balance … the headings (like “Home,” “Hire Me,” etc. as well as “Contact” and “News & Information”), logo (”Josh Can Help”), light header text (the “tame your technology” at the top), and lion tamer icon all provide the “heavy” while the rest of the text provides the “light.” It’s the interaction and distribution of heavy and light that make appropriate balance.
Balance can be used in several different graphic design elements… Creative Curio explains
Unity … All my freelance-related elements (yellow text) are grouped together on the right and all of the blog content on the left. Also, navigation elements are together, blog sidebar functions are together, and the posts are formatted similarly to come together as one. Groups of objects allows for macro white-space and makes finding the information you need much easier.
A List Apart speaks about white space (excellent article)
Emphasis … The left sidebar is prominent and draws the eyes through the navigation down to the tamer icon at the bottom. On the right, the headlines grab the attention subtly. Though the emphasis in this final design is how I want it, it’s the flow from focus point to focus point that is the most difficult. You want to provide a bold visual element to attract a visitor’s attention and then lead their eyes through the elements you want them to see. I’m not sure if I’m doing that appropriately but it should not be too hard to fix ex post facto.
A good piece on focus and not “squandering a user’s attention” from iLearn
Contrast … There is the obvious contrast of the left sidebar with the white space on the right. There’s also contrast within the sidebar with the colored navigation items along with the logo at the top. In the white space to the right, the black text on white background is the ultimate contrast. I would like to use a bit more exciting colors but it seems like the more vibrant they become, the more I lose the already minimal vintage feeling the website has. I may need to play with this.
A List Apart (again) with a very in-depth look at contrast. It’s a lot to understand but important.
Rhythm … the blog posts are formatted similarly and the blog widgets on the right will have similar formatting between them. The navigation items also have a rhythm between them. I see visual rhythm in a similar way that I see unity. Each of the different elements should roll from one to the other within the group. As soon as the
>>> I had a little bit of fun with the colors without going overboard. As you can see, there aren’t a lot of colors and the ones that are there are not particularly bright. I’m a big fan of very colorful artwork but I save my own exploration of this for my graffiti. My audience and my potential customers are typically over thirty (possibly far over thitry) and probably wouldn’t have the best reaction to a busy, extravagant design. My own design style concentrates on typography, cleanliness, and simplicity and I think this page reflects that.
>>> One recurring theme you see on the site and in my business in general is the lion tamer silhouette. I really like this symbol and want to use it as one of the few shapes I’m using on the site. You can also see I’m playing with some of the vector decorations that frame my business card. These two elements lend a slightly vintage feeling to the design while keeping it from feeling stuffy.
>>> The emphasis is clearly on the information to the left of the screen. This is (in order) a description of the work I do, a summary of the work I’ve done, and a blurb about me and what I’m all about. The next element are the blog posts which are secondary to the information you need to hire me for your projects. Finally, if you’re interested in reading more on my blog, there is the typical sidebar with information, ads, and more widget fun.
+++ The description in the center might be different or look different. I don’t want it to compete with the “Josh Can Help” logo but it should draw the eye back up from the left sidebar.
+++ The left sidebar color may change. I’ve tried many different ones and I think I like the current one best but I’m not sure.
+++ The menu item descriptions may fall below the main text or appear when the mouse hovers over… not sure yet.
Complete and total destruction. I’m taking the default Wordpress theme, stripping it bare, and building back up into something wonderful. I’ll give an overview of what I’m doing and why but I don’t want to get into the nitty-gritty code details because it might be a bit too high-level (la-tee-da).
All written material is protected by Creative Commons
JoshCanHelp.com is proudly powered by WordPress. Theme designed by Josh Cunningham.