Edits and Moving forward. UX, UI, Web Design

So far I have been thinking simple, I've created some sketches.

home page based on site map.

About page based on site map

reservation page based on site map.

BRAKE SCREECH! STOP. So though these I feel are properly drawn. There has been a misstep here. Yes, these are laid out nicely, but I've moved away from thinking about the user. So far my "vision" was critiqued by Tony (the front end developer) and it's gone in the wrong direction. Things to think about, especially for a restaurant website, what is the most important thing a restaurant has? What is the key player in all of this? What does a user want to know first and foremost when checking out a restaurant website?! The menu! At first I was researching and gathering inspiration for multiple page layouts. I found fantastic examples, but the best decision and practice is to think about a one page layout. We are thinking simple, so really this is the most beneficial way to present this specific website.

Back to the drawing board, research, inspiration. I checked out the usual suspects, Google, Pinterest (check out my web inspiration board), and a glorious website OnePageLove which offered fantastic restaurant one page layout examples. A few to mention, Rosebud Kitchen, Pitch Bar and Eatery and The Bancroft, were definitely my favorites. I felt these websites were in the correct direction to move towards for the best user experience. 

Wireframe sketch based on new revelations.

I'm feeling this is simple, yet will translate well responsively, effectively using the one page format. Stay tuned for more details.

Thoughts: User Interface and User Experience

As a freelance graphic designer, I take a strict approach on projects that are predominately brand identity, advertising, or layout design. Though I have basic working knowledge of HTML and CSS, I haven't fully jumped into the web design world. More often then not I constantly see job listings that combine a graphic designer and a web designer but also the greater of demand of User Interface and User Experience designers. The time has come to expand my skill set towards UI/UX, which is incredibly daunting. I have many web developer friends who utilize my graphic design skills, but to constantly hear "developer speak" of functions and programs, how this is becoming useless and that is crap or this is moving towards this direction... angular, jquery, boot strap, It's a panic attack of "I have no idea what you are saying." 

I have been talking about expanding more towards the web for some time now... overwhelmed and behind is how I feel in this game. So many things... Where do I get started? What's the difference between user interface and user experience? How does one even present UI/UX in a portfolio to show a potential employer "hey I know what I'm doing"? 

A fantastic metaphor from a Usertesting.com guest post, Craig Morrison (founder of Usabilityhour.com)

"Why You Shouldn't Hire a UI/UX Designer" :

"If we’re talking about delicious cake (and why wouldn’t we be?), UI is the icing, the plates, the flavour, the utensils, and the presentation. UX is the reason we’re serving cake in the first place, and why people would rather eat it than hamburgers."

Of my research, this is the most succinct explanation I have come across. 

Now what?

Where do we go from here? 

Tony, one of my front end developer friend (check out his website and new one in progress), described user experience as a door and a doorknob. Why would a doorknob be located where it's located? Obviously, it wouldn't make sense for it to be placed at the top of the door where no one could reach. The door knob position helps the person (user) reach the end goal which is to open the door and go inside. 

He suggested a few exercises (I look forward to presenting in future blog posts). First, find user experience examples in everyday situations. Second, find websites to assess and critique, take notes, sketch and redesign. Third, we create a website for a fake restaurant we invented, I will be focusing on the user experience, user interface and design, he will focus on developing it.