Flowchart - final print

This is the final print of my flowchart for subway. I added a title, another box for the choice of 6 inch or  footlong, change the key, and made the lines thicker.

Web Wireframes

Salt n' Light - Home page

 Salt n' Light - Sub Page

 Purple Door - Home Page

 Purple Door - Sub Page

 Knock Festival - Home Page

 Knock Festival - Sub Page

 Knock Festival - Home Page (composite wireframe)

  Knock Festival - Sub Page (composite wireframe)

When looking a the reverse wireframes of the sites, I realized that they all had a simple design that didn’t change much from the home page to sub pages. The knock Festival only changed content and nothing else. I feel that where the sites went wrong was with how the organized their information in their simple layout. Knock Festival was the worst by far, the information barely fit inside the boxes (sometimes not fitting at all) and sub content was just something that was in the way of the main content. Salt n’ Light had the best organization and wireframe design. They had just enough changes from the home page to their sub pages that connected everything, but also made it distinguishable as a home page with feature items. Purple door did not do this, their rotating feature item is found on every page and takes up too much space and distracts from the main content and information of the page. I chose to make a composite wireframe for the Knock Festival since it was the worst of the three. I only made subtle changes to their wireframe design since it is so simple already; they just made everything very cramped. The biggest change I made was to the navigation, it took up too much space on the side and would fit nicely up top id they changed their header. I would also take some items out of the navigation and create dropdowns, this way it would be more organized and easier for people to find things. The second thing I changed was the sub content, on every page they have three images on the side, this take up space and distracts from the content. The only page it should be seen is the home page. The last change I made was to the footer, it was just too long and big, I condensed it to fit within the wrapper. 

Website Audits

When completing my Audits for the webpages I found both good design, and bad design. The biggest issue I found with the sites were with links. We talked so much in class about making links the same color and the only thing that color, but most of websites did not so this. There were links in the body copy that a user would pass right over since they were the same color as the rest of the text, or on purple doors site, the body copy is different colors and you think there are links, but they are just text. On the Salt n’ Light site, I found links randomly in body copy that would direct you to a page that there is no other path to. This information could be completely missed by the user if they are not looking for it.

The knock summer festival site was the worst design, however, the navigation was the easiest to follow. They still could have made the links more distinguishable. The navigation is white with a blue rollover, while the body copy links are red (which is the same color as the titles) with an underline. The one thing all three sites have working for them is there organization. Salt n’ Light has a very easy to follow navigation with drop down sub navigation for each section that keeps things organized.

As the audits show, all three sites have limited links; I believe they could have benefited from adding more. There were many times that I was rolling over the text and clicking expecting to be taken to another site, or page and found nothing.

All three sites also had cross-links that were seen on every page, this could be in the footer, header, or side content area. The site that took advantage off this the most was Salt n’ Light. They only used the cross links in their footer area. The other two sites had information everywhere that was seen on every page, this became distracting to the main content of the page. On Purple doors site, the feature area, never changes. 

Below are the Audits that I did for the following sites:

Salt n' Light Youth Ministries

Purple Door Festival

Knock Summer Festival

HOMEWORK!!

Due Tuesday Dec 11 9:00-11:00

Finish adjustments on flowchart, print in color, trim

Multiple choice test (25 - 30 questions) on chapters 6 and 7

Due Friday Dec 14 12:00 NOON!

Upload to blog

Screenshots of content audits with 300 word summary of connections and observations

Reverse Wireframe and Composite Wireframe with 200 word summary of reasoning

Flow chart - inprogress

Today we had a critique on our flowcharts. the comments I had were to possibly make the arrow lines thicker, for they are hard to read. Try and separate the key from the rest of the chart. Add a title. add the choice of 6 inch or foot long before choosing sandwich type. Don't capitalize the word no. and watch spacing between boxes. 

Flowchart

Because of time constraints on the semester, our next projects are working with flowcharts and wireframes of a site without actually building the site. For the first part we had to create a flow chart based on a decision process. I choose to do ordering a sub at subway for lunch. we also had to add an illustration or type treatment to the final print out. below is my list, sketch, and then final product done in both illustrator and photoshop. 

Final screen shots of Webpage

11-9-12 Work Out of Class

Today Michele and I came into the lab to work on our websites for 2 hours together while Adam was working. Here are screen shots of the top and bottom of the page showing my progress for the day.

Wireframe over design

After a short meeting with my professor we divided my layout into divs and how I will eventually code. Currently I am working through photoshop to get the exact pixels of each div to make coding much smoother. We are also now working in pairs and will be meeting with our partner for at least 2 hours a week to work on our sites, separately, but able to bounce ideas off of each other. 

FINAL DESIGN for Zen Garden Site

After the final critique last class we still had the chance to make minor changes as needed. Here is my final design as it will appear on the webpage(plus or minus a few things).

100% Design in Photoshop

