Design.Usability.Standards

Final Project

The first thing I decided on for my final project was the colour scheme of black and gray. The reason I choose these two colours is because my favourite colours are black and silver and because the website is about me, I decided it would give the website a better feel. Another reason, and probably the more important is that I knew I wanted to have a photography album on my web site. From a photographers point of view, it is always best to surround  your coloured pictures with neutral colours such as black or white in order to create more constrast in the photos and to make the colours appear brighter. You also don’t have visual mixing occur which changes the colours in the photograph. This would lose some aspect of the the photo.

The thing that frustrated me the most with this project is I wanted to make things a lot more complicated than I actually knew how to do. I made it really simple, despite my desire to make it more than that. However, I think by building the website from scratch I was able to get a better understanding of how CSS works. When I did the lab assignments, I really didn’t get a feel for it like I did this way because it was all from scratch and not by adding css to an existing page.  I’ve already started building new website and recoding old ones with what I learned in this class.

The design aspect that I picked, as mentioned previously, is simple. My favourite thing is the drop down menu links because I have always wanted to learn how to do these without using javascript. I am very proud of the links and am glad I had the opportunity to use them.

One of the colour things that made me really proud with this website is in the photography section when I was able to create a seperate css file and create a three column layout without the help of any outside coding. I was able to code everything myself.

Posted on December 17th, 2008 by hummela2
Filed under: General | No Comments »

bonus blog!

I personally believe that the most important aspect of Web design answers this question first: does the form fit the function?

That being, does the layout, design and content of the site fit the users’ needs. This has to do with knowing your audience; to me, I don’t think that a single person who didn’t know his audience succeeded at Web design — or anything else, for that matter. Building good design and content with an eye of a user can be difficult; we’re (developers) quite partial to our ideas and not likely to budge. But if we can see functionality through the eyes of others, we’re bound to succeed.

In the end, we’re servants. Good design, content and infrastructure are very important as well; but if you don’t meet the demands of others in the first place, they’ll find others who will.

Posted on December 12th, 2008 by bishop35
Filed under: General | No Comments »

Post Mortem

When designing my site, I went through 3 revisions of my site, which itself was based on an earlier site I had created but was unsatisfied with. I created a bunch of content and adapted adapted old content for a new framework I wrote while in TC349.

I unfortunately did not have time to update 2 of the pages (the index and the Fisbury Park Mosque pages) as I the due date for this project changed last minute, and I was under the impression I had about 6 more hours to work on it. I even had the content partially written, but I’m unfortunately kind of a busy person and didn’t see that the timeframe had been moved up until about 2 hours before it was due, and the CSS still had some debugging to do.

I chose a blue color scheme because it’s both my favorite color and it’s generally easy on the eyes. I went with a pure CSS menu because I like to avoid Javascript when I can. I found some example code online (which is linked to in the comments in my CSS) that allowed for a pure-CSS menu that rendered correctly in most major browsers, including IE7. The site had a generator, but I decided to adapt the sample code so I could gain an understanding of how the menu system worked using only CSS.

I went with a horizontal navigation bar because I only had a few sections and a vertical sidar would have wasted a ton of screen real estate. The 1-column look with a header and footer lends to the ‘portfolio’ idea of the site.

I had a hard time deciding how to organize the video section of my website, so I opted for giving each its own page. I wasn’t a fan of how the menu popped up the 3rd layer to the side, but I couldn’t find a better way of positioning it in time, so I left it as-is.

Other than that I’m pretty happy with how the site turned out. There were several things I had planned on doing tonight, like further tightening up the menu code and completing the descriptions for my videos and updating the About Me and Home pages.

Posted on December 12th, 2008 by gaddygre
Filed under: General | No Comments »

Final Project Post Mortem

After finishing my website I must admit that I learned a lot these languages. It has been probably 5 years since I have attempted to make a full blown project (last time being sometime in highschool in a basic html class) and I spent a lot of my time in trial and error trying to get certain aspects of my site to work out the way I wanted it to.

As for the non-coding issues I had for my site, one big one for me was deciding on what colors to use for my site. I wanted to keep the site minimalist, and I did not want the actual structure of the site to detract from the content of the site. I ended up with a black background and white font on top of it just because I feel that it would make the site feel more relaxed and allow for the user to feel more leisurely when browsing the site. The border color I chose (I ended up using a triad color scheme and I used the kuler webtool to help me out) was the deep blood red because I felt it to be sublte enough to be almost ignored, but if you look at the site without the borders you can obviously tell that something is missing.

As for the navigation elements, I tried to follow the 3 rules outlined in the one article we read for class a while back - allowing the user to constantly know where he is, how he got there, and how he can get to where he wants to go. For a while I was trying to get a css only drop down menu by reading online. I was planning on using this for the “about” page of my site, but in the end my frustrations got the best of me and I had to use another method. The method I ended up landing on achieved my goal well enough. I was also able to, through the use of color, to change the color of the font of the link when  you are on that page signalling to the user where he is.

