Blog Post #5: Advice

Back in time…

Ah, web design. In my year of experience with web, I had many moments of love. An amazing thing about Web Design is that beautiful, wonderful, and euphoric feeling when you get something to work right. But I had many…many moments of sheer frustration and hatred. Like when you stare at the screen for 2 hours not knowing whats wrong, and you realize you forgot an equal sign. Or spelled “decoration” as “decortation” and wonder why I bombed an exercise so hard.

Attention to Detail

So if my magical Harry Potter time traveling powers ever develop to their full potential, I would go back in time and tell myself that attention to detail is one of THE most important things in web design. And that is not even speaking in design terms. Coding needs a lot of care. One tiny forgotten semi-colon or misplaced quotation mark will send you into a panic as to why your page isn’t working. But an amazing tool that has been my best friend has been the Validator . It has solved many problems of mine in a matter of seconds, or given some amazing clues as to what in the world is wrong with my code! So learn to love looking at the website.

Read!

I have never been a textbook reader. When a professor gives a reading assignment as homework I normally interpret that as a free night. Even though we get lectures about things in the book, reading beforehand and practicing before hand makes class a lot smoother. Classes where I was read up before hand always went smoother, I got lost less and retained information better from the lextures. Also, BUY the book. Web was not the class to think you would not need the textbook. It has proven to be an invaluable asset in making web smoother.

README!

Do not procrastinate

I have been a chronic procrastinator for years. Web broke me of that pretty quickly. Many times I tell myself, “Oh I just have to build 3 pages, that won’t take long.” Well, 14 hours later when I’m still staring at my screen with tons more coding to do and having a nervous breakdown because there is no chance in Hades of me finishing in time, I regret not giving myself enough time for web. So this is one of my biggest recommendations. Be diligent. Give yourself schedules, because the projects will take you a lot longer than you anticipate.

Design Using 960

Back when doing web comps before I just made a photoshop document and did whatever. Well, a huge asset and tool has been 960 grid. Its an amazing download to set up your grid system in photoshop. Designing in there is a perfect way to comp out a website and already have a good idea of how it will look on screen.

In Conclusion…

I could go on and on with advice for going into web design. But by reading, practicing, and working hard web will be a smooth ride. It will have its moments of frustration and pure insanity. But I’ve gotten through web with my psyche still intact (most of it anyway).

Advertisements

ADV-Web Post #4: HTML 5 Revisted

HTML Canvas

The canvas tag is a new tag that is introduced in HTML 5. Researching this tag was harder than I thought, not because it was hard to find information but because of how amazingly distracting it is. This tag can be used for quickly creating and drawing graphics using scripting. The Canvas tag deceptively looks like flash, but its not. While looking at examples of sites using this tag, I found some really fun stuff. A lot of the examples I found were interactive games. This one kept me busy for a little while: Asteroids

The coding

Now, the canvas tag is just a container. It does not actually generate the graphics for you. The canvas tag contains the graphics. You have to use scripts to draw the graphics. The markup for canvas is slightly similar to an img. It wants to have a height and a width, but it does not seem to need any alternative text. Giving the the element a height and width gives the scripts added to the tag an area to generate game graphics, or even graphs.

Some of its tools

At its simplest Canvas is a pixel-based drawing tool. It comes with a small variety of drawing tools, effects and transformations. You can draw with basic shapes, paths and curves. As well as using shadows, compositing and transparency. And of course, you can load an external image by URL.

HTML Audio and Video

HTML5 Audio and Video allow you to put audio and video onto a webpage without the need for flash. By getting rid of the need for flash, webpages can load faster and can be seen by users without the latest flash player.

From what I understand there are some issues with these tags. It comes down to file types. Certain web browser companies only support certain audio and video file types. This can get annoying for using these tags because you have to be aware of what video files will not work on what browsers.

Implementing these tags seems pretty simple (especially compared to the canvas element). For a video tag you need to use a src attribute. But with these you need to include controls. For an audio tag, it is pretty much the same. You need a src and some controls.

