Blog #13: If I knew THEN what I know NOW!

Diagram for web desing: strategy-design-code
If I could go back and give myself advice to get me through the past 32 weeks, it would be to make good production habits, don’t hold back, and practice. For goodness sakes, PRACTICE!

Habits:

First of all, be smart about your projects. The more planning and strategizing you do before you start coding the easier it will be moving on. This will save you from back tracking throughout an entire project. Managing your time is just as important. If possible try to give yourself a 24 hour grace period letting you work out kinks and making sure your html and CSS have been streamlined.

Try to remember that you’re designing for web, not print. Your layouts have to follow some sort of grid. Understand that your comps not only need to work visually in terms of C.R.A.P., but also from a coding perspective. With this in mind, don’t draw back your designs to make them easier to build. Find a middle ground to the design and accomplish what you wanted to achieve from the beginning without sacrificing the overall design, you won’t get what you want out of these classes if you do.

Use the “Interact with Web Standards” book. It will be confusing in the beginning, but it WILL help. Don’t just read it either, take the time to do the exercises in the book. The only true way to understand HTML and CSS is to do it. Try to understand what is that you’re coding and most importantly why. Validate, validate, and then validate again. The W3C site will be your go-to tool when it comes to trouble shooting.

Outside Resources:

Like the rest of the world, if you don’t understand something use Google. It will provide you with tons of tutorials, blogs, and inspiration for your designs and coding. There are some really great blogs pertaining to web design. Below are just two of the blogs dedicated to understanding web design and semantics.

A List Apart homepage

Smashing Magazine homepage

Finally:

Don’t be afraid to be a “Web Nerd”. There is absolutely nothing wrong with knowing too much about something, especially web. Another thing, keep cool and be open to new ideas and solutions. The web is always changing so don’t get too comfortable and keep up with growing trends and techniques.

web standards meme

Advertisements

Blog #12: HTML5 {Revisited}

Since being introduced to HTML5, some advantages to this new version of markup language have caught my attention and raised some questions. I will clarity how some of the semantics of HTML5 will effect the way we markup content and how some web applications are giving designers a new way of creating an interactive web experience.

Structure & Semantics

To correctly mark up your content by HTML5 standards it is crucial to know what these new tags mean. These tags won’t add a visual appeal to your page but will help to organize content consistently, making it easier for the viewers to understand. The post on Oli.jp explains the difference between the <section>, <article>, and familiar <div> tags. Sorting through the content and how it relates is the only way to know for sure.

Oli.jp definitions:

HTML5 <tag> definitions

The correct semantic use of the tags will not only help to organize the content, but also create a sense of hierarchy on the page. Asking your self questions about the content as you are marking it up will help to determine which of the tags will be most appropriate. Creating a basic outline for your content and asking yourself questions like the ones in the video below will help to clarify which tags to use and why.

a video on how to choose the right structural element

Canvas

Canvas is a new HTML5 element which allows users to draw graphics by incorporating JavaScript. The <canvas> tag itselft isn’t the drawing tool but becomes a working area (“container”) to render graphics by applying JavaScript.

W3schools explains how to create and use the canvas while giving examples. Like any container you have to give your canvas an area to cover by giving it a height and width. This will then be activated by using JavaScript, making it interactive.

Basic canvas tag attributes coding

Basic javasript for the canvas tag

Here is an example of a canvas which enables the user to create an SVG (scalable vector graphic) of a circle.

Creating a circle using javascript and the canvas tag

Think Vitamin also helps to explain some of the possibilites of the canvas tag to generate drop shadows, rotations, and transformations. The canvas tool can be used to make simple graphics, animated charts, and embedded drawing applications. By giving designers more options for customization the canvas can become a powerful interactive tool for both entertainment and educational purposes. It helps to lift some of the restrictions on web design that would’ve once been impractical such as a rotated image which can now be done through the use of HTML5 and CSS3.

drop shadow coderotation coding

With these attributes the image will be rendered as a slightly tilted and elevated image.

Final product of canvas tools

deviantART Muro

This is an example of how the canvas tag can be used and customized using HTML5, CSS3, and JavaScript. This canvas allows you to render your drawing with a multitude of brushes, colors, and patterns which can be added by purchasing other packages. Your images can be saved and submit to the main site directly with the use of this web app. This creates an entirely new user experience to the already popular site.

