Flowchart: Final

This is my final flowchart. I changed the background from pink, to a softer orange. All of the pink was overwhelming. I added a title that incorporated the logo of the frozen yogurt restaurant that I went to. I switched the position of the key and put it at the bottom, so that it does not take away from my title at the top. I changed the color of the diamond shapes to orange to go along with the logo. The path taken arrows are now a lighter green to also go along with the logo. This way when I take a path, viewers see both of the logo colors. I changed the path not taken arrows from an orange to a black to make it easier on the eyes. Lastly, I changed the stroke on the arrows and made it heavier so that it would be easier to see. I think this project turned out very well and I am proud of my work. This project involved a lot of precise movements with lining up arrows and boxes, but I find it to look very professional.

Content Audit Wireframes/ Composite Wireframe

This is my first wireframe. I put boxes overtop of areas on this webpage to show where each section of content would go. I did the same thing for the next six wireframes.

 

Summary (Broken into two parts-269 words)
 This (Above) is my composite wireframe. This is what I think could improve the layout of the website. I would put the navigation bar all the way across the page, and make it more dominant. I would arrange the second sidebar on the right side of the web page. This way, viewers know to move to the side navigation second. I took out the NAWT Animal image on the sub page because this is a contact information page, and I felt as if it should be strictly about contact information.
















This (Above)  is my main page composite wireframe. Again, I have moved around the side navigation bar to the right side of the page for the same purposes as stated above. For this wireframe, I moved more of the advertisements towards the bottom of the page, I felt as if they were in the way being at the top of the page, and that the company was being too pushy with selling their products. I moved the NAWT Animal image so that it would be within the content. I felt that when it was at the top, it made the page too heavy. With it being inside the content, it gives viewers eyes a break from all of the body copy. Again, I have made the advertisements at the bottom of the page for less of a distraction. The biggest problem with this web page was the dual navigations, it was difficult to notice which one was the main navigation to use. If that were to be fixed, the web page would be on its way to better advancements.

Content Audits 1-3: Summary

                           

These are my three finished content audits. While I was working on these audits, I was able to notice some similarities and differences that were both positive and negative. Some similarities that were obvious were that each website had a main navigation bar across the top of the page with less than eight main tabs. Some differences would be the layout of each page, and how the navigation bars were set up, and even how the content was displayed.

My first audit had a balance of negative space along with the content, just enough to give the eyes a break from all of the information. I found the drop-down menu to be very successful because it makes navigation easier for the viewer, and shows what subjects come next. The color scheme stayed constant throughout the web site, and the orange buttons made it easy to find the information needed. I did not find this website to be difficult, and I would consider this website as a good example of composition and information. The information is in the middle of the page (web page) and the background is simple, which does not cause a distraction.

My second audit had a side navigation bar that included even more subjects. These side subjects were still considered as a main navigation bar, but these subjects were more of a continuation of the main navigation, which makes it seem like a never ending range of content. This audit also had the home page tab listed as second in the main navigation line-up, which I thought was confusing because most successful web pages have home as the first thing that people see in the tab. I find this ineffective because home is always the page that people want to go back to. The home page for this website did not really give much information about the organization, they were just advertising presents to buy for Christmas to help the organization. I find the layout of this web site to be unsuccessful because a lot of white space is present and nothing lines up with another across the page, making your eyes decide where to go next, which also connects to a loss of hierarchy.

My third audit I found to be fairly easy to create. This website still needed some work, but the basics helped make the website bearable. The home page was easy to navigate around, but many links were repeated. This web page had an embedded frame, which made links stay on the same page. I found this a little outdated and thought that it should be fixed and updated. I thought it was a good idea to keep the number of links per page limited because that keeps everything in control, and easier for the viewer to understand.  The content was efficient and I would say that this website is a decent web site, even though I feel that the logo is cliché and childish.

Content Audit 03

 This is my third content audit. It did not take as long as I thought it would, I haven't decided if it is because the website was user friendly-or there just was not enough content. This content audit was different from my other two because it had an embeded frame on the side of the sub navigation's page. My next step is to make a wireframe for each of my content audits.

This is my second content audit, I added  the green content at the bottom between the pink content and that was my finishing touch of information.

Homework Assignment

For Tuesday Dec 11, 9-11am
-Finish adjustments on flowchart, print in color and trim.
-Will take multiple choice test on chapter 6 and 7

By Friday Dec 14, 12:00 noon- Uploaded to blog, no need to show up
-Screen shots of content audit and 300 word summary of connections and observations.
-Reverse Wireframing and Composite Wireframe with 200 word summary of reasoning.

Content Audit 02

This is my second content audit. It seemed like it took forever to finish. I am still a little unclear on a couple of my link parts but I am going to ask for help in class tomorrow. Only one more audit to go!!!

Flowchart: Critique

This was my flowchart. I went to Yofro and made decisions as to which path I would take when choosing my frozen yogurt. After the critique, this is what my flowchart looked like. I received some really helpful feedback and I am going to take each idea into consideration when I turn this into my final flowchart.

Content Audit 01