What Are Controls?

When trying to research what controls are, I found the there are many optional attributes you can add to a video tag. Audio tags seem to work in a similar way. These include:

  • autoplay: Specifies that the video will start playing as soon as it is ready
  • controls: Shows play/pause buttons
  • pixels: Gives the player a height
  • loop: Determines if the video will loop
  • muted: specifies is the video should be muted.

Adv-Web Post # 3: HTML 5

HTML 5! THE FUTURE!

What is HTML5?

HTML 5 is the newest version of Hyper Text Markup Language. It has been many years since HTML has been updated. Html 4 came out in 1997, and now in 2012 we are finally getting an update. For years HTML 4 has been tweaked to create engaging plug-ins to make websites stand out from each other. A downside to plugins like, Flash and Java, is that they really drained battery life out of mobile devices. Apple even no longer supports these plugins for some of their devices.

HTML 5 is creating new ways to eliminate some of the need for these plugins. It allows for media to be placed in a website without the need of flash. All you need is the new elements and .

Contrasting HTML 5 and 4

This is a layout example of a simple webpage in HTML 5, from This site

HTML 5

  • Websites can better handle errors in code with strict parsing and lexing rules.
  • Has new multimedia code elements audio and video, which adds a new level of customization to webpages.
  • Also new tags for easier coding, including nav and footer.

HTML 4

  • Doesn’t handle errors well, because of not having strict parsing rules.
  • No multimedia support without plugins.

Drawbacks to HTML 5

As awesome as HTML 5 seems with all I’ve said, there are some disadvantages. According to http://planetoftheweb.com/components/promos.php?id=556 Its only supported by modern browsers, so sorry Internet Explorer users. There are also some media licensing issues, since different media has to be compressed into different formats for certain web browsers. So that adds a bit more work.

Looking at HTML 5 Websites

I did some looking around and the website I decided to critique is Eye Styles’ website. The first thing I noticed on the site is the really interesting way the content is being displayed. Still being new to HTML 5, creating a graphic like this that functions as a way to organize content seems very daunting. Especially when I only really know how to use HTML 4. This is a neat way to see things that HTML 5 is capable of doing.

As well as being a neat example of HTML5, Eye Styles is also a fantastically designed site. In terms of basic design terms, the colors contrast nicely and harmonize together very well. And there is a strong structure to the site, but still maintaining an interesting layout. Its unique to look at and has some really nice small touches of interactivity. Shifting through the content on the homepage, like I mentioned before, is really fun to do. And when the website scrolls down to become more structured even the areas of content have hover states!

Adv-Web Post 2: Jquery

Jquery is a great way to make the user experience on a website more enjoyable. It can be used to help condense complex navigation into manageable sections, organize images in fun to navigate sliders, and make things just look really neat! Its also seems pretty easy to implement into a design since there are tones of tutorials and plugins that teach you how to implement Jquery into a website.

As great as Jquery is, there are some cons. Jquery has some issues with older browsers. Not everyone out there has the latest version of Firefox or Chrome. Internet Explorer 5 and under still exists. So if a webpage is designed completely around Jquery someone using a not compatible browser, the user will not be able to see all the work that went into your website. Here is a good source to see what browsers are compatible with Jquery, and which browser versions are not. Also, lots of Jquery can really slow down load times, and can be a hindrance for users with slower internet connections. And devices like phones don’t support it, so Mobile users cannot see all the neat things Jquery can do.

Plug Ins

Looking around the web at some different Jquery plugins, I have found some that I consider really useful, some for presentation purposes and others for there practical application. Below are the five that I find really good.

Jquery Notes

This plugin lets you highlight certain areas of an image, and add notes which activate when they are hovered over. I can see this plug-in being very useful for adding content to an actual image. For example, if a client wanted different parts of an image detailed out. Notes could be added to specific areas of the photograph.

Jquery Roundabout

