Latest Entries »

Advice!

Reflection

If I could go back in time before these last two web classes, I would first off tell myself that the quizzes are worth 100 points!!! They can really screw things up in a hurry if you are not aware of it. Study very hard for these (aka *do the practices exercises in the book) and read every page in your book. Do not even think about starting a photoshop comp without opening a 960 grid .psd file.

Web is completely new in comparison to any other design class in the program, be ready to put in a lot of time in order to understand this new language. Try to copy and paste from your other demonstrations as little as possible because learning how to type up your mark up from scratch will help you to learn it much faster. ***Dreamweaver is a crutch!! I hate hearing it because I love dreamweaver but its true, the program does offer a multitude of short cuts allowing you to dodge the learning process of mark up here and there.

Also know that the world of web is always changing and staying up to date with what the latest technology and trends that are being offered in the world of web design. Practice as much as possible and read what other designers are testing and how they make it work.  If you have trouble doing something with page layout or the building of the CSS, look it up. Their is so many questions that have already been answered online involving trouble shooting issues with mark up. Also remember to take your time with your mark up, do it semantically from the beginning and do one part at a time until it works the way you want it to. One little thing that doesn’t validate right can cause a world of trouble for the entire website. (It’s always something very small like a closing or a missing “;”).

Tools of the trade

These are the must have resources that are available on the web for your benefit as new web designers:

Nathan Smith 960 grid layout

HTML Validator

CSS Validator

Some kind of Screen grab add on

and Research!

All in all the web has any resources you will need involving web design you just have to look for it. If you think you have enough time to build your working site, try to give yourself another extra day on top of that. Problem will come up and things will go wrong, push through it and sleep when the term is over. Best of luck!

HTML5 Revisted

HTML5 audio and video

This new feature of HTML5 is one that easily allows us as web designers to embed or directly into our html mark up as if we were doing an . This new feature is going to replace the need for users to have to download other extra media players in order to view video or listen to music on different sites. The even cooler thing about it is that we can have full control of what we what the audio or video to do. You can control the play back feature of the media type, when you want it to start and if you want it to start over and repeat. You can also set up a pause button and the ability to seek through (fast forward) the video or audio just like the media player today use. All this can be done to make our very own media players directly in our html, with control in our hands without the need for external players.

readwriteweb.com

developer.mozilla.org

inwebson.com

HTML5 canvas

Canvas is a feature that HTML5 offers that allows us as web designers to add 2d element directly on the page through html. I could draw a blue box in the background of my site rather than embedding it or creating it with css. From what I have read, it is relatable to the programming of a game design. You basically tell it what color it is and where each point of the element will be located inside of a beginning and an end tag.

This features most basic purpose is having the ability to draw something if needed on the fly. This first site I link explains in detail all of the tools that can be used with the canvas that we have available to us in our adobe software. Things like gradients, opacity, paths, text, clipping, even texture are all here to use. This feature has give us another option in the design process while adding to the saying “Their’s always multiple ways of doing something.”

project.joshy.org

html5rocks.com

w3schools.com

Empire State Recordings

This is a site that I came across that uses html5 to layout not only their header and footer sections but also a nice layout of music players for different songs. The website is very edgy with its opening feature image and experimental type, but the coolest feature is the music player layout. It is a jQuery slide show format with ten slides of six different featured artist from their record label. They have used the play/pause button as well as a nice volume set up with options of mute, half and max. The song downloads directly from the html when you click the play button and display the percentage of download to that point. It seems very fast, effective and easy to interact with.

HTML5?!

What is HTML5?