In terms of content for the site, this is where I probably spent most of my time. The images I used for my banenrs, the one that changes as to what page you are on, were taken from in game and I tried to capture images that correlated with solitude and loneness.

The main problem that I had was after I laid all the ground work for my site, I had a hard time filling in the content. I admit that I may not be the greatest writer, but I tried to make my writing web friendly by including headers to break up large blocks of text and breaking up the flow by including larger quotations and bolding certain aspects of the paragraphs.

Over all I feel that the website was able to achieve the goals I had set in mind for it. This is also a site that I feel I may be ab le to keep up with in the future, and may host it using the webspace MSU allocates to it’s students. One thing I may do to it is add a bloging section, most likely to either replace or in addition to the sites current home page. I would most likely blog about my time in Japan, in the near future, or about more elements that I find to be relevant to the content of the site.

Posted on December 12th, 2008 by fiebing1
Filed under: Final Project Post Mortem | No Comments »

Post mortem

msu.edu/~bishop35/

I laid out my Web site by first checking out multimedia sites like hulu.com and mediastorm.org. I then drew my layout on a single sheet of paper, mapping out divs and their attributes.

As far as content, I have had the chance to do an array of media, including video, audio, print and photography. When given this assignment, an online portfolio was logical.

As said in my previous final post, I was going for a very cinematic feel with mainly horizontal lines and a dark scheme. I included an image with vertical lines for my index page as a sort of balancing act to it all.

For my logo, it needed to be my name; but my name is very common. Since I have a unique middle name, I chose to use it. I gave it red to make it pop out more and for people to essentially remember me.

I debated a lot on the use of either images or an inline list for my top navigation bar. I ultimately chose to use images. I gave them their own divs and floated them to the left, which seem to work nicely.

Below the nav bar, I (barring my resume and index pages) have three divs: one for a description, one for the viewer and one for something else (I had an epiphany last night: create viewer nav buttons and put them there!). That will happen soon.

For audio, again, I used an open sourced player from http://www.macloo.com/examples/audio_player/. Once I figured out how to do the js for video, audio was a breeze. It fits very well with my overall visual metaphor: a sort of movie theatre.

For all images on the site, I thought about using tables with thumbnails, but decided to go with a much simpler design. When you click on photography, for example, it takes you to the first photo; from there, you can go forward; from those, you can go backward.

For movies, i used an open sourced, flash-based media player from http://www.longtailvideo.com/players/jw-flv-player/. It was my first time using java scripting, and it took a lot of trial and error, but I’m happy with the results.

Web typography is supposed to be easily read and clean; that’s why I chose Verdana, as it was made specifically for this purpose — and surprisingly, it’s quite fresh even now. I believe color has a lot to do with it; mostly, you just see Verdana black on while.

This has been the most frustrating, the most demanding, and the most enjoyable project I’ve done in a long, long time. Thanks for the opportunity.

Posted on December 12th, 2008 by bishop35
Filed under: General | No Comments »

Final Project Post

I think that it is really depressing to say, but I learned a lot about my own limitations in web design from this project as well as this class. I learned that I need a lot of work in learning aesthetics and also I need to learn more css tricks and html tricks. I found myself having to sell my site short in areas that shouldn’t have been sold short. I spent a lot of time creating tabs and rounded edges that don’t work to par and I had to settle for something I didn’t want because of time.

The hours I spent on this project told me how hard it is to actually design and 7 sleepless nights spent coding or trying to forget the seemingly doomsday deadline are a testament to how trying this project has been for me. To say that I don’t like to design for web, however, is completely wrong. I have found through this project that trials and errors and problem solving is something I like. I like it a lot.

My site turned out really well and I am happy with the result, even though I had to settle for things that weren’t my best. I feel like I am going to keep working with this site and make it better even though class is finished.

Posted on December 12th, 2008 by consta37
Filed under: General | No Comments »

Final Project-post mortem

This is the first time I used CSS to write the whole website. It was a really good learning experience, I did learn a lot. By doing this, I learned how to actually use different boxes as layout, and I even learned how to do rounded corner box. I originally thought I should use one rounded corner box as a background and put the text on top of the box. But I learned that I have to use 5 images to put the rounded corner box together. Four images are the corner edge images, and one is the center no corner rounded box. I also learned how to make the header picture and the body picture line up straight. I used to think it has something to do with my coding so background image and the header image are not line up. After I tried many times, I realized I have to adjust the image inside the photoshop, to move either left more or right more; so the images themselves can actually line up. Resizing the images were not hard, just a lot of work. Since the website are created with images and text, the images are really important, the first time I did really bad on resizing and made the resolution really bad, so I had to redo the whole thing again to make the quality better. All in all, I learned a lot in this project, and I think CSS does help a lot when it comes to web design.

Posted on December 12th, 2008 by tunghao
Filed under: Final Project Post Mortem | No Comments »

Hutch’s Bonus Blog

To me, the most important aspect of web design is knowing your users.  If your users are sophisticated web developers you had better spend a lot of time on the site design.  Even if the content is great, most will not even consider the site if it looks ugly and has a funky layout.  If your users are like the ones for my final project, they do not care about having drop shadows or rounded corners, they want the content and they want it to be navigable.  So, for my project I made it football themed and then got to the content and tried to give some in-depth analysis.

