Week 12B

In Class: 

We had to decide on a kick starter. I had some troubles finding mine because I kept in mind that we needed to manipulate the information and imagery, so I knew I had to get a product that I could easily take photos of.
Also in class we started to talk about more about the product and some of the things that are needed are title, info, call to actions, quotes, resources, contact and how to use functions.  When we start designing we should follow a grid system and you must decide that the most important information is in the viewpoint and everything else is in the scrolling secondary area.

Refocused Project: Kick Starter

I now picked to do the Splash Infusers project to instantly infuse your water or beverage. 

Splash Infusers: Instantly infuse your water or alcohol

https://www.kickstarter.com/projects/1593138740/splash-infuser

Why? Because splash infuser is very colorful, so I feel like I could design this company with a lot of color and they had a lot of information. They also did not have a website so I can start from scratch. Another benefit about choosing this product is that I could buy the infuser if I wanted to so I could give the webpage my own experience and personal thoughts.

In class:

Week 12A

In class:

We started going over our next project which is designing a single page microsite from a existing Kickstarter campaign. Our goal is to pick a topic of our best interests and find a campaign that is already receiving funding.

In class we reviewed and went more in depth with creating boxes and using float in css. I went a little ahead and produce the page that you can see in the images below. We also learned about applying fonts into your page. There are a bunch of ways but the 3 ways we learned about were system fonts which are the default fonts already set into the computers. There are visual fonts which are created as an image and web fonts that you would have to source the font so it can be downloaded by transferring or hosting it into the cloud. 

Homework: 

3 Kickstarter Campaigns.

1. ) Telluride Fire Festival by Erin Ries

https://www.kickstarter.com/projects/exfirebabe/telluride-fire-festival?ref=category

2.)Fall 2014 Senior Projects: Friction     by Fall 2014 Senior Projects: Friction

https://www.kickstarter.com/projects/1559975439/fall-2014-senior-projects-friction?ref=category

3.)Fidelis Tool: Durable Titanium Multi-Tool with 12+ Functions    by Jeff Morin

https://www.kickstarter.com/projects/1035213898/fidelis-tool-durable-titanium-multi-tool-with-12-f?ref=category

Reading

Chapter 5: The Elements of Web Design

This chapter explores the aesthetic treatment of the elements within a design that not only help form relationships within a system but create a visual style. Elements that make up a good web design style are color texture, typography, and imagery. Through manipulation you can create a sense of scale, depth, animation, and variation to make a unique and better memorable design. Style comes form the trends of today and available technology which help create your sense of style. The items that create the style are color which help set the mood and can be defined as hue, saturation and value. By limiting color you can create a big impact as well as contrasting color to help a designer guide and direct a user though a layout. Another element is texture which helps connect context in a page by creating a sense of tactile experience. The last element the book points out is imagery. This is a way of branding a site because it helps show information quickly. Imagery can be used as icons, illustrations and photography. To manipulate these three elements it can be done by scale, depth & dimension, animation and modularity. Scale and Depth/dimension help make a sense of drama and are elements of realism. They make an illusion to better visual interest the user and draw them in.

Week 11- Outside of Class

Vacation Page CSS

For my page I decided to go with a more simple design but I mainly focused on trying to make my page responsive. In my html page I had to make several divs to break down the information into groups. By using ids and classes I could identify groups and give them similar feature or break them down into id's to give them specific features. I tried to stay as similar with the colors as I previously did in the inline style page within the html page.

At this step I added more color and got the links and destination content to become responsive.

Here is a screenshot of the web layout.

And here I just changed the styling of the link so it would have a decoration and the hover would pink. 

Readings

Above the Fold: Intro
        The intro of the Above the Fold book starts talking about the connection speed and how browsing the web and getting an effective experience you need good wifi speed. Then it talks about the screen resolution and how its measured in pixels. It also talks about the possible browsers that can be used such as Safari, chrome, firefox and the least common Internet explorer. The intro also states how the book is set up and how it will cover how to design for the web by starting off with a structured plan and then the design and followed by optimizing your site afterwards. Each section is a series of decision that must be planned out in order to have a successful site.

Above the Fold: Chapter 2: Elements of Usability
        Designers must have a good understanding of usability. The term refers to the ease with which users can learn and engage in the interface of the web site. Some factors that need to be taken into consideration are the legibility, page load time, handicap accessibility, scannable content, clear urls and page titles, consistent design, and everything must be clear so the user can go back at any point if lost on the page. Some little facts I picked up were that the navigation bar shouldn't have more than 5 or 7 options or the user starts categorizing them into sub divisions or breadcrumbs. In this planning process its important to have the user test the site by giving them a task to solve and work through the best solution. If the user gets lost pages such as 404 error pages can help the user get back on task.
       