Moving forward into the future of web development is the next update of HMTL. HTML5 is the next step in designing for the web. As designers and developers we use the behind the scenes mark up as a language to display websites. HTML5 is going to hopefully eliminate the need for external plugins and downloads that we rely on in our layout designs. There has not been a major HTML update since 1997 with the release of HTML4 and because of that add ons have been created to keep up with the ever-growing demand of technology. The goal with HTML5 would be to write certain things like video tags directly into the mark up eliminating the use of media players and other external downloads. The only main drawback of HTML5 is that as good as it all sounds, it is not ready. Certain browsers (ie) cannot read it now and other browser require certain tweaks to get  your design close to what you wanted. Other problems include the language itself is not completed and media licensing is another issue?

Whats the difference?

XHTML 1.0, HTML 4.01, or HTML5? After reading up on some of the difference between XHTML 1.0 and HTML 4.01 it seems that HTML5 is thought of as a “pure” html, this being the fifth update of this pure category. Certain things like now having to use closing tags on web apps that can be used across different devices and offline storage which can allow access to data without an internet connection. Also the semantic language is suppose to be more advanced with new tags for describing the different types of content.

Topic Research

Article 01

This article was found on planetoftheweb.com and was extremely informative in pointing out the pros vs. the cons of HTML5 today. The descriptive titles all explain how great HTML5 is going to be as far as those new possibilities it will open up, but it does touch on the usability and how it still has a way to go before it is widely used by all designers.

Article 02

In this article found at switched.com the author talks about why HTML is so important and why we as designers need to care. He says that HTML5 is going to be the future of web design whether we like it or not and it would be best to understand what it can do in the future.

Article 03

This last article is on focus.com and seemed to cause some controversy in the comments section on HTML5 putting flash out of the game. The article talks about the great things that HTML5 has to offer as well as a nice diagram design of usability stats for the different browsers.

HTML5 in Action!

So my first impression of this website was wow… thats a lot of jquery. The whale in the background is swimming around and out of the frame, and a song is playing in the background that is controlled with a toggle on and off at the top right of the page.

After opening firefox I see that the html and css are nested inside of an html class that is using one of the new html5 feature known as canvas. Other things such as image tags in the html are pure without a source and pretty easy to follow semantically.

jQuery!

Overview

As web designers jQuery is another rapid evolving tool placed at our disposal to help create new and exciting elements in our layouts. jQuery is labeled by the tagline “Write less, do more.”, This comes from the perspective of Javascript that is trying to make the life of scripting more usable for us web designers. The people writing these scripts are giving us are pre set plug in’s that can be altered and adjusted to serve the needs of the designer. The development of this ability is very new and ever-changing, with better and more effective plug-ins being released almost daily.

Pros of jQuery

We have the ability to access short scripts from a library of JavaScript that is pretty easy to understand and very easy to use. Making certain things possible in our digital world that could not easily be done in the past is what this boils down too. Because it is so new and rapidly evolving people are posting the latest and greatest jQuery plug in’s as soon as they can to share with us what could work for our design. It is completely free for all who are interested in experimenting with what the community has to offer.

Possible Cons of jQuery

With these plug in’s being so new, we as designer are basically designing with beta versions of what people are releasing without much testing. As wonderful as these plug in’s are they could present more trouble for web designers in actually getting it to work for the purpose we have in mind. Some plug in’s also are not exactly professional material and could potentially hurt the overall look and feel of your design by being under developed. Also the sheer fact of keeping up with the latest plug in’s can be very time-consuming for the addictive designer wanting the next best thing.

Five current useful plug in’s

Tip Tip

This first plug-in Tip Tip could add some very engaging elements to a website that would act almost as pull quote in a publication. The design of this script is very smart, it will adjust to the edge of the your browser and even flip in orientation if needed to suit a particular design. Not only that, it is full customizable through your CSS making its effectiveness wide open for any design.

Roundabout

Roundaboutis a plug-in that

I have seen in action before, it really makes for a great feature area on a homepage of a portfolio/gallery etc. The days of only seeing one main image then waiting a few second for the next could be slipping away. Roundabout not only adds interaction to the designers site, it also gives the user a hint of what the next slide is going to be.This could keep the element of surprise at a minimum for the user that is trying to locate something familiar or enjoy the back and forth ability of entertainment.

