Week 14A

Today in class we worked on our micro-page more. When I talked to our professor he gave me some advice to change the background so it fits the width of the screen and to change around my text colors. Most importantly we talked about keeping my design within the grid system. So I have to go back and look at my layouts and organizing the information better. I think I like the last ideation of color with my title the best because it pops and catches your eye. 

Week 13- Outside of Class

For homework over the weekend we created a typecast layout of what our text would look like on our micropage. The typefaces I choose are Neue Helvetica for my body copy, text, and h3. As for my quote(h2) and h1 title it a typeface called Barber. I tried to make this typeface a little more fun to go with my theme. 

Also for homework we need to get 25% of our micro-page done. I worked a lot of time on making my hero image and as well as my background splatter. I had 

Here is my inspiration from my hero image.

Reading:

7 Rules for Creating Gorgeous UI (medium.com)

The writer says that he has become good at UI through analyzing what works, it didnt come to him inherently. Deliberate practice is going to improve your skill.The most important non-obvious thing to learn about UI design: light comes from the sky.Its natural for things to be lit at the top, shadowed at the bottom. Otherwise it looks unsettling. Even though our screens are flat, a lot of design goes into making things look 3-D. There is an example about buttons that is great!

There are certain elements that are usually inset, and others that are typically outset.
Erik says that flat design is not going to be a long-term trend, because the subtle simulation of 3D is far too natural to give it up entirely. It will become semi-flat design. What he does see sticking around is Google's material design, dealing with shadows to convey depth.

Key word: subtle.
Starting with black and white forces you to figure out the harder problem first, making the app beautiful and usable in every way without the aid of color. Add color last, and even then, only with purpose. Having too many colors can hurt you. Most apps are clean and simple.For color schemes: never use black, adobe color cc, dribble search by color.
Double your Whitespace. You need a lot of breathing room for good UI. Think about margins and spacing right from the beginning. Put space between your lines, elements, and groups of elements.

Week 13B

In Class we started to create the structure of our html and css page for our kick starter campaign. The hardest part about this design was getting my overlapping (blue) box to stay on top of all the other boxes because my goal is to create a sense of depth in this part of my design. 

Also in class we went over what our jobs are for the IIDC conference on Saturday. The extra things that I need to bring is a back up computer and 4 water bottles for the speakers. We also went over what we are speaking before the speakers. I had to change my speech a little bit because the wording was a little off and I had too much information. 

(Speech) 

Hello Everyone, 

Our first speaker today is Melissa Zane. She joined Godfrey in 1996 as a designer. She is now the Vice President and Director of Creative Services at Godfrey. In Melissa's road to success she balances a passion for learning with her ability to see a vision and carry it through. By, constantly drawing on her previous experience and strong creative background. 

Thank you and lets give a warm welcome to Melissa Zane. 

Week 13 A

Here are my new designs for my kick starter campaign. I focused on where exactly the content would be placed and try to stay with a grid system. This was kind of difficult to do because my kick starter campaign had so much content to choose from, which made it difficult to decide where I want the most important information to be place. I'm kind leaning to my second drawing but more of the layout of the recipes in the 3rd sketch. 

1.) 

2. ) 

3. )

Week 12- Outside of Class

Reading:

Chapter 6: Web Typography

Typography can have the greatest effect on the success or failure of a piece. Type carries a message and communication. Although in web design some passions of kerning with typography is not possible because of constrictions. The term typeface refers to the unique styling applied to a set of glyphs, including an alphabet of letters and ligatures, numerals and punctation marks. The term font comes from a singe size or style and can even refer to the digital file. Typography is invisible, but also can be beautifully expressed and attention grabbing. Two characteristics of typography can be combined to attract a user to convey a message. The first being readability with attracts a reader and the second being legibility which refers to the ease of a reader that can gather the message quickly especially in blog text. Designers will measure type in a term called an em which is measured in a square unit. This represents the distance between baselines. A rule to remember is that web browsers will default to 16 pixels. Two examples of this are (15 pixels > 1.5 em, 24 pixels > 2.4em). Other things to consider is that type can be used in many ways. It can be used as an image, or @font-face fonts and web-safe system fonts. With all three there are restrictions but in my personal option I think that images with typography is where you can be most creative. Web safe fonts are the one that we default to and @font-faces type can be link to your site to produce interesting founds.

Yummygum.com "Using style boards in the design process"

It's not uncommon to find designers that work with web design create styleboard to get their inspiration and initial thought planning across. Moodboards are established from images, text, colors and possible layouts to start to develop a brand or product stage. The difference between style boards and moodboards are that style board have existing layouts and images of other web sites and moodboards are suppose to go off of abstract imagery. Style boards are the literal conception rather than the conceptional side. They help intent the visual style of which the client wants.

For homework we decided to create a style board that is 11 inches wide by 8.5 height to show our inspiration.

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.