After a few drafts and quite a few sketches I've finally created a final design for the homepage of my thesis project. The goal is to create a site to use as a hub for all Kendall related videos that links to other sources to get more information.
I'm doing the design, branding, and development of this site. I figure this would be a great portfolio piece to show current & future employers that I can be given a complex task and reach a solution. While most likely I'll be working with teams it at least shows I can adapt and fill in whatever gaps I need to between myself and peers.
Colors
First, I wanted to really work with that teal color. I think it's a great color for the project in that it's visually rich, easy to work with and not too common to be over-used. It is a part of my school's branding so it does relate to the school.
Layout
The layout may not be anything mind-blowing new or innovative but that isn't a limit of my ability but the result of a decision to put the needs of our users above the value of my craft. I went through a few bad mockups and many bad sketches trying to think of a fun, creative way to express the content. But eventually my better senses kicked in: People are not going to use the site like vimeo. They will not be watching video after video, there are really two use cases:
Someone just looking at what is new with the school and recent events. These people may just view 3-5 videos before going elsewhere.
Someone looking for something very specific. These people may just want one specific video dealing with a presentation, a student's work, a class video, etc... so their pattern will be checking to see if it's on the top of the page within immediate reach or if they need to search for it.
So in that regard I felt making it look consistent with a 2012 website would be a good way to make sure the site is familiar to the broadest range of users possible.
Video Layout
The hardest part of the project so far has been putting my ego aside to try and come up with a presentation that really facilitates how it really gets used and not trying to make anything to show off my knowledge of the craft. So for the videos I came up with the idea of just letting them exist in rows. Each row can scroll left and right kind of like the Netflix site but by actually moving that area and not just the content in it. Also it will be moved by just moving the mouse or swiping with a mobile device. Second, upon scrolling to the bottom or all the way to the right more content sections will load. This way the whole site can be quickly browsed from the homepage if the user wants to do that.
Technology
The site will be written in PHP be creating a custom CMS module for my PHP MVC Framework I developed on the Comics Bulletin site. It's been built with the things that I like from Ruby on Rails and Django which has been a great learning experience on how those systems are built themselves.
I found a way to be useful to my design classes for once since, well, I'm not a very good designer playing designer at a design school. I'm working on it but still there is a huge gap between me and most the other students. Anyway, in my Type III class we're working on a collaborative installation at a local coffee shop called Rowsters.
We each had to come up with an idea and pitch it to the rest of the class the one I came up with offered little value and would have taken a long time. So we're going with another student's that is much stronger in message and easier to produce. We're going to setup 3 flags on pulleys and there will be a word at the top, bottom, and on the flag. When a flag is raised or lowered it creates a new sentence by the 3 flags or the 6 words not covered by flags.
Anyway I thought it would be cool to make a interactive version of this to help us visualize it and along with helping the rest of the class brainstorm good words to really push the concept as far as we can take it.
To build this I'm venturing into relatively new territory working with node.js, MongoDB, and the Express framework.
Anyway I just finished planning the development resources needed to complete the project. Glad to find it's not that complicated :D
MVC Structure
I've posted my MVC Module Table which is what I've used to determine what is needed to build the system.
Models
The models handle the data, for instance a WordSet model would represent a single row in the database that contains the 9 words, the user's IP address, the time of creation of that set of words, and the status.
Views
Luckily there's only one view which is the image attached, the homepage and main interface. Express.js uses Jade for templates which is more or less node's HAML which I've gained experience with using SASS. It's clean, well organized, and easy to read.
Controllers
Controllers control the application behavior in response to events. For instance when the user hits the save set button it will send a post request to the WordSet controller that will sanitize them and add them into the database then send a response to the browser for it to interpret like the set to add to the user's list of available sets and the words they can use.
I expect this project to be challenging but not impossible. Luckily I do have some contacts familiar with some of those technologies so if it looks like it's not getting done by Tuesday I can inquire their help. The digital design that I made is strong enough where I think it could mean something having someone's name in the credits.
Here's the finished mockup for exploration divers. It's a diving website for my boss at Aetkinz I'm also working on in a class of mine. The goal is to really make a fun diving experience that really makes the site and content fun, of course the key is making really good content so that's been a big part of it so far.
Within the past three years we've witnessed an explosion of design community sites dedicated to posting shots of your work for public critique. To make sure they get the best of people they tend to be invite only. Out of nothing more than pure luck I did happen to get such an invitation to Dribbble and Forrst and have been relatively active for the past year or so.
The Good
On the good side of such services we get an instant view into the trends/direction of the industry. A place to expand our perspective of the digital world and the limitless creative potential held within, along with an opportunity to improve your skills by peer review and self motivation. But does the good outweigh the bad?
Instant Industry Insight
One really nice advantage to being included in those kinds of digital design communities allows is the ability to see at a glance where the industry is. What's hot? What technique are appearing multiple times? What colors are being used? How are layouts formed? All of which can give you insight for how to start approaching your clients and what kinds of work you want to show them.
Constant Inspiration
The most obvious advantage to these kinds of communities is that it's very easy to find some design work that inspires you. I know before I approach a design I like to see how other designers have tackled the project. You get a nice bag of all styles usually including minimalism, realism, simple & clean, dark & dirty, and you will eventually see that the possibilities are limitless out there! But at the same time I think it's important to find inspiration from places behind other digital interfaces and website designs. Ever look at intricate detail on a watch? The colors in undersea coral? Take a look around!
Peer-powered Improvement
Most the sites out there allow comments. By posting your work there you have a chance to have your design reviewed by other professional designers. Obviously this can work out great when they challenge your design by questioning the reasons behind your design. This often either reinforces your confidence in your design work, or causes you to think about it another way. Either way you can't loose.
The Bad
While design communities like Forrst and Dribbble can help a designer improve and find more inspiration, they can also create some bad habits in designers. They can cause to think to aesthetically than focusing on our content, influence us to design for the designer crowd over our actual audience. Lastly, it can negatively impact our self-worth if we put too much value into it.
Thinking Too Aesthetically
After posting my designs at these communities the feedback I get can often do more harm then good. When a designer tries to think of the design through the eyes and mind of the audience, the context I'm making it, and the resources available I get some very valid feedback that really applies to the problem I'm trying to solve. Sometimes it's in a suggestion that reaches the audience better than I originally had. Other times they find a weakness my design will have communicating a certain idea.
Then there's the bad kind of feedback. The "this should be green and not blue" kind of feedback. This is the type of feedback you'll find the most and I think this is what damages the integrity of design. Design is a planned solution to a specific problem. So when a person suggests you just change something without a reason, the value you had from making your designs has just diminished. "Because it looks cool" is not a valid design reason.
Loosing Touch With Your Audience
I found after a while posting at forrst that I was beginning to start designing for the people at forrst and not my audience. I was making design decisions expecting to get a stronger reaction from the people browsing forrst over the actual user base likely browsing my site.
Am I Really That Terrible?
One of the most painful parts of first joining these communities is when you post your absolute best design you've made after years of work and you get no feedback on it. I think it's at this point many start thinking they're just not good enough. I've definitely felt that way at first. I found sometimes I need to take a break from these communities and just go for it in my work so I make sure I develop my own decision making capabilities without having to run it through the crowd. Second, when you do get feedback and followers you need to remind yourself that they are just designers. They may like your work, but that doesn't mean it's good or bad. They just like it.
So now it's up to you how to decide how to take these design communities and make them work for you. If you need an invite, feel free to ask just have your portfolio ready.
Another contact of mine requested some help in building a navigation system that had the background color slide up on hover. So I wrote this little CSS3 example to create it.
It's always fun seeing how fast you can put things like that together.
Ok, so, where to begin? Ah! The client. The client wanted to try something different with their site which is applying a russian constructivist theme which is sort of like Shepard Fairey's work but more like the original style made way back when.
I'm working on this site under the company I co-own called Xugo Studios, LLC with my business partner Steve Gallant.
The issue they had with the current design is that it was a bit sterile. There was system, structure but no expression. The design works but it doesn't respect the content, mainly it's value to the users. So our goal is to make a design that creates a personality from which their users can identify with but not over-power the content
So without further ado:
Design Breakdown
Now I want to discuss some of the thought process & decisions that I made to get to that result. I want to do this with some future projects as I feel the story behind them never get told. While the work should hopefully stand on it's own I think context for design decisions are pretty interesting.
Colors
Red, black, grey, and white. Classy colors. Red is an energetic color so I wanted to find a shade that had that sense of russian constructivism in which it needs to be both powerful but stable.
The Logo
The client requested we more or less use the same logo. I was fine with that as it was a pretty interesting logo. Uses a nice condensed typeface and visually resembles the name & content in an identifiable way.
However, the logo on their original design was a bit unwieldy and having two versions one short and one long kind of hurt in the long run since the audience that sees one version may not recognize the other, which is sort of the whole point of a brand. Having said that, I though their shorter logo was certainly usable and offered a nice single-logo solution to use through out the site. I did however add in some type to the right of it the reason I did this was to really make it clear that this is ComicsBulletin, I want that to be one of the first things both users & search engines see.
The typeface will be described in a following section.
Grid
If you take a look at their current design pictured above, the content doesn't have a very strong flow to it. You sort of move up & down and left & right to the sidebar and back then down again and well, not something you want to do with your users. If all they can do is scroll down to see more content it's more likely they will scroll down to do so.
So to really create a nice visual flow to the content sections I used a 16 column 960 grid, this limits the width of elements to be equal to anywhere between 1 and 16. Because there's such a limit it forces me to use the available horizontal space more intelligently than when having the freedom to size and place things anywhere.
Additionally, I also used a baseline grid so everything is aligned vertically up and down the mockup by intervals of 20px. Applying grids to a design really helps all the visual elements work together in both a subconsciously-enjoyable and mathematical way.
Hierarchy
This is one of the most fundamental pieces of quality design work. You need to organize elements via importance to guide the user through the site. So with this titles are large and red, body text is black and smaller, while interactive elements are also red.
I find using 14px as my base font is generally a good body-text size. It makes it easier to read from a distance along with allowing me to make secondary content 12px which is still pretty comfortable to read. At least given the demographic.
Layout
For the layout I was originally planning on including a sidebar but as I looked at the original content on the site and critically examined the current ComicsBulletin site, I felt a sidebar just wouldn't make anything better. I questioned why the content in their current sidebar really needed to be on the side of the main content? It doesn't really compliment it, and keeping it makes it unclear how a user is supposed to "read" the site.
I thought about the sidebar content and realized there shouldn't be any harm in placing it at the bottom of the site. The reason is the content in there is mostly useful for current users. People who are already familiar with CB and have already been to the site before. Thus the main content is above it and is the first thing a new user will see.
Then there's the matter of the main content. I found it could be divided into two sections, top content, which is content individually selected to really put ComicBulletin's best foot forward. I felt this was a wise decision on the current management's part as it allows them to really give new users a great way to get familiar with the best their site has to offer.
The second type of content is more or less everything else. I asked the client what their most popular content was in which they responded with their columns. Since CB handles many different mediums besides comics they created columns, small groups of people to handle covering certain mediums. Anyway, I felt the best way to handle the secondary content was to create a tab-bar for the users to use. This way they're only looking at the content they want and with that there's less decisions to make. Find a section you like, find an article you like. For power users that really prefer column articles, reviews, or want to quickly see the popular articles they can really just get them.
I was also planning on including some client-side JavaScript to remember the tab that the user last clicked so it can load that when they return. To do this I can use the HTML5 Local Storage module to very easily store a JavaScript variable that contains the last selected tab.
Another advantage to using the tab-bar for the secondary content is that I can address each type of content differently based on how the user consumes it. In other words I'm not bound to design the review article layout on the homepage like the popular articles, nor the column articles and therefore breathe more life into the design.
You'll notice a place on the mockup between the header and the main content with the aforementioned red color. This is to be used in place of a rotator. I have nothing against rotators but at the same time I don't know if that's the best option anymore. They were amazing when they were new but since they're on so many sites users eventually assume they're easy to get and they become normal. A user no longer reacts to seeing them as they have become quite common.
However the biggest reason for not using a rotator is that I don't think it's the best way to handle the content. Who wants to wait around for a single article to be displayed? Especially with the target demographic which is younger, tech-savvy people. They're not just going to be sitting on the site for a while playing around, they're going to be listening to music or watching videos and quickly browsing the site to catch up on the latest geek-happenings or checking out a thread for new comments that either responded to their comments or more comments to respond to. Either way, they're busy people. Therefore I wanted to come up with a completely new system for those top 4 selected articles that still has some flair with animation and effects but isn't time based, you can select any of the articles at anytime, whenever you want. This way the content is more accessible while still being visually interesting for the user to interact with. Plus a nice challenge for me as both a designer & programmer.
As for the footer I wanted to keep it straight forward. I wanted to list all the columns since they were the most popular sections of the site and include some more links to connect with the team and the main pages for when a user makes it all the way to the bottom and hasn't found anything they wanted to check out yet.
Type
Type is quite a big deal to me. I love typography, it's amazing how even the most subtle of differences between the tracking, or the space between letters, can have quite a big impact on the reader's reaction to the content. Almost as if how you say your message is as equal in importance to what you're saying ;)
So for this site I wanted a font that really nails that russian constructivism like stylization which is a heavier, squarer font that is severely geometric as opposed to organic. Enter Molot! A commercially-free font that is web-embeddable. This really adds a nice touch of personality to the design while still supporting the site's use and creating extra value in their content.
I think this about covers it and sometime next week I will be covering the mobile mockup and a week after that the tablet mockup.
Current ComicsBulletin Website
I can't stress enough that this design I did not produce, design, direct or control in anyway. This is their original design.
If you've noticed on my blog I've heavily increased my font size for body copy & titles. It's not that making it bigger makes it more important, that is absolutely not the case. However making it larger than my secondary information does emphasize it's importance more along with increasing the readability comfort.
I only wanted between 12-15 words per line so I just kept playing with the font sizes until I got around there. Since the web offers pretty limited type controls I tend not to sweat it so much.
Though it is interesting that I've never thought to try that before. I feel as though since 12px font sizes were used on every website that was the "standard" but lately I've been questioning things like that. 12px isn't bad by any means but it's not always best. I usually use around 14px via the ems measurement. Thus my secondary information gets to be 12px which is still comfortable to read.
However on my blog a few designers I know mentioned that my initial blog design was sort of hard on the eyes with so many words and the negative type (white text on black backgrounds). My first attempt to fix it was to reduce the size of the content area for blog posts, this worked but then it created an unpleasantly large gap between the sidebar and body content. So that's when I realized I could just increase the font size and it will make it infinitely easier to read on any platform plus maximizing the readability by having a decent amount of words per line.
Anyway I suppose this article is a bit dull. So I'm saying the takeaway from this is that just because you see something commonly used in a design in any medium, doesn't mean you should just accept it. Question "Why?" is it common. For instance when thinking about the font size I realized the reason why most sites use 12px is that it's the smallest font size that's still pleasant to read which allows them to cram more content on screen. I am not concerned with that therefore there's no reason for me to follow that norm.
This is a sketch I made before working on the mockup for a site called ComicsBulletin which is an upcoming client of ours at Xugo Studios, LLC. along with my business partner Stephen Gallant.
Anyway as I said in my previous sketch article that starting with sketches before HTML code or graphics means you're thinking conceptually at the end-user level and not the components it's made out of.
In this case I focused on just how I wanted to layout information and how I wanted it to look & feel. Depending how this goes I may also post the mockup at a later date. A mockup which I'm quite proud of.
Ok, so maybe previous articles and other stuff out there kind of abstractly talk about "good" design in terms of goals. However today I am presenting an metaphor I think we can all relate to.
Good Web Design is like Riding an Elevator
So lets think about this. Why do you use an elevator? We use them to get to places typically within the building we're on that are other than where we are now. Why use it? There's something we want on another floor whether it's something we want like another store or something we need from the place we're at. Sure they can also be used to just check out what's around as well, no harm in that.
When thinking about your destination is the elevator on your mind? Not really right? Exactly how a well designed website should be. You don't want it creating a bunch of visual noise that suffocates your content. You want people to be able to instantly make use of it to obtain the content they want while making sure the journey was pleasant enough for them to come back.
How People Use an Elevator
How does an elevator work? Well I'm not going to go into the specifics of how an elevator works but from a user perspective, the people who will be paying money at your stores or in our case using your site, their perspective is that you press a button an elevator comes to your floor. You wait a bit, enter it, then press the button to go to the desired floor and it goes there while picking up people along the way who pushed the button on their floor.
Strong Elevator Experience
Strong user experience for an elevator relies on the buttons being easy to find. The elevator being quick but not too quick, along with it being a smooth ride plus some sort of lighting (kids used to take out the lightbulbs in the elevators at my apartment, it was like riding in a coffin which was entertaining but still a bit off putting).
What a strong user experience doesn't need is someone welcoming them into the elevator, music, especially "elevator music", buttons that don't indicate where you're going, mechanical panels to reveal the buttons upon entering, nor security key fob scanners or card scanners. While those security measures are tolerable they're annoying.
Elevators are like Websites
Now back to websites. Websites are much the same way. Who wants to wait forever to get information you're looking for? Even on entertainment websites on Facebook it's important that you can use them to quickly find information on your friends so you can go back to what you're doing or share your next moment when the time comes. You're not waiting for the Facebook theme-song to play, animated buttons to load the content in box-by-box, everything that's there helps you use Facebook. Even the background color white is there to provide good contrast against black text which is generally the more preferred type colors based on readability.
Sure there are exceptions when more of an "experience" is needed to better sell the content. However I do challenge when they are needed, for instance: game sites. There was a game that came out a few years ago called "Nier" and wanting to learn more I went to their website: http://www.niergame.com/ the problem is I NEVER LEARNED what the game is about. Never found any gameplay footage or anything interesting, just sounds and animation and color that didn't help me get anywhere so you know what I did? I left. I haven't been there since just now and I never even played the game, I just didn't care anymore by that point.
So like any iSucker I jumped on the Chance to get iOS Lion as soon as I could on my Mac Book Pro. While I don't regret getting some of the functional changes like Mission Control and Air Drop, the visual design direction in the software is quite lacking.
While this is a very cliche statement it's still unforgivingly important: Content is King
Which is what Apple has seemed to forgotten when it comes to software design for their macs. My proof is in the pudding just looking at the aesthetic forced upon this digital abortion known as Address Book:
Think about this: An address book is a fine format for the information in real life because you're breaking a long list of seemingly random, but organized data into pages bound by a book. You can flip to any page, look through it by letter, page number, name, phone number, whatever...
However digitally that is not how that information works for my contacts. First, any contact can have an infinite number of data associated with them. This means making a fixed height window to load a scrollable listing of all the data is a really poor way to go about structuring the app.
Second, forcing my list of contact's names into the small left-hand book-page styled window made them far more inaccessible than the real thing. I can't store position, if I have a lot of contacts in a specific letter then I can't go to another name in another letter and come back to that. If there were an actual book that wouldn't be an issue because there's just a page number I can go back to.
Third, limited organization. The aesthetic they chose to match their iOS apps means a big lack in the organizational options. Since it's digital and the data is separated from the visual style of the app, I should be able to have more say in which names get displayed and how they're organized since the data is being pulled from a database. For instance maybe divide my contacts between people, businesses, friends, and family. Since contacts can already store a bunch of key values you would think I could have more than just a business/person option.
Apple needs to really consider how people use their contacts and their related information and then design the app to best suit those needs. Not creating a "realistic" address book background and cramming all information into it.
Another app I think apple really missed out on being able to really work with is their iCal app which is the OS X calendar. The older version from pre OS X Lion I used a lot! It was a nice quick way to schedule my meetings and project due dates. In the Lion version they really did two things:
1.) Just arbitrarily changed the aesthetic. The dressings of the app are different. This is the only visual difference. Oh and less information that was useful is displayed. Subjectively it's a really unpleasant design aiming for visual realism on what looks like an old, over-priced calendar from the 1920s.
I miss having a sidebar that would let me instantly know what calendar I was viewing and wouldn't require me to wait for the calendar popup to load so I know which one I'm on which is what plagues the experience with this new OS X Lion iCal.
2.) Made it harder to use. This really ticks me off, IT DOES LESS! You see less information on your events, it's less clear which calendar you're using or working on, it has less options for interfacing with other services & software. There's absolute no consistency in anything!
So again this software would greatly benefit by Apple doing research on how people use or rather, would like to use calendar software and redesign it to suit those needs. Maybe it doesn't need to look like an actual calendar! Start with that? When one writes down an event in a calendar what are they really doing? They're not just marking down descriptive words in a numbered square that represents a day of the month, no! They are preparing for an event, they need to know the time, the place, and when they need to act upon it.