Image Viewer

This image viewer version is one called Vox View and is very effective for showing off any group of images. It allows for a hover over light box that will illuminate the image you are about to select. From their the image goes full screen and can be flipped through back and forth in a full screen view for the rest of the gallery. It is a clean organized grid system that can add a great first impression to the gallery of a web layout showing off there work.

Charts and Graphs

This plug-in is one that I have also seen before in sites that I visit pretty regularly. App Sheriff created this chart or graph script know as Dygraphs of information of any kind that can be tracked for accurate accounting of that subject. It not only updates to current information but acts responsively for which ever device the user would be accessing.

Log in/sign up

This plug-in is one that I have looked forward to learning for some time now. I have always wondered how forms on pretty much every website wanting your business is made. This script written by 9 Lessons is a fun log in for user that would be a returning subscriber or a new user all in one.

Art Goes Everywhere

This site is a basic one page layout for a screenprinting shirt company called Art Goes Everywhere. The website is very simple offering no interior pages or even navigation. However the layout that they do have is working very well for its purpose. They used a type of Image Viewer Javascript similar to the one I talked about above. The top left box is a back to home link and the box to the right of it is a breif description of who they are and what they do. The jQuery has a hover lightbox that activates when you mouse over either box and each box contains its own scrolling menu of variations of that particuar design. Meaning if you select any box other than home and info you will scroll through only that menu. If you close it when you are done you select another box and you can scroll through its variations. Overall this website works 100% for what it was created to do. The simple grid layout keeps confusion at a minimum for the user, while offering a very effective way to get the produce in site as fast as possible. No crazy distraction competing for hierarchy while the organization of the site paves the way.


Project 01- Mood board

Setting the mood…

In this first project I decided to go in the natural, earthy look and feel. I want to design this website with an out doors/rustic emotion in mind. Work in this type of color range can allow for this type of mood no matter what I decide to go with as my concept. Photography is what I have in mind but a mix with the right illustration style is not out of the question. Vector or silhouette graphics would be outside on my normal design approach so experimentation will take place. Out doors, earthy, rustic, all describe the feelings I want to portray.

RESPONSIVE WEB DESIGN

Ingredients

After research and exploration of responsive web design I learned that the ability to create response in a website is not done with simply one line of mark up. In order to make a website responsive you must use fluid grids, flexible images, and media queries to make it work correctly. These three ingredients make up the solution for a responsive website.

Applying what I know

Now that I have a better understanding of how responsive web design works I would be able to apply this set of changes to my final project from intro to web fairly easily. My site was one large fixed image to begin with but now with slight change in layout and a vertical navigation my site could respond to a tablet or smartphone.

Flexible image

Making my image a flexible image will allow for it to scale all the way down to the 320px size to be displayed on the smartphone platform. The change in format would fall into place  as the type stays the same through out in size however it will expand and adapt as needed while the format gets smaller.

Interior pages

My interior pages where one column layout to begin with so the change in line lenght would be the only response needed to make the interior pages adapt to each format.

Post #8 – Headings and headlines

Review

After reviewing the top 10 web writing tips in our book Interact with Web Standards, I was reminded of how important rule number 5 really is. “Write killer headings” is the the rule. When writing your headings remember that task-focused readers don’t actually read. They scan. Also headings are not the place to be clever in your play on words, be clear. Lastly use keywords as much as possible without taking away from the flow of your content, this will allow maximum findability  when user are searching for related sites.

Headings

