Art/Life/Etc
…at least it is on this site.
The scope of this site extends far beyond just web design. Design, after all, transcends just the internet.
I’ve got an art project coming up, it may be major, it may be minor, but the wheels are in motion to make it happen. It will be documented here. I plan to get this project in motion by this weekend. I just have to get a printing brayer and ink..
This project may be related to the upcoming Deacon Design 101 as well.
At lunch me and my coworkers often entertain ourselves by reading through various magazines. This week, Real Simple Magazine is sitting in the lunch room.
At the end of the magazine they had a perforated, detachable cheat sheet that summarized some of the content of the magazine. The sheet itself was perforated so you could separate it into even small, wallet sized sections. One section had a recipe, one had information about a bottle of wine spotlighted in the magazine, one had information about makeup, etc.
I was astounded at this.
This simple, detacheable card was the most useful part of the magazine. This card allows anyone to take the information with them, and easily try out or implement the information in the magazine.
Brilliant design.
This got me to think about how, with design, you make something more useable and useful. I have a few things I want to implement along these lines, such as popout articles, instructions, references and the like. There is a lot more, but I think the overall key to this is to think about how the end user of your product, site, or thingy will actually use what you are providing them.
The best web sites accomplish just the right amount of stuff.
Bad web sites often try to do too much, or too little, and become hard to use.
What does your website attempt to do?
I thought about this while reading this article on design at User Interface Engineering. The summary of the article is that good design is invisible. We don’t notice when something works well, we only notice when something works poorly.
The example the article uses is Netflix as an example. The design is so good that you don’t even notice the design, things just work well, and it is easy to use.
Netflix is able to have such a good design because it does something simple, and specific. It allows the user to rent movies.
Netflix users know that Netflix actually does a whole lot more than just let you rent movies. You can watch movies on your computer, review movies, network with friends, get movie recommendations, etc. All of these features are hidden to the new user, and slowly get revealed. The design does not overwhelm the user with all of these features at once. If they did, the site probably would not be as successful.
The best, easiest to use websites are clear about their purpose, and are designed to promote that purpose. Extra features are revealed slowly.
Websites that display everything available on the site become hard to use and inaccessible. I have been to many websites that I know contain plenty of information I am interested in, but the design is so poor, that it is hard to navigate, and hard to find. I am not sure what feature of the site contains the information I want.
I give up on these types of sites pretty quickly now, because I don’t have time to figure out how the convoluted organization works.
When I design a website, I determine what the primary purpose of the site is, and design the site to promote that function. Other functions may be available, and I incorporate them into the design in a way so that they are slowly revealed to the user.
Knowing the primary purpose of your site, designing the site to promote that purpose, and making the site easy to use will result in better websites.
There is a new link in my sidebar:
http://www.goldmansachs666.com/
Goldman Sachs is suing this blogger, citing trademark infringement. Use of a trademark in situations like this has stood up to the test of the law in the past, with “Walmart sucks” and “Disney sucks” websites.
The truly outrageous thing? How many billions dollars of your and my money has Goldman Sachs been given because they are “too big to fail”?
Way too much.
And this is how they spend it, by suing some guy that is acting within the law to criticize them and other banks.
I urge you to put a link in your sidebar to this site.
Fight the power!
Design thoughts:
I have spent a couple weekends working on the design of OnlyTheValiant.com. I want to put up a post describing and discussing the design issues and decisions that I faced.
This website is the home of a comic book discussion podcast. There are two goals of this website:
Many of the design decisions were the result of a discussion about this site at the last incubation weekend.
My design decisions were largely guided by the following guidelines:
The first decision I made concerned page width. When I browse the internet (or do anything else on my computers for that matter), I keep my windows at partial screen, not full screen. A wide site may not all be viewed by users like me. When I am using the entire width of the site for my “sales pitch” for the podcast, this is important. The flipside of this is that websites that are too narrow can look unprofessional, thanks to all of the crap that huge companies put out on the internet.
I started with 45 ems (720 px), but this seemed too narrow to me. I kept increasing the width until I finally settled on 54 ems (864 px). This felt like a good balance between not feeling too narrow (and unprofessional) and being visible in the browser window.
I decided that the front page would be different from the rest of the site in order to highlight the newest podcast episode. I want any user to quickly understand that the point of this website is the podcast, and make it easy for the user to listen to the show right away.
OTV Front Page
I decided on a color scheme of a gray background with red accents. The red was chosen because of the color scheme of the art that was used (the beautiful cover to Rai #1 by David Lapham). The gray was chosen by matching the middle gray color used in many browsers. The attempted effect was to visually push the background back. My hope is that this makes the things that I draw attention to stand out even more.
I created the new podcast box and moved it up so that it overlaps the header and takes up two-thirds of the screen width. I gave it a thick double border and a white background in order to make it seem that it is on top of the other content.
The yellow box in the top left of this new podcast box is meant to draw the eye to this box because of its bright color. I want the contents of this box to be the first thing that the user actually reads. It also evokes a comic book panel, which traditionally has a small caption box at the top.
I included the date of the podcast release in this yellow box. This is reminiscent of Valiant Comics specifically, which would often give the date in that box. I also want people to know that the episode is recent, and that the site is active, not a forgotten internet relic. It felt important to give the date the episode was released, but I felt that it would detract from the flow of the contents if it was in the white box, so this seemed a good solution to me.
The contents of the new podcast box are meant for ease of viewing and flow. The intended flow is a spark of interest from the title, further interest created by the bullet points, then action performed to listen to or download the episode. I tried to enhance everything that created this flow, and eliminate items that distracted from this flow.
The title of the podcast episode is the second largest text on the site, and due to the contrast, the most prominent. I left out the episode number in this title because I thought that it distracts from the title.
The bullet point text automatically alternates between regular and italics to make them easier to read. If the viewer gets to the bullet points, I want them to sell the viewer on listening to the episode.
This leads to the action portion of the box, and I prominently give the user two choices: listen with the built in audio player or download the file to their computer. I also include a few links to discussion sites, and list the file length, so that the viewer knows exactly what they are getting.
The links at the bottom of the new episode box attempt to answer three questions, which I think would be the three common questions a user might have after reading this box:
The intended purpose of the sidebar on this front page is twofold:
In the sidebar I included four buttons. I made these a bold red to match the color of the header. I want these to be the second most important feature for users to see, after the new episode box on the right. Three of these buttons let the user subscribe in one way or another, directly addressing the second goal of the site. The fourth button, a link to past episodes, is there to aid returning users, who may very quickly want to jump to this location. It also lets new users know that there is more than just the contents of this front page.
After the buttons, I have recent announcements listed. I opted to not put a header of “Announcements:” over these items, because a viewer should be able to determine that by the nature of the content. I put a lighter red behind each announcement title, to make them less prominent. The reason I chose to include these at all is that I want a new viewer to get the impression that this is an active site with stuff going on. I hope that this makes for a more engaging, compelling website.
I put the navigation menu at the bottom of the front page so that it is available to users, but does not detract from the rest of the content. This menu is at the top of the rest of the pages of the site to aid navigation and usability.
For pages other than the front page, I returned to a more traditional layout with a header, navigation menu, sidebar, and content area. Once people have clicked into the site from the main page, I believe users have invested a little into the site, and ease of use becomes more important than forcing the user’s eye to the content.
OTV Secondary Page Example
I kept subscription information prominently placed as the first sidebar item, staying focused on the goal. I also included other stuff such as links to related websites to give users who click around the site more to see.
I may add more content to the website, with information about podcasting and Valiant comics, so that it becomes a location people people can click around and waste time. When I do this, the pages will be added as sidebar links.
I kept the content area as clean as possible, and only used the left line to connect a block of content with the title above it. This felt necessary, because without that line, each item in a list seemed to blend with the next. The placement and layout of these lists of episodes or announcements could use some fine tuning, but I haven’t decided yet what will be best. One thing I want to avoid is design for the sake of design.
On my to do list of things to add are:
There is room to add to this site, the possibilities for added features include a forum, newsletter signup and archive of past newsletters, contests, and galleries.
This was a fun site to build!
The shortest distance from point A to point B is a straight line:
Straight Line!
The longest distance from point A to point B is a never-ending circle around point B:
Not so straight...
Why do we end up going in circles around point B when we should go straight to it?
Let me explain.
Often time I find myself, and I see others, not moving straight forward toward their goal. We end up doing other stuff that makes us move laterally to our goal, without making any real progress.
Examples:
I have been guilty of all of these at some point or another.
I see it a lot in the “dating advice” world, men do stuff to get “better with women” that has absolutely nothing to do with actually meeting a woman. If you are great with women, but you aren’t meeting any women, are you really great with women?
If you are planning out your diet, are you really losing weight? If you are building a commercial website, are you really making money?
I am in a group of like-minded entrepreneurs, but is what I am doing actually accomplishing anything? I have been spending most of my stirfry time (free time to work on my personal projects) on OTV.
I enjoy OTV, it feels good to do it, and I am learning about web design, syndication, podcasting, entertainment, and other things that could eventually be applied to projects that will make me money, but they aren’t right now.
From an entrepreneurial sense, I am moving no closer to point B from point A, though I am doing a whole lot of stuff. I am shuffling around, working on this and that, but am not any closer to point B in any way that matters.
Point B, by the way, is making enough money to thrive from active and passive internet sources.
I spent stirfry weekend focusing on website design, and have been spending what tiny amount of free time I have had since then (about 5 minutes) looking into this as well.
I am going in a circle.
I like design, it feels good to learn about design, and I would like to make money from design. Thus, I tell myself that this is a valuable thing to learn. The truth is, though, that if I ever do make money from design, I won’t be making money because of knowledge I have, but because I market and sell a skill I have.
Chances are I have other skills I could be selling to people RIGHT NOW.
I’m just not doing that.
It feels good to be doing something, and it is easy for me to tell myself that this thing I am doing is part of the bigger picture of getting from point A to point B.
But it’s not.
An orbit is not a straight line.
Everyone pulls up everyone by the bootstraps.
That was a theme of the Stirfry Startup incubation last weekend.
Stirfry Start Ups is a group of like minded individuals working to develop various projects, web-based and not, as a vehicle for success. While our individual projects vary from building a collaborative work space, selling information on the internet, lifestyle commentary, a yoga business, comic books and podcasting, etc, we all seem to enjoy building something that is our own, and seeing where we can take it.
Rowena hosted this weekend at her beautiful place on the hill above Dolores Park. In attendence were myself, Rowena, Dave, Walter, Sarah, and Ben.
I worked on my OnlyTheValiant website for my Valiant Comics podcast. I recently scrapped the old site and reinstalled a new site, based on WordPress instead of Drupal, which is what the old site was built with. WordPress is now the only CMS I use for sites.
One of the most fun, and helpful, portions of the weekend was when we took turns in the “hotseat”, and put our website up on a big monitor for everybody to critique. Questions came up about what the intended use of the site is, how to design the site to facilitate that intended use, how to convey quickly what the site is about, and how to make sites more readable and present better.
I received a lot of comments on OnlyTheValiant.com, and was able to create a pen and paper markup of how I want the site to look. If you look at the site now, it is functional and presentable. I got a lot of comments on how to emphasize what needs to be emphasized, and how to lay out the site to accomplish the goal for the website, which is to get people to listen and subscribe to the podcast.
I have a very clear idea of what changes will be made in the future, and in another week or two, I believe the site will be much better.
I also realized this weekend that I thoroughly enjoy thinking about, discussing, and implementing website design. It was as helpful and rewarding to offer advice and comments to others as it was to receive them.
This leads to the second major result of this weekend, the idea of the groupstrap. Stirfry startups is essentially a groupstrap idea. Instead of each of us pulling ourselves up by our boot straps, we pull each other up by each other’s bootstraps.
This is an interesting concept, and we saw this in practice over the weekend. Each of us has some relative expertise on something within the group, and we can share that with each other. In this way, each of us benefits from the abilities of each other, resulting in better ventures for all of us. It is mutual sharing, it is community as a service, and it works.
This post has been moved over to the Journal at Bad Deacon Design.
In preparation for this weekend’s incubation, I created this outline of how WordPress is structured. WordPress is Stirfry’s CMS of choice because it is simple, flexible, and highly customizeable.
I, and many other Stirfryers, are firm believers that form and content are closely related. Understanding how WordPress works, and how a WordPress site can be structured will help to create the vision for your site. What content you provide, and how you provide it, is intrinsically related to the structure and organization of the site.
With that in mind, this may help you to develop your own website.
BACKGROUND:
Basic WordPress, or WordPress straight out of the box:
Building Blocks of WordPress
Customizing WordPress