Blog5

Other than the obvious html and css I don’t know what would have helped prepare me for these classes.

I felt it a great advantage that I know Photoshop really well. I didn’t have to fumble around and get familiar the different features therefore I was able to think about how to organize my layers and think about the design of the page.

Practice, Practice, Practice!

I know “I don’t have time” or “I really just want to sleep” is a common phrase in this degree but practicing the concepts is very helpful to understanding and getting the hang of everything that must be learned. I really wish I had practiced more so I could understand the concepts even better than I do. In the long run that extra hour of lost sleep will be what saves you from having a melt down when projects are due.

Organization

Keeping files in the correct places is essential. Most of us have crazy desktops and unorganized workspaces but in web you can’t misplace things or all will go to hell. Just like InDesign (or Jenga) one file/link missing and things fall in slow motion.

Read

Keep up on the assigned readings. And explore other articles. Blake will give great articles but he can’t give you the links to every great resource out there. Just make sure that if you do find an article on your own, that it is current and from a reputable source.

Indispensable Resources

Smashing Magazine is one of the best resources out there! It is written in terms that are easy to understand and they also give get resources within each article as well. This site has turned into one of my favorites just to check out daily.

W3C should become as much of a habit as having your hand on ⌘+s. Use it! It finds the small typos or : instead of ; that you may have missed.

Conclusion

There are so many great things to explore. Try not to get overwhelmed and be sure to explore all the possibilities. The greatest thing about web is the end product and satisfaction of finding and fixing elements that make your site come to life.

Blog4

HTML 5 Canvas

No Plug-ins need!?

<canvas>is an HTML element that can be used to draw graphics using scripting (usually JavaScript). It can be used to draw graphs, make photo compositions, or do simple (and not so simple) animations. Though this technique is still in it’s infancy, it is a fun interactive alternative. It is also a widely accepted capability through out the browsers too (minus IE 6-8).

A canvas is started with a simple id, width, and height.

Taken from w3schools

After this initial element, markup gets more complex with various JavaScript techniques.

What Tools Are at Your disposal when using <canvas>?

Drawing tools

  • Rectangles
  • Arcs
  • Paths and line drawing
  • Bezier and quadratic curves

Effects

  • Fills and strokes
  • Shadows
  • Linear and radial gradients
  • Alpha transparency
  • Compositing

Transformations

  • Scaling
  • Rotation
  • Translation
  • Transformation matrix

Getting data in and out

  • Loading external images by URL, other canvases or data URI
  • Retrieving a PNG representation of the current canvas as a data URI

(List information gathered from Think Vitamin)

The abilities in action

I unfortunately (because it’s addicting) found a game ‘Agent 008 Ball’. This is a beautiful example of an interactive game made only with HTML5.

Though this is a challenging bunch of markup, there are many resources out there to help with initial set up and clear instruction for customizations.

More experiments with <canvas>

HTML 5 Form Elements

Most of us love shopping online, yet when it comes to checking out we dread it (That’s why there is ‘save your info’ selections). Yet now with HTML 3 and CSS3 forms can be a thing of beauty, making it easier on the user’s eyes and the designer’s style.

Rather than the default treatment background images can be used to represent validation or other visual elements to help user experience.

Un-styled form

Styled form

Info Graphics

Another helpful visual cue instead of the standard ‘required’ statement and error message.

Form Validation with graphics

Rather than the default treatment background images can be used to represent validation or other visual elements to help user experience.

When this form is completed correctly a stroke around the area turns grey, when selected it is a gradient green/blue, and when the area is not completed yet it is a red stroke.

Area Selectors

Drawbacks

The draw back of the HTML5 forms is there are a little more than half of the features that are not supported by the browsers. The only browser that fully supports every feature is Opera.

Blog 3

“There should never be a point in time, when a user can’t access the app.”

Having a fully scalable site is no longer an option if a site wants to be successful. Before HTML5 this would be achieved by building out various sites at different resolutions. Now using CSS3 and HTML5 for one site that scales to various sizes with ease can save time and money. Also since there are a plethora of screen resolutions now the ability to access the site becomes easier for the user and the experience can be more consistent.

Other advantages include cleaner markup, visually pleasing design, improved accessibility, and consistency.

Cleaner markup

HTML5 allows designers to remove most of the <div> tags and replace them with HTML5 elements. This gives the code more flexibility when running in various platforms and devices. There is still some customization that needs to be done but it does not need to be done from scratch.

HTML using < div >

HTML5

