My idea for a final was to tackle something I never see online. Circle Navigation. Everything I come across online is the typical nav bar that is boring to say the least.

My original idea was to have a spinning circle that rotates based on where you are on the site, but needing to use everything we learned in my JavaScript class in the final I switched to have different sections load when clicked on.

Well after much work I have a working version of my circle navigation. It’s based on jQuery.

There is a working link to my jquery circle navigation site. Check it out and let me know what you think. I am needing to get it done in the next week. Why am I always putting this shit off until the last minute?

I was reading ‘A list Apart‘ and discovered a true gem of an article called Orbital Content by Cameron Koczon. Cameron talks about content in the web today and the shift of content from being rooted into pages and discovered laptops and computers and being consumed by tablets and digital portable devices through users.

An example of this shift would be your Facebook wall. Instead of all that content which is dear to you being spattered throughout the web, its all conveniently located in one section and tied to your user account. The shift is not complete because your wall only holds links to this content. In the future this will be different.

Be the center of your content

Imagine your facebook wall, but bigger. Now imagine the links to the articles are gone, but the full article lives there instead. Don’t copy a link to that image you found moving to click back to later, just copy that entire image. Your personalized content will be centralized to you. This is the future that Cameron sees and I agree. This way you can library and consume content in your own fashion. Thats the movement of content on the web.

Content, Copyright, Compensation

The 3 killer C’s of the web. If your holding someone elses content, yet you didn’t produce the content, is that not some sort of copyright violation? Cameron brings this up in his article. In the end he concludes that it is all about compensation:

It is a question that belies a concern about something slightly different: compensation. If publishers were compensated $10 every time content was shared and $1 every time it was read on their site, they would do everything in their power to get their content shared. Copying is not the problem—compensation is.

-Cameron Koczon

After reading this the first thing that popped into my mind is Spotify. The latest and greatest for music lovers. They completely reworked the compensation model for streaming content and holy hell its paying off for them. If your not familiar with Spotify you can find out more at the Spotify Wikipedia page.

Conclusion

Overall I agree strongly with Cameron and his views on the liberation and shifting of content that will be the future of the web. So when your content is shared through some new-age app to be consumed on a different platform, don’t hate it. Embrace it.

The article is called “Dark Patterns: Deception vs Honesty in UI Design“. It’s about deceptive tactics used by websites to either get information, solicit and/or auto-sign you up for premium services.

Many of the sites I build aren’t geared towards converting readers into profit. For some strange reason all of my sites are the opposite, just good ol’ fashion free information.

Don’t Click the Download Button!

The article reminds me of my early days on the interweb, it could have been I was a web rookie or maybe I have just become cynical over the years, but have you ever been to a website that your trying to download a file and you see a big download button right where you’d expect one to be. Only after you click on it do you realize it was just an ad for some useless website. Deceptive!

In the article Harry gives examples of different levels of deception in UI design. There is white – straight up honest. There is black – completely deceptive. Everything else is gray. He also touches on some psychological points on where we as end users get taken advantage of:

• “We don’t read pages. We scan them” —Steve Krug
• “People tend to stick to the defaults” —Jakob Nielsen
• “People will do things that they see other people are doing” —Robert Cialdini

It is a fact that I scan websites. Besides, nothing is better than picking up some great information in just a few seconds. The ‘white’ side of UI design will make things obvious in headings and font that stands out. The ‘dark’ side will bury the facts in WOT’s (wall of text).

I can’t say I stick to defaults anymore. I learned after my first 2-3 email accounts to start scrutinizing the check-boxes a bit better. I knew I was never popular enough to be receiving 20 emails a day anyhow.

Would you like fees with that?

One of the most interesting parts of Dark Patterns was something that hit very close to me. The DAMNED fees that come with certain web checkout processes. The article states that most of these fees do not give disclosure until the checkout process and that the fees are so minimal that users end up paying them rather than finding another site and going through the checkout process again.

End the Deception

Overall I enjoyed the article and the information is very informative when it comes to UI design and ways to avoid deception. Make sure when your in the checkout to see if any fees are added, watch out for lack of important information and be weary of those check boxes!

-Maynard

2 weeks ago I was only focusing on my school work. Since that time I have had 3 projects come in. 2 websites as well as a complete identity design for a friends restaurant.

One project I am excited about is my good past time friend Ethan Law has requested a site update. He is a performing artist with many disciplenes ranging from acrobats to break dancing. Should be able to get some nice creative juices flowing.