After some critiques of my page, it was pointed out that I needed to work on a few things to completely develop my idea. Mostly I needed to rework the illustrations, so I took the time to draw out the page completely on a large sheet of paper as seen below. I then redid all my coloring to create the final product also seen below. I played around with typefaces and reworked some minor details, but overall I am please with where it is now at 100% completed in Photoshop.

10-22-12 Website Progress in Photoshop

Today for class we had to have 50% of our webpage created in photoshop. We then had a critique where everyone in the class had 2 minutes in front of each piece to write something about it. Some of my comments had to do with the contrast of the header and also typeface. Overall everyone liked the illustrations although I plan to go into more detail with them. From the comments I received in class I am going to focus on the title area. I want to rework the illustration entirely to work with the title and not just have the title in a box. Other then that, I am going to just add the navigation on the side and work on readability of things and I should be finished with the basic development stage. Next step is to create the page itself!

10-18-12 IN CLASS

today I worked on my style tiles more and now have a better design to go off of. It still isn't done as a complete style tile, but I know what direction I am going in.

Zen Garden - Style Tiles

10-4-12 IN CLASS WORK

Today in class we explored on campus and tried to describe the college student. First I walked around campus and just listened to what everyone was saying. I heard some interesting stories during this time. I then just sat and watched what people were doing. Most people just walk around on their phones or listening to music. 

 The second hour of class was to create a mind map of what a college student is. These are my illustrations 

Redefining Reading webpage exercise

These are just screen shots of my finished webpage for the article we read called "No One Reads Anymore?" Some parts in the middle got cut off, but this shows that I have a navigation, links, and also a footer to my webpage. 

In-progress critique of "No One Reads" Webpage

This is a screen shot of my web design for an article of text the class had to read. It still has a long way to go from here. My line lengths are still too long and I'm not set on the color scheme yet. This picture was taken slightly after the critique once I started adding things (hence the side bar with nothing in it). I know have to figure out how to add a navigation using online tools such as w3schools.com. 

9-18-12 Class work

In class work time was working with web safe fonts. We took information from a webpage and had to add styling options to the text to make it more interesting. We really didn't have much time to work on this, so I got as far as I could. The color isn't the best and neither is the typeface, but it was just for a simple exercise.

MU Design Layout

Our assignment was to redesign the MU Design webpage. This first idea was my original concept of having a photo of the building with geometric shapes overlapping. This idea did not work as I first envisioned. There were a lot of problems I found, the most being how long it would take the page to load with a picture of this size in the background. We were required two designs anyways so I tried something more simple. 

Here is my second design. It is just a texture that I created myself, but I think it is simple and modern enough to work as the back ground of the webpage. Another aspect we had to change was the header area... originally it had a bunch of teal circles with photos. I wanted to play off of the new classes we are now offering here at Millersville Design and also the new technology we are exploring. 

9-6-12 Class Work

In class today we worked on the box model with creating margins, padding an also floating boxes in our web designs. Here is my example of working in-class with taking notes. 

Also durring class we worked off of a pdf file that took you step by step on creating wrappers and boxes in Dreamweaver. I had a minor hiccup and found that all I was missing was a "#" sign, but other then that, everything went smoothly for me today. It is nice to get a refresher on HTML in this class since I have such little experience with it. 

9-4-12 class work

Today we worked with creating a css style sheet as well as creating classes and ID's here are my 2 pages using dreamweaver.

Lynda Videos 9-4-12

After viewing the videos on Lynda.com for this class, I learned a lot of different things about web design. Web is it's own medium, you as a designer, do not have full control over what you can and can not do. It is really something to think about just how little control the designer has over things. The web is constantly changing and you have to keep up with everything to create useful designs. The usability of a site is the most important thing to keep in mind. If people can not interact well with your design, the site has failed. It is also important to test your site in multiple ways while creating it. Browsers nowadays have standards, but you need to keep up with these standards and know how the web is functioning as a whole.

I also learned a lot of new terms throughout these videos, that I may have heard before, but never knew what they described. It was interesting to see the breakdown of the http address of a website and what everything stands for. I learned that you can use different CSS sheets for different devices instead of creating entirely new html documents. You can have one for the web page, print out, and mobile devices. I found this very interesting and also very useful with the expansion of mobile devices.

Another thing I really wanted to hear about was Java script. That was a word that I have heard before, but never really knew what it did when it came to web design. I think that Java script is very important to web design, especially now when interactivity is all people look for anymore. Alone, HTML is a completely static web page, I would really like to look into using Java Script and finding what it can bring to my designs.

8-30-2012

Today in class we did an exercise with using HTML to talk about what we did this summer. I have some experience with HTML from previous classes, so this wasn't terribly difficult. It was nice to get back into the swing of things and writing markup language (it's been awhile since my last project I used it). Overall I didn't have many hiccups with this, like I said it was just a nice introduction for anyone who has never written code and a nice refresher for me. 

This is my markup for my webpage about my summer. I put a few images, headers, and an unordered list in my description. 

And then this is a screenshot of what my website looks like.