Jquery Roundabout is a plugin that lets you organize images into a “carousel.” Users can rotate through a large amount of images. It seems like a great and stylish way of displaying images. Not only does it look really nice with its animation, but its a strong practical way to organize a large amount of images. It will help save space in the layout of a webpage, and make for a really nice focal point on a page.

Uniform

Uniform allows you to style your forms with certain themes. You can control the feel of your forms by even allowing for checkbox customization. I can see this becoming a useful plugin for presentation purposes on a website. A clunky form can become something really special in a page.

MegaMenu

MegaMenu is a plugin that seems to put sub-menus inside of main navigation items. This plugin, or a different version of it, seems to be used in many websites. Tons of sites have large drop downs and break navigation up into sub-categories.

Booklet

Booklet is another presentational plugin. What this does is allow you to display images in a “book.” User can digitally turn pages to view the images as if they were looking through a physical booklet or magazine. This could be useful for displaying a digital magazine or a digital catalog.

Jquery Website Critique

Pikaboo is a website that seems to run and rely a lot on Jquery. Its a pretty fun site to use. There are a lot of elements that have neat animations that make the website really engaging.

The site has two navigations, which both have some plugin attached to it. The left navigation causes a bar to load across the screen and display some information. The bar fades into the screen and the background dims when these links are clicked. I feel this is a really nice way the site displays their content, and its a good way to not take away from focusing on the imagery which is centered in the layout.

The imagery is what is tied to the second navigation which is on the bottom of the site. When this is clicked the images change without loading a new page. The actual portfolio pictures are in what seems like a vertical Roundabout. But instead of clicking images you click a small arrow to scroll through. Its a good and fun way they have layed this out. My only issue is, at first I did not even see the arrows. My second visit to the site is when I discovered that I could scroll through the images.

Project #1 Design Post

For my project, I did a little looking around for ideas and what to focus the look of my site on. I looked at the article Web Design Trends of 2012, and saw that big vector art was one of these trends. Vector graphics and illustration are one of my favorite styles, and something that I really want to add into my portfolio. So I decided to try to go into this directions.

When doing some thumbnails I experimented with a Bauhaus style a little, before transitioning into fun vector creatures and fake environments. This is an aesthetic that I always really enjoyed, and have tried out in the past. Also, I really want more vector illustration work in my portfolio.

For my mood board I was mainly focusing on finding inspiration for the illustrative style I was going for, as well as a few texture ideas for some nice accents. My color palette is going to be light and bright colors, I really want to use green and purple (and other colors to go well with them). My goal for the site is to have a really fun, engaging space for CSS Zen Garden.

Photobucket

Responsive Web Design

With the rise of tablets and mobile phones, browsing the internet required some kind of change to adapt. Responsive web design was the answer, which is when a web page will adjust its layout based on screen resolutions.

My Webpage

My webpage’s design was made to fit in the standard 960pxs wide. The design fits really well in a large resolution desktop screen. I came up with some ideas to design the website within a fluid grid system, which is described below.

original website design

Tablet Design

For the tablet sized design I don’t really think the page needs any dramatic change. I feel the structure of the page could already work for the smaller resolution on a tablet. But to make a nice change, I would eliminate the design on the side of the webpage. So as the page scrolls down the only background seen would be the container background.

Photobucket

Mobile Smart Phone Design

For the smart phone design my website concept works pretty well. Design wise, the layout will adjust so the 3 column design will stack into a single column. In the desktop computer design, the background of the page is visible as you scroll down the site, but in the smartphone layout as you scroll through only the container backgrounds would be seen, which is similar to the tablet design. This way the over aesthetic appeal and concept of the webpage stays intact while comfortably fitting on a phone screen.

Photobucket

Blog Post #8: Anything we want

Learning From Video Games

Well to keep with the theme of my final project, I found an article titled What Web Designers Can Learn From Video Games. From interface design, to graphics, to creating an engaging environment web designers can learn a lot from video games.

Usability