Example of the canvas tool from the deviantART site

Blog #11: HTML5

What is HTML5?

HTML5 is the latest version of Hyper-Text Markup Language (HTML) since HTML4 which was implemented in 1997. HTML5 is a long awaited improvement which is still under development. This version of HTML will help create a consistent web experience no matter the browser or device. With the new tags that can be integrated in HTML5. This will make downloading 3rd party applications (like Flash and Quicktime Player, etc.) a thing of the past, due to the ability to embed elements directly into the HTML with the use of a <video> tag.

+Positives:

  1. “Simpler” coding, with tags like <header> and <article>.
  2. More secure downloading.
  3. The ability to retrieve information through your cache
  4. Will increase productivity, save time and create a universal web experience.

-Negatives:

  1. It hasn’t been integrated to all modern browsers to-date
  2. Doesn’t follow a specific rule of semantics.
  3. Still isn’t fully developed and valid through all modern browsers (expected to be sometime in 2015).

20 Things I Learned

This site gives a broad look into how the web works and components that we use in our everyday web browsing. One of the topics is HTML5, which is coincidentally the fifth topic on the list. It goes on to explain how HTML5 will change the way we use the internet and how we as designers can benefit when trying to create engaging and interactive sites. This article touches on the subject of the new video tag (<video>), which will make downloading and installing additional software obsolete. No longer will users be forced to update to a new version of Flash to watch the latest viral video, but instead will be retrieved through the server. This will allow for more secure downloads and faster streaming.

A List Apart

This post helps us to understand how HTML5 differs from the well known XHTML 1.o/1.1 and HTML4. These versions of HTML follow guidelines and rules known as SGML and XML. This forces designers to put attribute values in quotation marks and apply end tags to all elements used. Without these, your CSS and HTML will render as invalid. HTML5 is cut from a different cloth since it doesn’t follow any particular “rulebook” and can be written either way. As a rule-of-thumb the author suggests writing in XHTML5 to keep with good semantic practices.

Some of HTML5’s new interactive features include a simpler way of incorporating forms and SVG (Scalable Vector Graphics), which can be created only on a <canvas> and styled by using JavaScript.

HTML5 Doctor

The integration of CSS3 and HTML5 will be a popular topic among developers for the upcoming years. This article helps explain some of the technical coding for forms in HTML5 to create more visually expressive forms by using CSS3. These small details will help developers and designers to simplify complicated forms, creating a more user friendly experience. The use of :valid and :invalid pseudo classes is shown in the example below.

HTML5 Site

Critique

I decided to take a look at the Prius Projects site. This site incorporates some of the new HTML5 tags and some jQuery effects. The simple and fun to navigate. The color scheme works well with the feeling that Toyota has been associating with its Prius models. The use of time lines and colors to signify the different sub categories helps to navigate the site even though there really isn’t a lot of content. The site uses jQuery sliders and transitions to make the interaction between the user and the site more and enjoyable and engaging.

The site uses 3 styles of navigation which include the usual inline elements, a click-able time line, and arrows which have a fixed position at either side of the browser window. These use jQuery to follow the selector when they reach a certain point at the far left or right of the window.

Through the browsers

The use of HTML5 is really only visible when viewing the code. The site uses some of the new tags, which have been implemented by HTML5, such as the <nav>, <section>, <mark>, and <footer> tag. When viewed through Chrome, Firefox, Safari, and iE the pages layout stays the same. The changes come when the browser has to respond to the user, which isn’t a problem for any of them except of course iE. It’s in iE that we see choppy reactions compared to the other browsers who show smooth transitions. Since the site only uses the new tags and doesn’t include any complicated forms or 3D transforming, all of the browsers are able to render the site consistently. These small details are evidence of the incorporation of HTML5 markup.

Blog Post #10: Javascript Frameworks

As designers we are always looking for ways to create unique and innovative solutions to our design problems. This is especially true in Web Design. With the help of JavaScript, designers now have the power to create intricate designs without having to hire a programer in the process. The use of JavaScript Frameworks such as jQuery, Ajax, and MooTools, has made program coding easier to learn and implement in our design work. These JavaScript libraries help to simplify HTML documents in aspects of event handling, interactions, and animation. The use of JavaScript has both positive and negative sides, which include:

+Positives:

  1. Create a visually interesting and interactive site with event calling like “hover” and “click”.
  2. Most frameworks are of small file size.
  3. Work across all of the major browsers (IE 6.0+, Firefox 3.6+, Safari 5.0+, Opera, and Chrome).
  4. Bandwidths aren’t affected due to the fact that all the work is done through the client’s side.
  5. Simple to use, even in other languages.

-Negatives:

  1. Using JavaScript Frameworks could be a potential security problem.
  2. Has the tendency to render differently across the numerous browsers.
  3. Won’t render unless JavaScript is enabled.
  4. Could hinder search engine optimization.

Plugins

JavaScript incorporates the use of plugins to create the special effects used to create an enhanced user experience. These plugins effect elements like navigation and down to images and footnotes. Here are 5 examples of plugins which could make a difference in the way our design work is approached.

Meerkat

example use of Meerkat

A plugin site using the Meerkat plugin

This plugin has a vast number of uses, which include navigation that will scroll with the user and a simple solution for a splash page. This would help usability since the navigation would never have to be found and would always remain in a certain area of the browser window.

Hover Caption

example of Hover Caption use

use of Hover Caption in a porfolio

With this plugin, you are able to place a caption for an image without have to create room for text. It is activated with the use of the selector when the image is hovered over. This could help to create white space in your design without having to sacrifice any content.

Booklet

Booklet plugin example

an image of the demo used on the plugin's page

Small details could mean the difference between a good site and a great site. The Booklet plugin is an effective way to engage the user in the aspect of their experience. This plugin creates a realistic book in digital from, letting the user flip through pages as if with a real book. With ebooks, digital magazines, and apples ipublish, possibly on the way, this plugin brings back the aesthetic of actually flipping through pages instead of a click.

I have also found a plugin which is used directly with InDesign PDFs to create this effect.

Dynamic Footnotes

an image of the Footnote plugin

an image of the Footnote plugin

an image of the Ebooks page on Wikipedia

the Ebooks page on Wikipedia. Cutting out the need for relative links.

With the use of this plugin searching for a footnotes meaning would never be difficult. This plugin would reduce the number of links while also giving the user instant access to their meanings by only having to hover. Ebooks, online magazines, and sites with extensive content (Wikipedia) would benefit from this plugin, creating a higher degree of usability.

gMap

an image of the default code for gMaps plugin

default code for gMaps plugin

an image of Redbox's gMap plugin use.

Redbox's gMap plugin use.

As a lightweight plugin, starting at only 2Kb, gMap is a great way to integrate Google Maps directly into your website. Users would no longer have to take the extra steps to find the location of a site. Redbox uses this to help customers find locations near them, making it quick and easy.

Web Critique

an image of the website's home page

This is a portfolio site for a graphic designer/art director based out of Iceland. His site uses JavaScript Frameworks to create a vivid user experience. The use of Meerkat and a version of Hover Caption were utilized in the design of the site.

an image of the site's Meerkat navigation

the site's Meerkat navigation

The navigation is set as a fixed, horizontal bar which scrolls with the user and stays at the top of the browser window. Though this is a one-page site, its effect is visually pleasing and gives potential clients a sense of expertise. These small but crucial details are what can engage potential clients.

an image of showing the Hover Caption plugin

the site's use of the Hover Caption plugin over images of portfolio pieces

Though subtle and not too extensive, the use of this plugin cancels out the need to dive deeper into the links to know who or what the portfolio piece is. It frees up the design from the obvious caption text and creates an interactive way to gain wanted information.

CSS Zen Garden Inspiration

For the first project in our Advanced Web Design course I have found inspiration in illustrations and shape-based images. I want to create a setting for characters on my site. By using the content area as an object for the images to interact with, I will create a fun and stylized design.

Mood board

The color palette I will use will be limited to 3 or 4 of the colors seen in the mood board. The exact colors will depend on the concept that I choose. Stylistically, the design will be engaging and bright in color and style. Though I have illustrative abilities, I don’t feel that I have used them enough in my design work. This project will give me a chance to integrate this skill in my work.