I am close to completing one of my projects for a Professional Image Production company known as Best and Delicious. The name is a little odd indeed but the man who runs the company knows his shit. I thought I’d show you all the prototype that he’s agreed on so now its time to get coding. I plan on writing a PSD -> HTML on this so keep an eye out for that coming soon.

If you need a website or know someone who needs a website. Hit me up.

-Maynard Out

The best part of being a designer and having entrepreneurial friends is helping them define and achieve their own dreams and goals. My friend approached me and has many needs for my skills now. He needs a logo designed, a website designed as well as a menu designed. It’s a bit intimidating to tackle all of these while I attend university studies as well as working full time, I guess my late night video game habits will have to go on hold for a while. (My wife will be stoked)

The Design Brief

The name of his restaurant is Three Forks and they will be in the Jewish Community Center near downtown Salt Lake. The name originates from a river that has 3 forks in it. They will start as a cafe with some side catering for events held at the center, but wish to grow into multiple restaurants throughout the Sale Lake valley.

Three forks needs a logo that is modern and fresh. They are looking for a true identity design that defines them. That is where we will continue with Part 2 of the Go Fork Yourself series. I am going to send them a design questionnaire and start researching some of the competitors as well as quick sketches of any ideas that may pop into my head.

Three Forks’ Competition

First thing is first, run a google search for Cafe’s in SLC. As you can see, the competition is STACKED.

I’ll leave you folks here and continue with Part 2, where we will dive into the logo and the design process of the logo, but I leave you with a question that will help me with the design process.

What are the first symbols, words or ideas that come to your mind when you hear the 3 Forks Cafe? Do you like the number 3 forks or the word Three Forks?

A websites’ mission

Brad starts off describing that creativity is different when put into context, so for his sake of web design he says creativity is defined by producing something useful and in the end explains that people generally visit websites because they are trying to accomplish a task. Its the designers job to find out what those are before starting, this will make the most useful site for the users. All of this I strongly agree with and was a focusing point of my current Web Design class I am taking at the university. We talk about it more as a website’s strategy.

Brad continues with the psychology to make people do something. He doesn’t explain too much besides making a site likeable and social proof. He doesn’t explain much more here and left me wanting a bit more.

Finally Brad concludes his article talking about Neuro Science Marketing that says poor user experience can cause stress on websites and that you should ditch the fancy stuff that may be confusing. In other words keep it simple.

Conclusion: Don’t me make think!

Overall this article this article resembles much of the information I have received from my university studies regarding User Experience. First of build a strategy for your users to come to the website and accomplish the task they came to your site for in the first place. Fancy widgets and overly complex applications on the site will cause stress and return users are not as likely. Most of all, as Steve Krug says: DON’T MAKE ME THINK. The tasks that your site accomplishes should be straight forward and available with ease.

For more information great information on Web Design advice are some links for your reading pleasure:

• 7 Key Secrets to a Successful Website
• How to Up Your Game as a Web Designer

Project Sketch 1

This first one was just something I cam up with not looking at competitors or trying to use specific design elements like the golden mean or rule of thirds. I was thinking a slider/rotator image on the main page that would let you select the 3 product this site will offer.

Project Sketch 2

On this design I was going with a ‘golden mean’ design. I am not sure I am liking how sidebars work out with the dimensions of the golden mean, but with some tweaking I could see it working well.

Project 3 Sketches

On this particular design I was looking at a site that caught my eye from Designbombs.com. I took it in a slightly different direction.

Recently I read The Expert Mind, a nice little article for my current Digital Media degree, that backed up this theory of becoming a true ‘master’. In the article, written by Philip E. Ross, he talks mainly of chess players and their journey to becoming chess Grand-Masters. It is here he brings up the ‘10-year rule’, which states that it takes approximately a decade of heavy labor to master any field. And its not through mere effortless playing, but wanting to grow and wanting to improve. Philip gives an example of casual golf with your friends. Your knew so you learn to play, but once you reach the same level of skill that your friends are at, there is no real motivation to continue the learning.

Success Breeds Success

Another interesting point from the article is the fact that success is usually followed by more success. The article talks about children, who by chance are born at a certain time a year. The way soccer leagues are setup typically is by age. So certain children have the size and agility advantage compared to others in the league. They get more chances to score and are ‘better’ players and they are more likely to take there skills to the next level and play in collegiate sports and possibly the pros.

So can I truly be a master at anything?