While HTML5 is not shorter, it offers a more semantic layout of information. In turn, a Google Bot or a screen reader due to its logical markup will much easily understand this more logical markup.

[WebMechanix]

Visually pleasing design

HTML5 allows designers to add in the fun flashy things that mesmerize us. The use of Flash has been a burden and a blessing. It let us enjoy various animations and graphics but bogged us down with having to keep up-to-date downloads of the program just to view a page. Now with HTML5 all the games, animations, and graphics are embedded, giving us the ability to receive the information faster without weighting too much on the server either.

Improved accessibility and Consistency

As stated before the cleaner more logical markup gives screen readers a better way to follow along.

As websites adopt the new HTML5 elements we will see a greater consistency, in terms of the HTML, used to code a web page on one site compared to another. This will make it easier for designers and developers to immediately understand how a web page is structured.

[HTML5 Arena]

Drawback

The largest drawback is the browser support. Of course there are always drawbacks, especially since this format is newer, certain browsers – such as IE8 – that cannot read this coding. And in that case certain scripts can be used to fix the problem. Also this coding technique is new, so therefore, a work in progress. So the features will continue to change for the next couple of years but there are a considerable number of stable elements that will not change.

[Planet of the Web]

Breakdown of an example site

I decided to do a portfolio site of the company, Really Simple. I tested it on a Mac in Firefox, Opera, and Safari.

Right off…

First thing I noticed was that the @fontface chosen did not load correctly in all of the browsers.

Safari

Opera

Firefox

It seems to be rendering correctly in Safari yet in Opera and Firefox the font is bolder.  Firefox was the boldest, and a little difficult to read headers.

This also affected the main quote layout on the page top of the page as well.

Consistent

Everything else was consistent. Hover states had fade-in boxes and Home and Projects page had fading slideshows and were all in working order. The CSS3 technique of a custom color text highlight worked throughout each browser I tested as well.

Blog 2

The use of JavaScript allows for advanced functionality of website yet is done in a relatively easy to understand language. Implementing the use of JavaScript allows for a greater range of visual effects and form data. JavaScript results in faster outcomes for the user. As the code is executed on the user’s computer, results and processing is completed almost instantly, depending on the task, because it does not need to be processed in the site’s host server.

Yet there is a down side to all things, various browsers may render JavaScript differently resulting in inconsistency in functionality and interface. So the person building the site must check functionality across all browsers and versions to make sure the users are obtaining similar experiences. Luckily there are sites out there that will help so that the webpage does not necessarily need to be looked at in certain versions of browsers (Findmebyip.com is a great resource for this).

__________________________________

There are many different plug-ins. Here are 5 that I found interesting.

1.TipTip

A TipTip, besides being fun to say, is a great plug-in that was developed as a more visually interesting tool tip pop-up. Not only is it more pleasing to the eye, it also is aware of the surroundings and is able to position it’s self to stay within the browser window. It is completely customizable to fit within the theme of the page and requires no imagery.

2.Login or Sign up

Most users dreaded filling out the initial form to sign up for various sites or emails. It just takes one option and then the user can complete the form, reducing the server space, because the webpage does not need to reload, and responding faster to quickly end the task. Another great service the log in or sign up plug-in does is, reduce the space in which a normal form would occupy.

3.Top Up

Top Up is another form of a ‘Lightbox’ image viewer yet it has been refined for easier integration into the website’s design. It only requires one file and gives a nice look and feel to the imagery. For the user, a ‘Lightbox’ plug-in, allows for image viewing within the same page. No separate window pops up or new tab appears, just a simple, larger image with so opacity in the frame, and/or does not cover the entire page, to help the user recognize that they are still on the same page.

4. Animate panning

Heavy image based sites are eye catching and appealing due to the low word count and visually interest created by a large image panel. This image transitions are different than others I have seen. Also, as suggest by Zach Dunn, this would essentially be a good choice for display various points on a map.

5.AD Gallery

I was excited when I found this plug-in. I was hoping to use something like this on a page I am working on in a class.

A thumbnail view at the bottom of an enlarged image allows for the user to select a specific image that they would like to view. This puts the in control of the experience. A title and description can be placed at the bottom so the user can know exactly what they are looking at.

_________________________

Pikaboo is a audiovisual company that specializes in motion graphics among other things, so it make sense that their website is a heavy JavaScript site. They use various plug-ins and jQuery techniques, but I selected this site due to its use of a layered AD Gallery, or ‘Lightbox’. In the image below, the sleeping puppy show this technique. If you look at the ‘PICS’ area it is also a horizontal use of this plug-in as well.