Websites and video games both have to be easy to navigate and be “noob” friendly. The article explains that video games often start out very basic. With tutorials that show new players what to do, instead of telling them. Web designers can learn that by using graphics to explain ideas and break down information into easily digestible bite sized pieces, will make their website “noob” friendly.

Photobucket

Engaging Graphics

The article uses video game loading screens as an example for how games can engage players during downtime. Websites can take inspiration from this to create an engaging environment, not by making a full loading screen. But by using small graphics as loading timers or having a page with a custom cursors.

Icons

Video games use icons to make menus easily navigated with recognizable images. While, websites cannot throw icons everywhere for their menus, but using consistent images, headline graphics, and bullet points can bring visual interest to a page, and make the website easy to navigate and break up content.

Photobucket

Menus

Games use carousel menus, slider menus, pivot menus, and context menus to help organize content to be easy to find and direct players to find what they want. Carousels are a great way to format a large amount of content, and are fun for users to use. They’re also really great for users that are browsing with a tablet. Sliders make long intimidating menus easier on the eyes and aren’t intimidating.

Photobucket

Web Blog Post #7: Webpage Dissection

The structure and syntax of a website is a very important feature. Being fairly new to web design, I’m still learning and figuring out the best ways to format HTML and CSS. Opened Hand is the website that I decided to dissect and figure out how it was built. It has a very streamlined and simple layout and approach to its design.

Photobucket

HTML

The website looks to be made up of a main Div named “Main Wrapper,” and 8 Div classes that are nested inside the main wrapper.

Navigation

The navigation is set into its own Div Class named “main-nav.” The navigation is built with sprites, and uses background positioning to have a normal and hover state, which is done within the css of the website. Instead of the navigation being one graphic, using firebug it looks like each link is its own graphic.

Photobucket

Photobucket

Typeface Choices

The website does not use any @fontface properties to design its website. All the typefaces are selected with the css element “font-family: verdana, arial, sans-serif. “

Website Layout

The content area of the website is build up into 3 main divisions. The “mcblocksinglecol” divison, which has a paragraph and heading tag. The division with the most content is the “midpanel.” It has 5 div classes nested inside, one of which is a clear. Each of these other divisions have their own unordered lists within, and each list item is a link. Finally the other main division is for the footer information. Inside the footer are two other div classes called “left” and “right.” The right class contains two links, contact us and privacy. The left class contains a logo graphic, and trademark information.

Photobucket

Java

The website contains two different script sections. The website doesn’t seem to feature any animation or interactivity. So I had a hard time figuring out what the Java’s purpose is. I went into firebug and highlighted the scripts, but nothing on the website highlighted to show me what the java was effecting.

Photobucket

Web Post #6: Project Inspiration

For my final project for Intro to Web, I decided to do mine based on the statistic that “63% of parents think video games are a positive part of their children’s lives.” So, my website is going to be centered around providing information about how video games positively affect the brain. So, I found a few websites for some design inspiration.

Website 1

Photobucket

The first site that I thought of was the site for Guild Wars 2. I chose this site for how well I think the information on the site is streamlined and kept very uncluttered. A lot of game sites have a tendacy to be visually overbearing. I feel that the designer for Guild Wars 2 maintained the look and feel of the game, but kept the site very elegant and concise.

I want to be able to draw inspiration from how this content is organized simply for my own project, but still maintaining a fun and light-hearted mood. Also, towards the bottom of the page, the way the text is placed next to small thumbnail images is something I want to do for my own website.

Website 2

Photobucket

The second site that I would like to draw inspiration from is the website for The Sims 3. An idea I had for my website is creating a background that creates an environment for the content of the webite to live. The Sims 3 has achieved this really successfully. It does not get distracting, and really compliments the design of the website. Also the background really gives a proper feel for the content and game.

Website 3

Photobucket

The last website I’m drawing inspiration from is Nintendo’s website for The Super Mario Brothers. Why I chose this website is because of some of the patterning used in this website. I wanted to take inspiration from old classic games, and use blocky 8-bit or 16 bit textures and elements for my website.