I find this article to be well written and true. I believe that through hard work and wanting to improve you can truly become a master of anything. Saying that I think would be hard to devote so much time in today’s world. Most of us are out there working our 9 to 5’s, raising children, commuting to here from there. But what if becoming a master just happens because its part of your job? That is what I imagine happens to most experts in their respected fields. They were challenged enough to ‘push the envelope’ in their learning. Web designers who spend 10,000 hours over the course of years taking on new challenges from different clients could easily become masters.

Final Thoughts: Don’t believe in the current idea of ‘Jack of all trades, master of none.’ Just realize the path is long and only with perseverance can you become a true master.

For some ideas of how to become a master, check out How to Master Anything.

Most designers have a storm of ideas floating around their creative brains. Recently my freelance work has slowed down so it has given me the opportunity to work on a few personal projects that’s having been on the back burners for a while, stewing in my creative juices.

One of those personal projects just got pumped to the front of the range and it’s a photography website, based around a photoblog. There are a few reasons I wanted to start a new photoblog (had an old one, but the backend was crap) and I plan on turning this into more than just a photoblog, but a resource that fellow photography enthusiasts can come to learn as well as share some experiences. I have a few other creative minds that are going to be collaborating on this (including a few professional photographers), but I will inform you more on my idea behind this new website at a later date when it’s more matured.

(sorry for the terrible pictures, my SLR was stolen and my new 7D hasn’t shown up yet, so I resorted to the old point and shoot.)

Get your rough ideas down on paper!

So we have this idea in the old mind crockpot, first thing I like to do in my design process grab a pencil, pen or that half broken crayon that I never seem to throw away and start throwing down ideas. These ideas can be words, symbols, small sketches; really there are no rules here. Just let those creative ideas flow through your brain, down your hand and onto the paper, total this took me around 10 minutes.
In my case I wanted a clean and simple design that worked around one single large image. For instance one of my words that trickled down from the brain was B&W (black & white). I wanted to keep it B&W so the focus would remain on the single picture element. If you have studied design at all you realize that color draws the eye and in this case the only color I would ever want is in the photo being displayed.

I then started sketched a handful of quick thumbnails with elements I knew I wanted in my design. In this case I needed the main photo, very simple navigation, title of the picture, a link to view comments and photo exif data and finally the date of post.

Narrow that shit down!

After I had a handful of ideas lined up next to each other, I went through and circled elements I liked and crossed off elements I didn’t find appealing. I took those elements, drew bigger comps and now we are getting somewhere!

Finally I drew a large rough that had all my core ideas in it. As you can see these are not the god damn Mona Lisa of drawings. They are quick and to the point, they are only there for your brain to reference when you are taking your design into the computer.

Have you heard of the 960 grid system?

Now a quick few notes before I open Photoshop. There is a new “unspoken rule” in web design called the 960 grid system, brought to you by 960.gs. I won’t get into all the details about what 960 grid system is, you can read that here, but I will tell you that the 960 grid system is what I now base all of my web design from. It’s the unspoken standard for clean design, not to mention they have a shit load of templates that make the design process a whole lot easier. No more guessing about how wide to make a column or any of that shit.

I used the Photoshop template file I downloaded from their website to start from, so that’s why you will see all these columns and guide lines in my PSD. Here’s a screenshot of a blank template using the 12 column 960 grid.

Photoshop time!

I open up my 960.gs template and go to work. I drop one of my photos in the document and drag it to the appropriate size on the grid. Can you imagine how long I would have tweaked the image before the 960 grid system before I was happy? That’s where this grid saves your ass time; you can thank me later or at the bottom of the page.

From here it’s pretty straight forward, I work from my sketches and bring those elements into my Photoshop mockup; tweaking where I feel necessary until I am happy with my design. Since this design is based around simplicity I am keeping the amount of elements to a minimum and since most of my work was done on paper I am able to get my design done in no time!

Finally, here is my almost-complete Photoshop mockup: (critique me in the comments; I am always down for some other’s ideas on my designs, good or bad)

As you can tell if you really scrutinize it’s not 100% complete, I need to finalize the identity design of this new website, but I will be posting more on this soon enough.

Remember stoners…

• Your brain is your best tool, not Photoshop.
• Get your ideas to paper quickly (it’s not the god damn Mona Lisa).
• Decide what you like, what you do not.
• Do you have a system? (960.gs)
• Reference your sketches to quickly produce in digital format.

Like the design, don’t like it? What are your thoughts on the 960 grid system? Leave comments and critiques below!

ANTS in my scanner > a five years time-lapse! from françois vautier on Vimeo.

This guy put an ant colony in his scanner and scanned it once a week for 5 years!