An collection of colors and images that will insprie the CSS Zen Garden design.

Blog #9: Responsive Web Design

With all of the changes and advancements in mobile devices such as, smart phones and tablets, web design has had to adapt to a predominantly mobile world. These web friendly devices have changed websites when it comes to creating fluid grids. Designing websites for changing resolutions has been made easier with the help of Media Queries and CSS validators such as WC3. The use of Media Queries has helped the web design community take a step forward into an age where the majority of users on the web are being connected through mobile devices.

Fluid Grids

When it comes to creating a responsive and web design the use of percentages rather than fixed pixel dimensions is crucial. This ensures that the navigation, images, and content will re-size itself in proportion with the rest of the elements on the page. This will ensure usability within any of the screen resolution sizes.

An image of the the fast food statistic home page changed to iphone resolution

By increasing the scale of the navigation it ensures that the buttons will be easy to touch. This is important on the home page since the stat sets up the mood for the site and the navigation brings you into the rest of the site and content.

Media Queries

Advancements in Media Queries and techniques have made responsive web design possible without having to create individual sites for every device. These are used to identify the specific browsers being used so that users are linked to the appropriate style-sheet, whether it’s a smart phone, tablet, desktop, or even a web-ready t.v.

An image of an interior page converted to fit the iphone resolution.

The Horror Stories page was a simple fix. Changing the two-column layout into the one-column layout ensures that the content will be readable at any resolution. Since most mobile web users are looking for fast answers, putting the content above the image helps to establish the obvious hierarchy of the page. Omitting the text that says “Back to Top” from the footer creates space and works fine since the button is an upwards facing arrow. It’s these type of changes that make a difference and help responsive websites stay consistent throughout all resolutions without sacrificing usability.

Blog #8: Design Critique

Website
I’ve decided to critique the site, City-Dog.co.uk, which is dedicated to providing dog training services specifically to city dwellers and their dogs.

An image of what is seen above the fold in the city-dog.co.uk home page.

city-dog website, above the fold

Overall
This site has an interesting urban feel, similar to an old newspaper, such as Harper’s Weekly. The color palette enforces this reference and unifies the elements on the site creating consistency within the website. This design is conceptual and appropriate since City-Dog is a London based company. The site was made using an 8-column grid. The grid is broken up by the navigation, which consists of five centered links.

An image showing the 8-column grid of the City-Dog website.

City-Dog's 8-column grid

Usability
The site is easy to navigate with its easy to find navigation and numerous links. Navigation is given plenty of room at the top of every page. The buttons resemble elements on the page without being lost.

An image of the City-Dog website's navigation.

City-Dog navigation

The additional links found on nearly every page are fun and help to engage the user. These links help to guide users who are interested in the information presented. The use of clever tag-lines and images help to unify the site and free it up from areas of heavy content.

An image of the additional image links found on nearly every page of the site.

Additional links/navigation

The site also offers links to a company blog and a chance to sign up for a mailing list. These extras give the users an impression of individualism and personality, helping to set them apart from other dog training companies. The blog is found on the site which helps with usability since the user isn’t forced to back-track through their browser to return to the site.

An image of the City-Dog Blog page, which is found in the navigation.

An image of the City-Dog Blog page, which is found in the navigation.

Type & Image
The type for this site has been well executed and helps to unify the site visually. With the use of black vector graphics and the Georgia type-face, the site is able to pull off the resemblance of an old newspaper and not feel dated. The type and imagery throughout the site feels modern in approach without losing the intended concept. Image and graphics play a large part in the sites hierarchy and helps to break up the content.

An image of the type used on the interior pages of the site, which were created by using HTML.

Type found on the interior pages created using HTML.

Blog #7: Site Deconstruction

BKWLD
BKWLD is a company which deals with bringing new and effective ideas to life for their clients through digital media. The site is well designed and gives you a great idea of what this team can do for their clients. In this post we will deconstruct the site’s HTML and CSS to better understand how it was assembled.

HTML
Viewing the source codes help to understand how the sites content was arranged. After dissecting the HTML 4 obvious divisions are used to break up the information on the page. The site also uses a basic 4 column grid to layout its contents and giving the site a sense of balance.

a view of the sites home page with four visible columns.

BKWLD home page

