Final Blog Post: Up and Running

It is the end of the semester, and for my final blog post, I will be sharing with you my greatest creation this semester.

Josh and I have have worked painstakingly hard on this project, as the ultimate goal is to not only get a good grade, but to impress his mother-in-law to the point where she decides to use this website for real.

Hopefully, our final project, a business site for Rudy's Bar is as enjoyable for you to view and navigate as it was for us to create it.

Thanks for making me feel old, Bryan.

Things I Did: Events Page

The great thing I have noticed about web design, is once you build one page, you've essentially built the subpages. Using a combination of div's from the home page, the gallery page, and the contact page, I was able to whip together the events page in seconds. Here are some screenshots, with elements you'll recognize from the other pages.

Feeling pretty good, now we just need to make a few finishing touches before we make it live!

Things I Did: Contact Page

This will be a short post, as the Contact Page is simply information on how to contact Rudy's and it's location.  All it required was a quick iframe from Google Maps, nothing too fancy.

Coming along nicely, hoping the interlinking pages and then combining my work and my partners on ArtWeb will be the biggest challenges.

To be continued...

Things I Did: Photos Page

Besides helping create the overall design of our site, I am doing three of the sub pages, the first of which is the photo gallery showcasing different things within Rudy's. I have only missed a single class so far this semester, and that was the day we learned how to use FancyBox. So with a quick tutorial from Bryan, I was able to implement fancy box into three different galleries on our photos page within the main site. Below are photos of work I did.

Above is how I linked the html document to the JavaScript files needed in order for FancyBox to function.

The two above shots are quick teasers of the Photos page. You'll see it in it's full glory once the entire site us up and running.

To be continued...

It Stars Part 2 aka Chuck Sucks at PhotoShop

Been an interesting semester, to say the least. I am not, and possibly will never be comfortable working on a Mac. I'll always put in the effort. One thing I did not expect, was to suck so terribly at using Photoshop.

Because the supplier of the food for the bar hasn't got back to us with stock photos of the menu items, we decided to grab our own from the internet, and edit the size/quality for our gallery and menu page.

Unfortunately...Photoshop doesn't like me, so I have decided to do the gallery work from home on my PC.

Here is me failing at Photoshop.

To be continued...

It Starts Part 1...

The construction of our final web page has begun, and I plan on giving you in progress looks at what we've got so far.

And so far...it's not much. I'll openly admit I am much more comfortable using HTML than CSS, but we are making a conscious effort to use CSS for the majority of this page build. We've run into a few snags, but nothing that will hold us up too long, or prevent us from making a functional and pleasant site.

Here are a couple of screengrabs from the creation of the launch page.

Pretty slick, right? Again...our goal is to not only get an A, but have the owner of Rudy's Bar make our website LIVE.

To Be Continued...

Concept Designs for Final Project

Hey, everyone! I'm an IDIOT. My final project partner Josh and I, designed a concept map at least two weeks ago, and I never posted them!

I am not going to lie, I have somewhat impressed myself with my ability to come through in this course while using a Mac. Today is the first time I have completely screwed up. If I miss out on an A because of a late assignment (and the elusive 4.0 I have been going for) I am definitely going to consider gouging my eyes out.

As shown in my most recent blog post or design will be pretty simple, but will look really, really cool.

We are taking a couple ideas from Kopp's Frozen Custard as far as page layout, but everything else we do will be pretty original. I'm excited, I think it's going to look cool, and I am ready to get started.

Here are some sketches of our ideas. If you think this looks messy, be thankful I wasn't the one to actually draw it.

Awesome, right? I know, totally. Here is the kicker...we are actually going to get the finished product hosted and use it as the REAL, LIVE website for Rudy's Bar in Racine.

Final Project Nav Map

Time to unleash the hounds on my Final Project! Teaming up with Josh again to do a website for the bar he works at, Rudy's down in Racine. Currently, Rudy's only has a Facebook Page and a link to it's menu on All Menu's. We hope to create lively, informative, and well designed webpage that hopefully the owner likes and decides to make live.

Here is our Nav Map for this project:

Stay tuned.

Finished Product

It's been an interesting few weeks, starting this project, going through the design phase, and eventually creating a website for people to peruse.

So without further ado, here is the webpage I created with Brooke Simonson and Josh DuBois.

Top 10 MKE Restaurants

Almost Done...

In addition to the HOME, TOP 10, and ABOUT US pages of our website, we had to fill the Top 10 with 10 different pages. So we split up after creating a template to follow and completed a section of the 10 on our own. I completed #4 thru #7. Was not very difficult to get done, just a copy and past of the iframe embed from Google Maps for each restaurant, and writing a small paragraph describing the place. Here are some screenshots for your perusal.

Next step is to go through all the pages and make sure the paragraphs are up to par with spelling and grammar. Don't want to make a live website abusing the English language!

Getting There...

We had our in-class critique taking a look at what we had so far in our websites. It was pointed out that our external links didn't open up a new tab or window, which obviously takes our visitors away from the site we want them to view. So I went and did a quick fix on my About Us page. Here is a screenshot of the HTML I changed.