I found a good descriptive take on this subject in an article from 4 Syllables.com titled Headings and labels: accessibility for web writers, part 10. Dey Alexander the writer of the article, also touches on the fact that people with disabilities really benefit from descriptive heading as well.  People suffering from short-term memory lost and vision impairment can’t get the information quickly for a noted overview of what is to come in the content. The writer also has a list of 9 very good tips on how to write better headings for the web.

  • Clearly describe the content or purpose of the page or article in the main heading
  • Write sub-headings that describe, summarise or clearly label each part of the page or article
  • Avoid teasers or cute, catchy phrasing that may not be clear to all users
  • Use keywords or keyword phrases, particularly in the main heading
  • Avoid jargon, acronyms and other shortened forms unless they are familiar to your target audience
  • Start headings and labels with distinguishing information, so those who only see or listen to the first few words can distinguish it from earlier and later headings
  • Take care using questions as headings as they can push distinguishing words away from the start of a heading
  • Be concise. Headings that wrap to a second line may be harder for some users to see or understand
  • Write in sentence or title case. Uppercase may be harder for some people to read

Headlines

Another good article that I found focused on the copywriting of headlines. The article title How to write headlines that work can be found at copyblogger.com. The writer of the article, Brian Clark, talks about headlines in web possibly being your one and only shot to hooking a prospect reader. He says that great headlines can do more than just grab ones attentions, if your good you can communicate a full message that would lure your reader into the text. The promise of some reward or benefit to the reader is the essence of  a compelling headline. The write sets out a list of eight tested headline catergories that have shown a take in action by the reader and an increase in sales.

  • Direct Headline- Pure Silk Blouses – 30 Percent Off
  • Indirect Headline-  Fresh Bait Works Best
  • News Headline- Introducing Flickr 2.0
  • How to Headline- umm… oh yes… 
  • Question Headline- Do You Close the Bathroom Door Even When You’re the Only One Home?
  • Command Headline- Put a Tiger in Your Tank
  • Reason why Headline- Two Hundred Reasons Why Open Source Software Beats Microsoft
  • Testimonial Headline- “I Read Copyblogger First Thing Each Morning,” admits Angelina Jolie

Visuals

Website

The website I selected to dissect is a church eastpoint that was recently modernized. I enjoyed the fun layout of everything being so three-dimensional floating on top of the background image. The boxes used make the layout very easy to navigate through, while the contrast of the color palette complements the powerful imagery.

Wireframe

HTML

  • Inside of the body is the division container that holds two ID’s title header and main, and two script sources.
  • The header contains the brand mark in an H1 and the navigation inside of a menu ID. This menu ID holds the unordered list and the search bar which is a form ID.
  • The main is containing the feature the blocks and the footer.
  • Inside of the feature we find two anchor tags linking two separate relative links.
  • Inside of the blocks are the three sections title block, mid block and ml block.
  • These blocks contain absolute and relative links as well as another form ID for signing up.
  • The footer contains an unordered list for the footer menu and some copy.

CSS

Header

Diving into the css we find that the background image is a .jpg place inside of the body. The H1 in the header has an absolute position and the menu containing the navigation and search box is floating left. The navigation itself is made out of sprites in the same way that we learned in class, top and right margin is applied as well as top and left padding.

Feature

The feature area containing the two  links are href links that take you into other parts of the website. As for the overlapping of the feature photo with the background images, I believe it was just sliced out of a Photoshop comp to appear as if the mountains in the background images are combining with the feature images mountains.

Blocks

The block ID’s have absolute and relative links in them as well as p classes and a classes for the style of that particular body copy. Clear both is applied to the division holding all three boxes and float left is applied to each of the boxes. Margin and padding positions the boxes content.

Footer

The footer hold the secondary navigation set up in an unordered list with another sprite system. There is also the facebook absolute link and the licensing relative link. The footer has a clear of both on it and top and bottom margin for placement.

Post #6 – Visual Research



After completing my visual research for this final project in web, I have decided to analyze a few of the possible directions for designing my own website. Seeing that my website is going to be built around the concept of vision these website up for review are mostly in my area of research.

High Street Consulting Group
www.highstreetconsulting.com