Header
The first division is the “header” which contains the BKWLD logo and the navigation for the site. The navigation is put into an unordered list across the top.

This is an image of the header division which contains the company logo and horizontal navigation.

header: logo and navigation

Embedded within the header division is an object identifier which contains the alternating banner. This is where flash has come into use to give the page some energy.

This is an image of the alternating banner which is embedded in the header division using an object identifier.

Created with the help of flash to liven up the page which contains a large amount of white space.

Recent News
The next division is identified as the “recent_news” div. This contains classes to break up the 4 articles displayed. By embedding these classes within the div, it helps to organize the content for updates and future changes.

This is an image of the recent news section which visibly showcases the use of a four column grid and the use of classes with in the division.

The recent news section which visibly showcases the use of a four column grid and the use of classes with in the division.

What We’re Saying
This division contains a “top clearfix” class containing the title of the section (what_were_saying) and a  link to the groups blog. Beneath this class isthe “clearfix” class which allows you to pan through the team members with the use of left and right arrow buttons.

This is an image of the "What we're saying" division identifier

The "what_were_saying" div id section

Footer
The footer uses a class to display a facebook link to like BKWLD. Also including the primary navigation at the bottom in another unordered list to make the site easier to navigate and ultimately more convenient for the users.

This in an image of the sites footer divison found at the bottom of the page. The footer displays a copyright date, like button for facebook, and reuses the primary navigation found at the top of the page.

The footer displays a copyright date, a like facebook button, and reuses the primary navigation found at the top of the page.

Images
The images used for the site were made up of JPEGs and GIFs. The images found in the “recent_news”  and in the “what_were_saying” div are made up of JPEGs. The GIFs used in the site are the headers to each section, the logo, facebook An image of the gif used to link to the sites blog.button, additional buttons like BUK BLOG, as well as the navigation found in the header and footer.

CSS
Floats
The header and footer use floats to organize their content. By floating the logo (in the header) to the left and the horizontal navigation (in both the header and footer) to the right, they return to the natural flow of the document. The other division to use floats is the “recent news”, which uses float: left and padding: right to organize the content into the natural flow. The other divisions use positioning or a margin of zero to flow the content.

An image showing the class and padding used for the recent news sections, which are all foated to the left.

the id class and padding used for the recent news sections, which are all foated to the left.

Type and Color
The type used in the body is Georgia or any other serif. These are set at 12px for the body copy and 16px for the <h2>. The colors used are minimal. The body copy is set to a gray color, letting the interchanging cyan and black for the hover states call the viewers attention.

An image showing the alternating colors used on some of the buttons on the site.
The original blue color and it’s black hover state on two of the buttons used in the site.

Blog #6: Final Project and Web Inspiration

While researching and gathering visual inspiration for the final project (4 page site), I referenced my digital mood board. This helped to keep focused on what I am aiming to accomplish with the site. Basing a four page site on my statistic, which was hard to stomach, I found to be relatively easy. The statistic I chose involved the ever famous discussions and urban legends involving the worst-of-the-worst fast food places.

"An average person's yearly intake of fast food will contaiin 12 pubic hairs"

Statistic the 4 page site will be based on.

Visuals

Based on this statistic, I’m creating a site that will do what the quote has done, to shock, gross-out, and inform the user. The sites design and content will be directed toward a young-adult male demographic, including high school and college students. With such a shocking statistic comes visuals and circumstances you would only hope to imagine rather than live out. Due to my subject matter choosing the right color palette was fairly simple. Using colors and fonts popularly used by fast food companies will help to connect the two ideas. Below you will see visual evidence through a mood board, of the visual response I aim to achieve through the sites design.

a collage of images and colors pertaining to fast foodWhen approaching a visual solution for the site, illustration would be the most effective solution to first engage the users. At the mention of gross and vulgar illustrations, the style of Ren & Stimpy came to mind with their attention to detail and mangled expressions. By using this style of animation to merge with the content it will engage the viewer and keep them interested.

Web Inspirations

Upon further visual research, this time searching for existing sites for my inspiration, I came across a few that sparked my interest. With the use of illustration being a large part of my design, I searched for sites that were designed with the same direction in mind. The first site I found used a large image on their home page to engage the viewer. The image was not only used to interest the viewer, but also utilized this to place it’s navigation around the image. This helped the user to view the entire page while analyzing the image. Their use of typographic style also felt like an appropriate direction for my own site.