Above the Fold: Chapter 3: Space, Grids & Responsive Design
        The final step in the planning process is to prepare the canvas for a well designed site. You can do this by creating a grid system. This is done correctly by organization and hierarchy. This is described as a visual sequencing of elements within a design so the user may perceive them in a specific and logical order. This helps the user see levels of importance by grouping information in a cohesive unit. Another way to help create balance is through white space. This can be done by creating space through margins, gutters, padding, line spacing and paragraph spacing but with too much white space it can also hurt your design. There are examples where there is a lot of space and this is described as "air" because the content as room to breathe and most of the site that use this can be successful. Designers use a grid system to create this type of cohesiveness. Grids are set up by columns and baseline grids are set up by using the typography to line up headers and content.

Above the Fold: Chapter 4: Anatomy of a Web Page
        The last chapter we read talks about the form and function of a Web Design. This is the structure of the site. Familiar terms that are used for this are the (header, navigation, feature, body/content, sidebar, footer and background). It's important to think about that users read from L to R and top to bottom making the top left corner a hot spot for a lot of information. It's crucial to place the important information in this corner but not to overwhelm it. I liked that this chapter showed a lot of different images of website pages and examples to get a feel of well structured pages. 

IID Pages

Display Factors

      This page was about the measurements of different screens and each device is different but all are measured from top right corner to bottom left corner of the screen and not the device. Each designer must take into consideration how different users will use their devices with various sizes and resolutions. One must take into consideration all the interface elements on the screen because they attain space within the browser. 

Grid Systems

       A grid is a way of showing the page has some type of structure within it's design. The design is based on alignment, object relationships and grid based components. Grids help benefit the content and elements if done in the right way. They create a sense of balance and rhythmic intent.

Page Fold

       The page fold is a term used from newspaper printing because the layout was cut in half due to folding the paper in half. In web design there is an imaginary line that creates a fold in the content. Due to this cut off from the view point area a scrolling is then needed. This imaginary line breaks the page into sections the upper half is known as "Above the Fold" and everything below is secondary information. Everything in the first half is most important. 

Scanning vs Reading

        Studies have shown that users tend to not intently read a page on web as they would the same with printed books. Clear hierarchy is key to establishing levels of importance and reading direction. Without clear paths the user can get lost on the page. 

Week 11B

This was another in class work time!

CSS 101 Part 2 .pdf

For this part 2 I was a little confused because the directions that the .pdf gave us was all over the place and it was hard to follow. To the best of my ability I tried to match what the pdf said to do.

Vacation Page with CSS

This is just the beginning of my vacation page and there is more to come. Because we are changing from inline styles to external so, I had to delete all the inline styles.

Week 11A

Don't Fear the Internet

#5 Video (Don't fear starting form scratch: Part 2 css)

The video starts off reviewing what we did in class 10B. It starts off talking about the 3 styles of css and how you can use them in html because html gets very boring without all the extras added to it. The first form is inline style, this style is very bad. It would take forever if you wanted to change all the <h2> tags on each page. And if you had 100 pages then it would be like cutting your hair by each strain. The second style form is embedded or internal css. This style is created in the <head> tag of each page and still is the most effective in terms of time. The last style is external. This style sheet is the most effective because you can have one stylesheet that is linked with all the html pages and you just have to change it on one page. Next it talks about how you can link up the html page and css page and then how to label your file names. And then finally it starts using it a project on a simple static page.

#6 Video (Don't fear specificity: targeting content with classes and ids)

This video starts off labeling what ids and classes. These are used to help make your code easy to read and identify quicker in the css and html pages. Ids # should only be used once when identify on element where classes . should be used for labeling a group of tags. Some of the selectors or generic elements that don't need id or classes are tags like h1-6, body, a and so much more. This makes everything so much easier when labeling and styling your content.


HTML 101 .pdf

Here is my process for the Html 101 page.

CSS 101 Part 1 .pdf

This is mostly review for me but here is my process for the css 101 part 1 page. 

Week10- Outside of Class

Web Team: Interdisciplinary Interaction Design Conference

For our portion of the class, we were required to add in the montage image of photos form last years conference into the about page and add everyones photos and blurts to the team page. The things I fixed from the previous montage photo I created was the line width between each photo and got rid of the outside border and just exported it as a .png so the background color of the webpage would show through the images. We accomplished the image to be responsive. My other teammates worked on the images and making the optimizing of the photos to the right size so the loading time wouldn't be too long. After looking at the page I thought everyone's name was getting washed out so I thought it would look nice he we bolded everyone's name so it was each to recognize.

We

Week 10B

In class we started reviewing over css or (cascading style sheets). Something I forgot was the different forms that are used with css. The three forms are inline, embedded, and external. Once I heard the names I remember their function in an html page. We will always be using external styles to identify the content in html by using syntax notation. You can identify each selector with either class or id tags. The last thing we reviewed before jumping into the code was the margin, padding, and borders that go around the content. Below is the page we worked on in class.