Nearly everything that is clickable deploys the AD Gallery: videos, images, and descriptions. It is a wonderful interactive site that has an intriguing layout. There is a vertical carousel of images, instead of the typical horizontal. The header logo and navigation are on the middle left. This layout is a little disorienting at first yet it is easy to navigate after quick inspection.

Blog 2

Mood Board | Project 1

For this project I want to go dark. Not creepy dark, but midnight dark. I want to add something to my portfolio that is  less muted like most things that I have done. The feel I want to go with is neon city night life. I thought it would be interesting to use various techniques in Photoshop to create this feel.

Colors

I will stay with in the traditional neon color palette for this project.

Blog 1

Responsive Web Design

Responsive web design was created to cater to the various devices that are becoming common in nearly every household. Now instead of a designer making separate versions of the same site, it can be planned out in the CSS. This saves time and money for the client because there is only one website that needs to be updated.

How is this done?

The use of a fluid grid is the key for the responsive design. Instead of coding CSS3 in pixels the designer uses percentages. The percentages allow for the layout to re-size certain elements according to data gathered by media queries.

For example, my final project in my intro to web class. To figure out what percentage to use, the I must decide on a target element and use it’s width divided by the full width of the site. These numbers should not be rounded up or down, mine just happen to come out even.

Media Queries

CSS3 media queries are the next key to creating this element. “If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify.” (Beginner’s Guide to Responsive Web Design)

There are average sizes of screen resolutions, so it is best to start with them and think specifics if absolutely necessary. Using a couple different resolutions I created two layouts to explore how my site would look on various devices. The layout changes but someone visiting will know that it is the same site if they were to view it on various devices.

ipad (768x1024px)

iphone (320x356px)

Blog 8

Intriguing Headlines

Many times the headline of a website can decide how long the user will stay, or if they stay at all. If the wording of the headline is difficult to understand, with the use a unclear wording, or use of uncommon words then a user can get turned off and possibly frustrated quickly.

While looking around I found a common theme of what is good to do and what is recommended to stay away from:

  • Use plain language
  • Be specific and clear
  • Easy to read and concise
  • Use Common words and keywords without using bland or generic words
  • Using made-up words or ‘catch phrases’ were not always the best choice
  • Speak to the individual, not the audience

There are many different types of headlines as well. It all depends on the function of the specific site. Above are just general rules on overall aspects.

A some-what new take on the headline is that sites are now using visual elements, such as videos or large imagery, as well as or even instead of a headline text.

A few examples of, in my opinion, successful headlines.

I decided to check out various large corporation websites.

AT&T has made it personal. People love personalized things so by individualizing headlines, the user feels more important and it naturally stands out. Including “you” and having high contrast colors catches the eye and interests the user to learn more. They have used the more “traditional” layout; alternating image/headline contained within a box.

Apple combines large image and headline. Using a large, recognizable image and headline but made the more slogan-like wording one of the last things the user reads. This is an interesting technique. By using visual impact of a known object, telling the user the technical aspects, and then giving the slogan, it gives more supporting evidence behind Apple’s claim.

GE has also done a similar technique of combining image and headline. Yet, they have broken out of the traditional containing box and brought the image down, acting as the background. GE went big and has made engineering approachable and understandable (in the headlines at least).

GM has gone with the newer approach. The entire background of the home page is a video. No large headline or slogan, just a scroll through informational section with corresponding links.

In The End

This is just a very small list of sites. I could go on and on about other sites but the main thing I want to get across is that headlines can be visual deal breakers if not done correctly. Headlines should not be over thought yet witty. Give the user something to think about or something that is intriguing and you will have earned their time and interest.

Blog 7

For this blog I choose to do Kyle Steed’s portfolio website. He is a quirky illustrator with great passion and a sense of humor. This site is built with in a three-column grid, HTML, CSS3, and a dash of jQuery.

HTML:

This site is set up with a three-column grid and three main <div> areas. The large <div> areas are broken into Header, Main, and Footer, with various smaller <div> tags within.

            Header:

The header contains an original self-portrait, illustration along with a small navigation and a link to the home page home.

The navigation consists of three links, about, blog, and shop. The typeface that he has used throughout has a hand-done feel that works nicely with the entire site and is readable in paragraph form. The navigation does not seem to have a hover state or selected state.

            Main:

The Main <div> contains nine image links to more a more descriptive area for that specific design. The Main <div> has a strange <class> name, “container_12”. I don’t know if the original intention was to have twelve links instead of nine, but it comes off as confusing.