If your site is designed specifically for people with disabilities you will have to ensure that your site is completely friendly to them.  Every web site is driven by its users, and so to make your site it is most important to cater to their wants/needs versus spending too much time on something that is trivial to them.

Posted on December 12th, 2008 by Hutch
Filed under: bonus blog | No Comments »

Final Post Mortem

www.msu.edu/~bibbing2

My goal with this project was to have a well coded web portfolio to show off to potential employers. My choices were always between that, and creating a new mock-up website of a real estate site. In the end, since I was currently out looking for jobs in the Spring, I went with the portfolio. This will have been my first real non-WSYIWYG attempt at making a full site, and overall I’m happy with how it turned out.

This project went through two distinct phases (the first iteration is now part of the new portfolio!)  The first was a kind of “Rat Pack” Sinatra theme, with large golden spades, and a deck of cards on the backdrop, but it lost focus. I began questioning why certain elements existed, and if I had a purpose behind some of the choices, and in the end this new design emerged. Overall I like the theme of this new site much better. There are more individual page styles, but at the same time each of them lend something to the overall theme. This was not the case before.

Without a ton of content to work with, this allowed me to focus more on design choices, and solid code structure. The navigation I tried to keep simple and dependable. It is placed near the top of the page for accessibility with screen readers. The sub-navigation was something that came after, and will eventually become an accordion style drop-down menu.  The header and footer remain the same throughout.

I went with a greyscale color scheme. I had this in mind since the beginning, and it lent itself well for both the “Rat Pack” casino feel of the first site, and also the zen like theme of the second. My next site will definitely play around with more color.

The most significant thing I took away from this project was the importance of pre-production. Sometimes it can feel like you’re wasting time, or that you’d get more accomplished if you just roll up your sleeves and jump into the code. I found out the hard way that this is far from the case. Spending time with paper and pencil forces you to clarify some ambiguities that might still be in your design. Had I spent more time fleshing out my original idea on paper, I would not have had to make as many shoot from the hip decisions while knee-deep in code.

Overall, this is one of best learning experiences I’ve had. I’m not sure books or lecture can ever fully match hands on web-design practice. It’s just something you have to do and see for yourself. I’m much more fluent in XHTML and CSS than ever before, but with still so much to learn.

J_B_

Posted on December 12th, 2008 by bibbing2
Filed under: Final Project Post Mortem | No Comments »

Hutch’s Final Project Post Mortem

When trying come up with a design for the site I went through a few different variations. I first was just going to use the color wheel to go with three colors to make it so the design would work for most any type of site. I did this and looked at it and was not happy. I thought to myself, there is nothing about this that stands out or even makes me think that this is an NFL Draft website. So, I got a picture of a football and cropped it to include the threads and the NFL logo on it. I put this cropped picture in the header and I didn’t like just having the one picture. I tried repeating it and I liked how that looked. To me, having it repeat makes that fall into the background.

I do not like just having white on the outer edges beyond the content and having the background of the content white with no border. I tried doing background images that repeated on the x and the y axises. I had one that was a gradient green that I repeated along the y axis and I liked that. However, it was darker in the middle and made for the text in the center to be difficult to read so I couldn’t use that. I spent way too much time on this just because it was something that really bugged me. I eventually got the idea that the white on the outer edges could be the sidelines of a football field. This led to using a small image of the field with a yard marker on it as a repeating image along the sides. Once I put this in I was a lot happier with the overall design. It just really gave me the feel of having a football shell to hold the content.

For the links, I chose to have them be the blue link color when normal. I wanted there to be a different color for the hover and so I chose a red and also underlined the link. This makes the links blatantly obvious and also cues the reader that other portions of the page that may be underlined are not text or not useful links.

I kept this site as simple as I could for a few reasons. One, I do not really feel like breaking copyright law for a class just to show pictures of players or school logos. Two, I talked with some people that I thought would use the site if it was real and having photos of the players was not a big deal to them. They already know who everyone is and what school they go to, they just wanted the content. Three, I have grown up on dial-up and so I hate bloated websites that take forever to download. Four, the simpler the site, the less likely I am to screw something up. And finally, if I kept it simple and standards compliant it would be a lot more likely to show up similarly on every browser.

For the layout of the website, I could have gone with a navigation bar on the right or the left, but then that would have taken away from the feeling of the sidelines.  So, I put the navigation bar on the top and let the content be king.

I don’t think it is the prettiest site, but it is designed for my potential audience, football nuts who want football content.  In the future, I would like to add some drop shadows, refine the look of the site.  But my main emphasis will be on adding and updating the content.  Right now, I just have not seen enough film or read enough about each of the players to go much further into the draft to have a second or even a third  round mock draft.  But, as it gets closer to April, I will have more information and develop more likes and dislikes, sleepers and overrated players.

Posted on December 12th, 2008 by Hutch
Filed under: Final Project Post Mortem | No Comments »

Next Page »