J. McKenzie Hansen

Segway Centaur Micro Site Project

The Segway Centaur Micro Site project was a challenging, but fun project for me to do. It required me to use all of the knowledge and skills that I learned this semester and last semester from Thomas. It also made me have to go out and learn some different tools, such as PHP to make the form.

The thing about this project was I didn’t know where to start–and I do not mean with creating files and a directory, I mean with my entire design and layout. I did some research on the actual Segway website and that is when I developed my color scheme. They use a lot of black, white, and gray, along with little pops of color. That is why I did a lot of black, white, and gray. But because my content would not be laid out the same way, I knew I would have to have some kind of color in the background to make the site pop.

I also knew that I wanted to challenge myself a little bit with making a horizontal navigation bar at the top. Thomas ended up walking another classmate through it, after I had already completed mine. I got help from B.J. during this project, because some things I couldn’t wrap my head around or I couldn’t find on Google exactly what I was looking for. The way Thomas walked my classmate through the horizontal navigation was very similar to the way B.J. helped me, so I knew that it was “correct”.

When doing the header for my website, I wanted something easy that wouldn’t take long to do. I ended up just fading an image into the background and keeping my h1 visible. I did want to incorporate the Segway logo in some how, so I put them in the navigation bar on both sides. I think it keeps things symmetrical and balanced, but also incorporates that this is their product. Because there is a blue color in the image I chose, that is how I chose my background color. I needed that “pop” so that I had something that was appealing to the eye.

For my homepage, I wanted to do something to the content to make it appealing to the eye. That is when I developed the idea to do three columns. I wanted images to be in the middle and the text to above them and beside them.  I think that it made the home page look very nice and easy to read. I even made the different bullet headers the color of the background just to bring consistency to the page, but also have a person’s eyes drawn to the text. Layne is actually the one that helped me decide to do that. He helped me by pointing that my heading tags weren’t going in order of importance, so I had to change all of those to h4s. That is when I asked him what he would like better, the blue or if it should be gray, black or white. He said that he liked the blue, and that is how I chose it.

For my about page, I kept the same design (as we were supposed to). I wanted to make this easy to read. When people go to read more about something, they do not want to be overloaded with images and crazy text, so I kept it simple. To give some design to it, I put three images “stacked” on top of each other.

My FAQs page is done the same way as my about page. However, instead of doing paragraphs, I did a definition list. I made the question the definition term and the answer the definition. To keep some type of appeal to the page, I wrapped the text around an image.

My contact page was a lot of fun to do, but was also very frustrating. First of all, I don’t know what happened with Wufoo, but it does not like me. I was able to create a form, but then it started acting weird and wouldn’t post. I tried putting it on my contact page numerous times. I finally stepped away from it. When I went back to put it on there, it didn’t recognize my account and said page not available. I gave up on that so I was going to use server side technology to build my form. I asked B.J. to help me with going through the steps on Thomas’ website, but he said that he could walk me through how to build my own simple form. So I agreed, and I was still able to use a little PHP in my site. I really enjoyed doing this. It was very frustrating though! It took a while for me to understand everything that I was typing. Now it makes sense to me and I was able to explain to B. J. after I finished what each section was and what everything meant. I am very grateful that he was patient enough to show me that, and I am grateful to have had someone teach me a little bit of a programming language. Also for my contact page, I created a link in my footer, and I kept with a consistent design feature for the layout, but also with the image to the right. I used that same thing on my FAQs and About page, as well. I think that it looks good having images on the same side, but it also flows better with the text when you are reading it.

Overall, this site was very fun to make. I really enjoyed it. I was able to learn a little bit of a programming language and challenge myself to do it, but also got to see how much I know about HTML and CSS. I didn’t have to Google too much during this project or get a lot of help from B.J., but it was nice knowing I had two sources (other than my classmates and Thomas) to turn to if I did need help. There were times that I had to step away from this project and take a break, especially with CSS, but I never gave up! I pushed through and created something really AWESOME!