The link pseudo states are the same throughout the entire site. Just a slight “glow” lets the user know that this area is a link.


            Footer:

The footer contains the jQuery, a small contact consisting of email and phone number, Twitter, and host information.

I didn’t realize it at first but there is a character in the bottom corner that the user can interact with. It’s not a huge interaction, a click and the image drops into a hole and another little guy pops down. The characters are testimony of clients, which I was only able to figure out from a hidden <div> called “testimony”.

CSS:

Kyle Steed’s website uses one linked style sheet, simply named “style.css”. As I looked through the CSS I noticed that only PNGs were used. Also, I’m sure I’ve over looked it, but I was not able to find a name for the typeface used throughout the site.

Blog 6

My final project is based on the statistic; acorns where used as a coffee substitute during the American Civil War. My site will be a informational site that helps people gain knowledge as to what exactly they are doing to their body when drinking coffee. I will include various health facts, good and bad, as well as a section on coffee addiction.

Inspirations

Typography

My site will have a simple color scheme with a typographic focus.

I enjoy how Yoke has incorporated a hand-done feel to their typography yet stays readable and simple. As you will see from most of the images I will show, this color palette is similar to what I want to go with. This has a more organic feel than what I will go for in my site. I want the lines to be more crisp.

Beautiful Type is a blog site dedicated to typography. This site is full as wonderful type inspirations yet I was initially drawn to the color and layout of the page. The more muted colors with a light texture has a soothing feel. I do feel like the ribbon across the top is slightly out of place yet I enjoy the retro vibe of the other elements.

Layout

As far as layout goes I really like the single large focus in the middle of the page. Something that catches and interests the viewer right off the bat, whether it will be type or image is still undecided.

Food Sence has done a great job with a large photo and a line of text on the photo. Not having a containing box edge helps to make the site feel airy and uncluttered, even with a decent amount of words. I enjoy the four images as links as well, so that the view has plenty of click area.
Purity has the same large, impactful image yet I choose this for a couple different reasons. One reason is for the large type directly under the photo. I really like the way it is not interfering with the image and still has dominance. The other is for the image links under the main image. I would like to use the transparent png technique and a similar layout for this in my site.

Color

As I stated earlier, my color palette is similar to most of the images posted. I want to go with brown, cyan, and reds, in different shades, tints, and tones of these colors.

These are two posters from The Design Cubicle:Vintage Posters.

Below is my own mood-board with images borrowed from various sites.

Blog 5

The Good

A single-page website should be clear and concise. Some achieve this well, while others do not. I feel that CreaturesLand exemplifies a single-page layout in many ways.

CreatureLand Single-page WebsiteThere are only three clearly displayed links. The home page is the ‘about’ section which includes a fun, simple paragraph that is engaging and playful which works well with the background imagery. I do feel as though there is a problem with the hierarchy, however, as my eye goes to the background image where there are a lot of fun things for the viewer to look through. My eye then goes to the navigation and then the paragraph.

I selected the next link which is the ‘portfolio’ link, and the page glided down at a slower pace than I have seen. The transition seems more like a float down, rather than a jump, which works with the imagery that takes the viewer under water.

I then selected ‘contact’, and to my surprise the page floated up instead of the traditional downward trajectory path. This area contains a simple form to contact the company.

The Not-so-Good

The key to a single-page website is minimal content. Envato has a large mission in which they claim, “…to help people to earn and to learn, online. We operate marketplaces where hundreds of thousands of people buy and sell digital goods every day, and network of educational blogs where millions learn creative skills.” This is a huge task and they are trying to cram it onto a single-page; Very counter-productive.

Envato Single-page WebsiteThe sections have entirely too much information and text to scroll through. The ‘about us’ page has a concise paragraph explaining where Envato came from, but then lists all of the employees in quite a large font, so the scroll time is even longer.

The ‘contact us’ page contains a form that the viewer has scroll down to complete, which can appear intimidating.

The one nice and consistent thing was the navigation, as it did not change location, or order, within the sections.

Single Page Concept: Exercise 5

I have chosen to use the band Atmosphere. They do not have their own personal site; however, they are part of a large collection of artists featured on one site. The site that features them is their label company, Rhymesayers. It is a very basic template website, used for all the artists that Rhymesayers has signed, with a featured area that spans the container, and a two-column information area. They also have a Facebook page, which of course, is just standard a well.

The band would best benefit from their own single-page website, because Atmosphere is a very modern band, meaning that people of all ages could visit their website. Giving them a single-page site would be a simple way to get their information to the audience in a very progressive way, without the distraction of additional pages of non-related information.