This website stood out to me as a great first impression. After looking through a lot of complex and even cluttered website the simplicity of this website caught me. It is a small five-page website to begin with offer the site name/brand in the top left corner and a balanced navigation to the right of that. The feature well has a good blend of image and white text on a full length grey bar introducing you to the site. Thin grey lines separate the links and the copyrights info from the feature well. This website overall has a good clean balance with good use of white space.

Correct Vision
www.correctvision.com

This website overall was one of my favorites. The layout is very playful using a concaving format for the image, navigation and category images. I also liked the use of the gradient to make the emotion of the home page feel light and opened. Good use of type on image working with that difficult contrast and the brand mark balances the unique layout by being place in the top center of the site.

Atlanta Vision Institute
www.atlanta2020.com

This was another very unique website I came across when doing my research. I looked up the active website and found something very different however than this example. I think this might have been a mock-up for a site redesign for The Atlantic Vision Group. Either way the site overall seemed very crowded, with a lot of different images taking up most of the real estate this homepage had to offer. Certain elements on the page however gave me inspiration to blend and section off imagery in order to get away from a box feeling. As busy as this page is, it is not sectioned off visually with any hard edges which helps with its concept of being light and airy for vision correction. Also the header on this page seemed very different in placing the brand mark on the top right side of the page. The navigation also creates an interesting liquid shape that carried from one side of the page to the other.

Best Single Page Website
After browsing through both of these links from blackboard (30 Outstanding Single Page Website designs, Single Page Website Designs) I was amazed at how every one of these single page sites were so unique. I selected a handful of sites that I thought were done very well as far as layout, style, and overall first impression. The 8 that I thought were very successful overall include Deluge Studios, Visual Box, Fish Marketing, Silverback App, Kino, Message in a Bottle, Daniel Mortin and Reverend Danger. I’m going to say that of the eight my favorite was the Visual Box single page website.

Visual Box is a flat dark background site with a minimal use of a grey typeface. I believe they did this because the site is completely meant to draw your focus to the imagery of all of their past project/clients. The single page site is made up of  all these different divisions that take the user from the navigation bar (thumbnail image) to the project using fragment identifiers.

The other thing I noticed about this single page website was its well planned layout. When I was just scrolling down the page I noticed that the projects/client projects were not set up in a standard “title then image format” they actually used a format of “Main image, title/copy, more images.” This did make things a little confusing at first because the project before was right up against the next project. However if you focus in on only one client at a time the format they used occupies the exact real estate of the full frame website above the fold. Also the link in the bottom right corner always allows you to return back to the navigation bar at the top of the page.


Not so great single page site

The single page website that didn’t seem to work very well for me was the ChatTank site. It is made of composite photos and type. In the opening home site above the fold, I included a screen shot with my scroll bars to show that it has a horizontal scroll of only a few pixels and seems to be a mistake. When I activate the horizontal scroll the type only shifts a little to the right then back into the center. When you scroll down everything is moving at a different speed in the transition between pages and the image composites seem unprofessional with hard edges on everything. The Nikon camera is flipped making the brand appear backwards as well.


As Cities Burn
This is the band that I have decided to build a single website for. They have been one of my favorite bands over the last 6 to 7 years and are pretty great. They are an indie/post hardcore band that has been around since 2002. In that time they have been signed with Tooth and Nail Records and released three albums.

Son, I Loved You at Your Darkest (2002–2006)

Come Now Sleep (2006–2008)

Hell or High Water (2008–2009)

Being a fairly big band I was surprised to find that they do not have an official website. They have many other site where you can find information about them for ex.

www.myspace.com/ascitiesburn

www.toothandnail.com/artists/9/As_Cities_Burn/

www.purevolume.com/ascitiesburn

www.facebook.com/ascitiesburn

I think that As Cities Burn could really benefit from having a central single page website that fans could use for all categories of information in one place. Purchases, biography and upcoming shows could all be located in one well designed platform that fans would enjoy using.