The target="_blank" opens a new tab when you click the hyperlink, allowing the site visitor to view the new information in a new tab, and still have access to the current page on our site with having to press back...which is annoying.

I have a feeling this will be used a lot on our top 10 pages.

Fixed!

With the help of the extremely talented Brooke Simonson I was able to make the changes needed using CSS.

I wanted the font describing each site collaborator to be more noticeable, and I wanted the links to each blog to make the styling of our webpage.

As you can see from the screenshot of my update, it was quite successful.

Midterm In-Progress: About Us

I was tasked with creating the webpage that linked to our blogs, but also gave a sliver of information about us.

It was a little time consuming, but I think it is coming along fine.

Having a few issues with getting the font size to change, tried using an HTMl command, didn't work. Tried a CSS command, didn't work. So I just saved my spot until Tuesday when I can ask my partners or Bryan for assistance. 

Here are a couple screenshots for you to enjoy.

 

 

 

As you can see, the font that gives a little bit of information about us is very small, as is the link to our blogs. Hopefully I'll figure it out during our next session, and move on to creating pages for each restaurant.

Navigation Map and Sketches

For our group Midterm project, Brooke, Josh and I have decided to create a webpage about the top 10 restaurants in the local Milwaukee area. The site will consist of a homepage, a page with the list of the 10 restaurants that links to more in-depth info about each place, and some information about the website creators (us!)

Here are some sketches of the page design and our Navigation Map.

Stay tuned for more posts as I try not to mess this up.

The Good, The Bad, and The Ugly Part II

 - structural properties
        - usability (ease of use)
        - navigation (three questions)
                - where am I now?
                - where can I go from here?
                - how to I go back to the previous page/section?
        - bugs and/or inefficiencies
            - slow load times?
            - "un-presented" media?
            - plug-ins without alternate versions?

            - does it run in at least three different browsers? (i.e. Firefox, Chrome, Safari, Internet Explorer, etc)

Konditer Klass, translated to Confectioner Class, is a sharply designed webpage that not only is pleasant to look at, but is easily navigated.

The homepage consists of a menu at the top of the screen, which does not disappear as you navigate deeper into the website. Using Google Chrome, it is extremely easy to translate the page from Russian to English, as shown below.

There are also ways to translate using Firefox or Safari, but Chrome has the easiest method.

By simply scrolling, you can see more information about Confectioner Class on each subsequent page.

Scrolling up takes you back to the main title page, but notice how the menu does not disappear at all, regardless of where you navigate.

I did not notice any slow load times on any of the browsers, and the website displayed similarly in each of the three.

Our site that we deemed needed some work, Motrec, for the most part has a very functional and easy to navigate webpage. It does require a flash plugin, as the home screen shuffles different things at you as the viewer.

The good: menu stays with you as you navigate deeper within the website. 

The bad: this website is just plain boring. The color scheme, the choice of photos, everything is boring. Add some spice to it to go with it's good quality of functionality, it would be much more enjoyable to navigate.

Let's take a look at Ramon's Critique of the conceptual properties of each of the websites.

The Good, The Bad, and The Ugly

Before I start my journey building websites, our professor thought it wold be a great idea to find websites we thought were designed nicely, and a website we thought could use some work.

These pages could and should inspire us to make equally robust webpages once we reach that point.

As for me, I'm still figuring out how to use a Mac, and it is not going well.

As far as research for these websites, we were limited to using the AWWWards Nominees. 

Choice #1 for me was Konditer Klass

This Russian website sells mainly toys, confectionery items, and groceries. In order to hold my attention, a website must pop, and Konditer Klass does so. Each subsequent page is a different color, with a different them. The ease of navigation is also a big help, simply scrolling up or down changes the category of the items you look at.

Choice #2 was Ultra Design Agency

This website, based out of the United States, can design an imaginative logo, website, or brand your company in an imaginative way. This page caught my eye because of it's modern feel without being too techy, if that makes sense. There are queues from one page to the next that give you more information regarding their services, which eventually leads you to leaving your contact information. It's simple to navigate, and easy on the eyes, exactly what I am looking for.

Now, these webpages were great, but I did find one that wasn't so great.

This is Public Courses, a website hosted in the United States that gives you a quick, easy way to find public golf courses. Great idea, but how is this any different from using Google? A quick Google search would give me the same results, and the same locations. Nothing really differentiates this site, and makes it worth going to over typing in what you need in a Google search. Good idea, but not creatively different than something that already works just fine.

Inspired By Design: Blog Post #1

The blog that caught my eye and inspired me was "The World we Live in" on Tumblr. This blog posts photos showing everything from the bright lights of our cities, to the quiet beauty of lonely beaches. Sometimes, the images provide links to where the photos come from; for example the beach shot below is from a National Geographic post about travel.

 I chose the work of this specific blog because I enjoy traveling and seeing new things in the world. I've been to lots of places and seen lots of things, but I am still in awe by both the natural beauty of our planet, and the things man can create.

The World We Live In