home page for pioneers.comAnother site which I felt used the illustrative aspect in a subtle but effective way was the Code Slingers Challenge site. This site uses illustration to engage the viewer and helps to further the sites concept by using western style silhouettes. The contest info is found bellow the sites illustration which is visible in its default window letting the viewer know that there is more than just a nicely done illustration. I found the use of imagery to house the content interesting and effective. With this in mind, I will try to incorporate illustrations and content that live on the same page without being too over powering.

home page for the Code Slingers websiteNavigation plays a large roll in a sites appeal. It be easy for the viewer to understand and use. Even the simplest things give us as designers, another chance to captivate the user. The Cambrian House site, though straight forward, uses hand rendered navigation for its site. This hand-rendered approach is interesting and fun, whicvertical navigation from Cambrian House websiteh keeps the viewer clicking based on the visual alone. The majority of the people on the web will “judge a book by it’s cover” making it important to get their attention right away. Interesting navigation will give them a reason to click and to also assume that the page they’re going to will be just as interesting and fun.

With these things in mind, creating a unique and successful website will only be a matter of execution.

Blog #5: Single Page Designs

single page website design at its best

The point of designing a single page site is to limit its size and make manageability simple and easy. We’ll take a look an example of both extremes and examine what makes them great or less than okay.

image of the Volll single page website's main pageStarting with the good, I’ll be examining the Volll website. This website’s usability helped it to stand out from the rest. The site designers took the concept of what is found above-the-fold and produced a single page site that still gives the illusion of having multiple levels of depth. Each navigation link takes you to a certain part of the page, who’s information is found within the default display window. This makes it easy to get the content you need without having to search through unwanted information. The site’s navigation is ordered in correlation to where the information is found on the site, giving the user a map of the page from top to bottom. The sites content has sufficient contrast and has an established sense of hierarchy, making it easier to find what you want to know about the company. The site also has hints of interactive features which make the site engaging. Though many websites today are utilizing flash components, this sites approach isn’t too over powering. This is important to remember since the content should be the most important part of the site.

Volll's sections within its single page websiteWith the cooperation of these features, the site is cohesive and uses the single page website concept in a functional and interesting way, proving that single page site doesn’t have to be boring.image of Design by Dave's single page website as seen in the default browser window

single page website design at its worst

Now on to the less successful use of the single page site concept. The site known as designedbydave.ca fell into the other extreme of inconsistent design. This site uses the single page concept in the most literal sense, only giving the user a vertical scroll bar to navigate through its content. This is especially evident due to the lack of any navigation. The information found above-the-fold (default window) hasn’t been considered since the composition is off and is cut off. The type here is also extremely large in scale compared to the rest of the page.An image of the Design by Dave's scale issues Since manageability is part of the reason single page websites are used, it’s confusing to find that some of the links don’t work or are inconsistent in their visual approach. An image of a non functioning link found in the Design by Dave single page website.Contrast is also a problem when it comes to the content due to the gray type captioning the images of his work. It also seems that certain compromises were made with the links in blue in terms of contrast since they are surrounded by a dark gray box. This seemed to be an easy way of avoiding a contrast problem that could have been resolved in a way that isn’t so obvious.

These inconsistencies could have been resolved in a more appropriate manner to unify the site as a whole. The lack of navigation also seems to be a decision made to save time but may hurt his usability if more content is added later on.

 

The Avett Brothers websiteImages of The Avett Brothers three visual choices on their website

In regards to our last exercise which involves redesigning the website for a band of our choice. For this exercise I’ve chosen to redesign The Avett Brother’s website. Their multiple page website has an abundance of content ranging from an extensive bio to detailed tour schedule. They could benefit from a one page site for a multiple reasons. First, this site has the option of changing its visuals and graphics which is unnecessary and slows down the downloading speed, frustrating the user. Using a single page site design would also simplify the navigation and make manageability much easier since their band has gained popularity over the past year.An image of the horizontal navigation used on The Avett Brothers' site

By consolidating some of these components and directing certain links to new windows, the site will become less congested and more user friendly.