This is my first finished content audit. I still have two more to finish. My organization that I chose was the ASPCA, which deals with animal cruelty and abuse. This audit was very confusing at first, but after some thinking, I feel as if I am understanding the concept a little better. These audits are very time consuming but not terribly difficult. This reminds me of coding because I had such a hard time understanding that for awhile, but eventually things clicked and I knew what was going on.

CSS Zen Garden: 3

I posted this a little late but Kate and I were working on our web pages on Friday. That is when I finished my page, however I did go in yesterday to fix two things.

CSS Zen Garden: 2

This is my progress in coding that I've accomplished so far. It looks intimidating, but really it's not.

This is the progress that I made today in class. I added my images by the navigation and edited the images to give them a more "country" like feel. I'm still working on the links and hover/rollover parts of my page. I can't decide if I like my heading in white or a lighter brown? I'm very pleased that my page is looking like my Photoshop mock-up. More work to do this week!

Zen Garden-Making Progress

On Saturday I spent some time in the lab working on my CSS Zen Garden web page. My partner Kate was there to help me and she was also the lab tech for the day.

CSS Zen Garden: 1

   

This is my coding for my CSS Zen Garden project. I just started to make my web page. I'll post a picture of it when I feel that it has reached 25% complete.

This is my Photoshop mock-up of my web page. I can't decide if I like the two people dancing on top of the Beauty text. Overall I'm pleased with how my layout looks.

CSS Zen Garden: Style Tiles

 These are my two style tiles for my zen garden project. They are like moodboards but with less details. These ideas give the viewer the choice of which colors I believe would work best for the web page, but they have the option to choose which colors they prefer out of my choices. Same goes for patterns, fonts, and anything else the viewer would like to see. I find my second design stronger, and more relevant for what I am trying to accomplish.

Mind Mapping

Today in class, we made mind maps. Its like a word web except it has more pictures. We were then told to go around campus for an hour and just observe what we see and hear. I went to the SMC and sat down in a chair and drew some of my surroundings. There was so much going on, and so many different conversations. You never really know how much is going on around you until you sit and pay close attention. Technology was used by just about everyone in the room and if I were to sit there, I probably would have had my phone out too.

Web Page: Final

 This is my final web page project! I feel as if I worked really hard on this project, for being one of my first actual web pages, I am pretty happy with the way it turned out. During the class critique, I got some really useful feedback. My class agreed that my background was too loud and that I should either change it completely or change the opacity of the image. Also, the picture in the top, center portion of my page had a white line from the gradient I used, and that was distracting. I had also underlined some definitions, which gave the idea that they were links... oops.

 The picture at the end of my page, was not as effective as I had hoped. My class did not like the repetition of the books, so it would have been beneficial for me to have chosen a better picture. Another thing that could have made my page better would be if I had made the header text different types of fonts all together. We saw another classmate do this to their project and it looked fantastic. Next time I will take all of this criticism into consideration and hopefully continue to improve on my pages throughout the semester.

Fixing my webpage: in progress

 After the critique today, I took notes about what was being said from other people's webpages. I was able to fix some of my boxes and learned that I need to but a bottom margin in the class boxes. This helped position my columns in a nicer order. We are working on these webpages more on Thursday and that is when I plan to add a navigation bar, and a picture, maybe two, and a contact information bar at the bottom of my page. Hopefully everything will turn out how I am picturing it to. I feel a little more confident with this project than I did in the beginning. I feel as if I am really understanding coding, but there is still so much more that I have to learn!

First Web Page Project 9-24-12

CSS style

HTML style

This is my first real webpage design. I had a hard time working with the different boxes, and organizing the content. I had another idea in mind but I was saved it over top of my original file, and so I lost that idea and had to start from a different point. The background of my webpage is a stack of books, to go along with the reading theme. I feel as if I should have used more boxes, and variation with the placement of my content (making the boxes go more left or more right). I feel as if this is a good start for me, because I am still not the best at coding, and I hope to improve with the next project and know more about coding to help me make a more successful webpage. 

Class work 9-18-12

Above is my HTML page from our in-class assignment today, and below is my CSS page. We had the opportunity to play around with different types of fonts and learned how to incorporate them into the HTML files. I am still working on learning the order of the HTML code. If I can visually see it, I can pick out what goes where, just starting it always flusters me. Web Design is not one of my stronger areas in Graphic Design, at least in my opinion. I hope to improve and learn the basic knowledge of Web Design.

My first web page!

This is my final project. We learned in class how to use codes to make a web page and then we were told to design a web page about what we did this summer. I had a hard time grasping the concept of using coding but after awhile, I began to catch on. The one thing that was most frustrating to me was adding a photo. I tried to place the link into my web page but it did not work at first. After a couple of tries (and asking for help) I was able to fix the problem. I had forgotten to add one little detail (") at the end of my link, which threw off the whole code. After I added that back in, and refreshed my page, the image was visible. After class it felt like I had a huge headache. Hopefully I will be able to be more understand coding a little better next class. I find it interesting that web sites are made this way, before this class, I would not have even know how web pages were designed.