I really like the treatment on the navigation, and the textures used to accent the navigation gives it the look I would like to go for with my website. The biggest part of this site that I like is the area far back In the main section, where you can clearly see the blocks that make up a whole image. That Is exactly the kind of treatment I had in mind for my project.

Blog Post #5: Single Page Design.

Successful Single Page Design

A page that I feel successfully utilizes the single page concept is Daniel Martin’s portfolio. On first impression, the site is easy to use and visually engaging.

Aesthetics

The site utilizes a simple color scheme, yellow, white and black. These are three colors than can easily be very tough on the eyes, but the way elements are placed within the page leaves everything with comfortable contrast. The background has a subtle texture that gives the site visual interest and pop, without distracting from the content. One issue I have with the way the site is designed, is the line-height used within some of the main content. It gets very large and disjointed.

Photobucket

Navigating

The main reason I chose this site is how easy the page is to navigate. Single page sites can get very long and hard to sift through, but Martin’s organized his content very well.

When the page loads, you’re greeted with a very large “hola,” then you can either click or scroll to continue. Clicking works like a fragment identifier, and brings you to his bio page. There is are two columns in the page, content on the right and navigation on the left. The navigation highlights the section you’re in on the page, and clicking on a link brings you down to the section. A feature that really makes this site successful is the navigation scrolls along side so its always seen. I enjoyed this because you can easily get back to any location on the page quickly.

Photobucket

Not So Successful Singe Page Design

When browsing through the internet for other single pages, I stumbled upon this page.

Aesthetics

Right away this page felt uncomfortable. Everything is set in the browser window to the left, with no content on the right. I feel that the entire space was not effectively utilized, and there is an unbalance that is off-putting. The little text on the page is really small and hard to read.

Photobucket

Navigating

A big issue about this site is that it doesn’t tell you what you’re looking at. Is it a portfolio? Is it a design agencies site? Are these just pictures of random design work? The page doesn’t really tell you. The content, which consists mainly of images and small descriptions are all seamlessly placed. The pictures bleed into each other, and you cannot tell where one image starts and one stops. Clicking the images does not make them larger. There are small links that you can click on that take you to the work, but that defeats the purpose of a single page site.

When scrolling through, there is no navigation. This gets tedious since the page is pretty long. Also, there are really distracting teal triangles that stay on the page. I keep wanting to click on them, but they don’t do anything.

Photobucket

Music Artists Site

The artist that I decided to do was Lady Gaga. Even though I’ve never been too into pop music, Lady Gaga’s music and style is pulls me in.

Her website

Now as much as I love Lady Gaga, I do not love her webpage. On the home page, there are a few links for facebook, twitter and her store. The dominating feature on the site is a long Twitter feed. The main navigation is large and easy to find, and the link’s hover states are bright red. The main issue I have with her home page, is the lack of important content. The majority of the content on the page is a twitter feed, to find anything quickly you have to sift through tweets you don’t care about, and comments left by other users.

Aesthetics

I will say, the site does have a cool aesthetic. Red, black and white are the dominating colors on the page. Each page has black and white a photograph of Lady Gaga for the background. Its not distracting, and even though can be seen through the content, consideration of contrast is used to the text is still legible. I think the darker mood the site matches her music and matches her current style as an artist.

Photobucket

Navigating

The most important information for a musician is their music, and that isn’t even an option in the main navigation. To find the music, you have to click Info, which will load a breadcrumb trail with more options. The links in this breadcrumb trail seem more important than some of the links in the main navigation. Music and News, which are really important sections for musicians, are almost an after thought. In the main navigation, chat and lyrics can be replaced for these two more important pages. So, overall I feel the biggest issues with her site is the amount of navigating you have to do to get to important information and pages.

Photobucket

I think Lady Gaga could benefit from a single page site so important content is quick, organized, and easy to find. Her current site is too disjointed and difficult to navigate, because of how content is organized.