Over the past year, I have been trying to grasp the concepts behind web design. It has been no easy task, and if I could go back and give my past self some current advice, I’d have a lot to say. I would tell myself that no question is a dumb question, and that I’m not the only one who needs something repeated or practiced again. I would also tell myself that it is very important to practice everything on my own, continuing by saying that no one code is going to just fall into my lap and suddenly work perfectly all the time. And then there is the more general of time management, but thats understood. I would tell myself to think of coding as more of a math class, than a design class, and to treat it with the same repetition practices that I would algebra.

I’m sure that if this weren’t going to be available for all of the world wide web to read, I would never admit to possessing these thoughts.  With that said, I would like to potentially have the practices from the book, be more integrated with the class. Now wether that means having the teacher make them due, or me just doing them after the lecture in class, then so be it. I would tell them to take very good notes, and to refer back to the book as much as possible. I would say the book, the teacher, and even your peers are invaluable. I would tell them it takes a lot of focus, but it can be done, and if done well, can be very rewarding. I would say that it is true, but that technical part is only the foundation to the house of web, that design and functionality are the part of the house that gives it character and personality.

The best part about the new HTML 5 is the symantic markup. They have combined common sense with HTML. Instead of using a bunch of div and classes, we are now able to mark things up using there actual titles. THe best example of this is using the symantic mark up <navigation> for navigation, rather than <div id=”navigation”>.  And when you do this, you are also able to use it multiple times, which is awesome. This new mark upi also translates into the css. you no longer have to use the id’s, but now your css would use, (using this same examples) navigation { }. Its a very good new thing to happen to the web world. The only thing that might stall this new happening from sparking and lighting is the weariness of it all. It is so new, it is not yet set in stone. This means that you have to be on your toes on weather or not “footer” is its own div, or weather its <div id=”footer”>

This facet goes not for alll HTML 5, not just the symantic mark up. The browser has to work with HTML 5, or else these things have the possibility of not working. In some cases, they will still work because the browser is able to understand the css is used with a markup. But in other cases, like IE, the website will just not work. It will have no css styling. Each special “thing” about HTML 5 depends on the browser.  For example, the HTML 5 video and audio depends on the browser. Firefow 8 and 9, and Opera can not handle an mp3, while safari can. It is important because even things like an iphone can handle these HTML 5 properties because apple is very aware of HTML 5. Fire fow and Opera also can not handle the AAC files. This means that is isnt quite clear yet exactly how to do things for all browsers, because it is so new. But both fire fox and opera are also able to upgrade. The more secure HTML 5 becomes, the more browsers will catch on and be compatible with it.

Video is another property. Fire fox is not able to handle H.264 files. The interesting thing is, Safari has two types of video files that they can not handle. This is not good because videos have become a part of everything media, the news, entertainment, ect. To have a video source that does not work with these is not only important for the consumer with the iphone, but also for the coder and the person who makes the actual video.

HTML5 seems to be everything a web designer could want. It is described by http://www.html5rocks.com/en/why  as “It is a collection of features, technologies, and APIs that brings the power of the desktop and the vibrancy of multimedia experience to the web—while amplifying the web’s core strengths of interactivity and connectivity.” They say that it is not one single thing.

Its the coding that is different. HTML 5 is more practical and not short hand, but more common sense oriented.

HTML5 does not work in all browsers because they do not have the same standards.

Find at least 3 resource articles/sites dedicated to HTML5 development. Post the link and concisely summarize the content using your own words. Include a screen shot for each.

http://dev.w3.org/html5/html4-differences/- THis is a site that only tells about allllllllll the differences between html 5 and html 4. 

http://www.apple.com/html5/- this is the apple site that tells consumers in the know that all there products support html5. 

http://www.alistapart.com/articles/previewofhtml5/- This site gives step by step examples of  what html 5 has to offer. I like this site because it is easy to read and understand. 

Look for a web site that uses HTML5 and write and critique of the site, look at the site in different browsers and note the differences if any.

http://www.mynus.sk/ This is the site I chose to critique. I think that obviously it is well done, a sturdy site in a of itself. But it also has really great features. After doing all these responsive sites, I have really realized that making a site responsive and making a site well done responsive are two totally different things. This site is very well done responsively. Also, the coolest thing is the drop down menu. It is neat and when you chose it, it has videos and a description. Its awesome. 

This is the selected works, the part of the site that drops down with the videos and all.

 

 

I also think its cool that the scroll bar becomes larger when things are dropped down.  Also at the bottom of the drop down, there is a big x. and I think thats cool because that means you don’t have to scroll back up to “un-drop” the preview. The one thing I don’t understand about this site, is that everything just scrolls down to get to , which is fine, but confusing. It has no navigation, or at least known that I found. I think its cleaver in its wording, clean and well designed, except for this.

 

My website is going to be composed of many different things and themes. I want to try and stylize personal type like I have in the upper left corner. I really like how it looks in the site as a whole and I think it will help get my personalized feel across. As far as my logo goes, i think im going to use a toy mouth in it and I want that mouth to be incorporated throughout my site, like the Einstein guys are in that website. I also like the layout for the menu maybe, just showing a picture of each food and a description. I know that I want that sort of grid thats in the bottom right corner on my homepage. i want that to show my other pages. But on the top, i want a big humorous branding logo just like the baby is in its website.

From everything that I have read/played around with on the web that has to do with java script and jQuery, it seems as though the possibilities are basically endless. The libraries of things on the web are endless, with scrolls, slide shows and anything else you can think of. And the best part is that they are all free. I read off one site that java script pretty much stomps on any browser conflict that might occur. Its nice that on the web your designing for, you can find the exact code you need, so that its almost like your never starting with a blank slate if you don’t want to. I think that it got the same theory behind it as CSS. It is more complicated at times, but given enough time and effort, it seems like it can be mastered just as well as CSS, that it has logic behind it.

The bad part is that I have many a times been blocked from fully experiencing a website because I hadn’t downloaded java script. And when that happened, I would usually just exit out of the website. I’m not exactly sure how this works with a phone. I’m sure it works on some, because smart phones are just too common to not have solved this problem. Especially since responsive website are gaining popularity so quickly. But I don’t know the exact coding needed for them, if it’s different at all. I also read that it makes the site larger, and so in terms of download, it takes longer.

I knew that Java script was the cool animation part on the websites. I thought it was more certain coding that would make certain pieces of your site work the exact way you want. Like CSS, I thought the code would be more general, like padding, and it may be that I’m just not as familiar with the code as I need to be, but all I found were specific cool things that you could do. Nonetheless, they are awesome. My favorite effect, and the one I deem most useful, is the tip scroll over. It is when you scroll over something and the hover pops up with an info bubble. You can even customize the bubble to fit your site exactly. I also saw things like the quicksand rearranging, were it was effortlessly able to rearrange icons, but it is so smooth that it looks like a premade video. I also liked that you were able to design the checkboxes and the writing boxes. I figured the writing boxes for comments and name, email address, and things like that were part of the html, but low and behold, they aren’t. And the different styles of checkboxes, circles, squares, you can design it any way you want. I also liked the idea behind the masonry. Its was described as the equivalent to a float, except instead of horizontally, its vertical. So you can create stacked boxes that don’t have to be the page length to be read correctly. Another one I found was the ability to basically “tag” pictures with names. I don’t know exactly what it would be used for other than a social media page, maybe for a history class to show who’s who? Either way, its neat you’re able to do it.

Examples of awesome java script sites:

http://www.webleeddesign.com/

http://melissahie.com/

www.ted.com

 

http://www.pikaboo.be/ is a really cool site I discovered just by googling java site. I really liked it because I’m always scared of over designing things, and this site dose not over design, but just a lot of cool code that all works together. It doesn’t interfere with one another, just improves each other. It has a floating speaker that floats up and down initially. Then it has a vertical grid of videos that you can click on. From there a screen pops up and fits to the exact size needed. On the other side of the homepage, is the navigation. The nav underline bounces when you hover over it. And when you click on something it pops up. So it never transfers you to another site. Its all just pop ups over the initial homepage. And it didn’t take long to load.

When beginning this project, I had a lot of ideas with what the theme should be. With all these ideas, drastically different ideas, I had trouble doing my mood board. Instead of themeing my board, I chose to style of which I would try to illustrate my page, and in doing so, I found the colors that consistently work best with the type of illustration style. I decided to go outside of my comfort zone and use water color. I decided upon water color with lose line work. This way, I can loosely draw the image and paint it, without it looking like a mess of colors.
After researching this type of style, I found the color palette that works best with this style is deep colors. I don’t necessarily mean dark colors, just rich colors. I also think this would work well with any of the themes I chose.



This Christmas I pleasantly and graciously asked my mother for some sort of smart phone. After all, I said, I was the only kid under the age of thirty that had not gotten my greedy little hands on one yet. Unfortunately, not all dreams come true, my mother kindly responded. In fact, she replied with a cynical grin, that is what an iphone will stay, a dream. Little did I know, I should have added another strong argument to my case, that as a graphic designer, we now have to design website for these devices, and to add to my point, how in the world can I design something for a smart phone, without having it accessible to me?

But such is life. With my amateur skills of smart phones and a tablet, it took me a minute to really understand how they came up with such an idea. But I remembered good ‘ol facebook. When it first came out, and was able to be used on a smart phone, it had a totally different feel then the original site for computers. The experience was lessened by the pinching and zooming, the small text and impossible links. Then they came out with the application. I’m not sure if this is the case, but i don’t think thats responsive web design, so much as it is a whole different website for the certain devices. But even though this is not responsive, it, along with the examples shown in the readings, helped me to fully understand responsive web design and it flexibility.

Having only scraped the surface of how to actually achieve such a design, I can only comment on minor changes I would make to my previously designed website. And to make matters more so, the website structure itself is, less then perfect well say (because this is on the web, I want future employers to think my design career was always successful.) First off, as stands true with most responsive websites, I would have to drastically change the navigation and the branding sections. Instead of the navigation being used horizontally at the top, I would change it to be in a vertical line. whistle

I would also most likely have the heading flexible so that, depending on the measurements of the device, the title might become stacked, instead of one long line. Next issue would be the “animation” directly under the heading. On the computer, it stretches across the monitor and changes in the process. But with a smaller device, like a smart phone, this would not work. The only way it would work is if the user turned the device on its side. But this defeats the whole “user friendly”-ness of the phone in the first place.

I would have to scrap this idea, which makes me unhappy because thats really the only thing this site has going for it. Instead, I think I would maybe add a sound to each illustration, so when you clicked on it, you would hear a whistle sound, or whatever went with that particular illustration. Also, when the measurements hit a certain weight and height, the smallest, I would make everything picture oriented, like the navigation. I would add the illustrations above the word, that way, the user has more room to click instead of a tiny link.

I would have the content remain the same way, in basically a long list, with lots of links back to the top. Even though I would try to make this site as user friendly as possible, I think that people are used to scrolling for the exact information they are looking for.

I think that one part of the website, given the right tools to make it such, would be suitable for responsive web design, and that one part is the positions. I think the field and the helmets, linking to the information, is appropriate for a smaller web device.

With that said, the whole website, responsive or not needs work. But in order to make it a well functioning responsive website, a lot would have to be redone. I just hope that they don’t come up with anything else that can display a website, like a pencil.

 

My favorite movie of all time is “Into the Wild.” I decided to check out the website.  Right after entering the web address, you are taken to the site which begin with a video intro.  The nav is on the top, no matter which page you go on.

  I think that the subjects they picked for each page are very interesting.  The page is very well manicured. After clicking on each adpect of the navigation,  a large background image is slowly scanned across, and then what interestsme most, is that it becomes layered. For examples the background for the “cast” section under the “film” navigation is a beach. They show birds in the sky, still, but they are 3-d.

I think that they took a lot of time putting together the website, just like it took them a long time to make the movie.  Once the background position has scrooled to its final position, each page get a black box and content files in within. This keeps a very consistent look, while still allowing for elaborate backgrounds.

While the page is loading, which is very quickly, suprisingly, a hand written type face displays a message. If your a dorky fan like me, you know these lines are from the movie when he writes a letter to Wayne. But if your not, they are still awe inspiring lines that make you think about the movie, and the adventure.

The only page that differs from all the rest is under “experience.”

 It has no navigation on the top, rather it has a return button to the main page. I belive they chose to do this because they wanted the map to not only be the main focus, but the also want you to think about i t, how long the trip was.

Structually, the site is very sound because each section is similar in layout and grid. The usability for the viewer is clear as day. I think the point of the site is to inspire from the adventure, not confuse from the site. They always say good design is not seen, but this design, at least for me as a struggling website designer, is not only noticed, but also envied.

After searching for hours on end for a good digital video camera that can be attached to the end of a surf board, I found that a “Go! Cam” was the best/most expensive camera. After reading about the camera and all of its special features, I totally want one. But the website as a whole is very informative,  and speaks to the adventurous customers with its deep colors and adventurous photos.
The homepage is divided into clear sections. One section is the top navigation, another is the video, another the side bar on the right, and the last is the footer. All the sections are included in the “container,” which does not use up the full width of the page. 
The navigation is horizontal on the top. It is placed in the same spot for each page for the entire site.
There is no flashy trick that happens in the hover state. The tab changes from gray to black in the background. The words stay the exact same as before.
According to firebug, the navigation, although it takes up the entire width of the top, is floated right. It is floated right while the “go Pro” logo in the left corner, is floated to the left.
Also for the navigation, the coder did not use a div called “nav” but instead he used just an unordered list. It shows me the shortcuts and styles of people that are comfortable with web designing. It just gives a light at the end of the dark scary web tunnel.
The video in the middle left is also floated(left). The information on the right hand side is grouped and floated to the right.
The whole site, except for the “support” and the “photo” pages are designed like this. They all have a grid used because all the pages are broken into clear, defined sections.
Place on the bottom, is the footer. Since the footer is at the bottom, and there appears to be a working background color and everything is still floated, I know the the footer has “cleared both” the floating objects so that it remains on the bottom. Otherwise it would appear underneath the top navigation.
On all of the pages, to the very right, is a nav bar that directs the user to links about there site and pr for the go cam.
The position for these is absolute, so that they stay to the very edge no mater the size of the screen.
As far as the font goes, they did not out do themselves with an @font face. Rather, they used a very simple and beautiful group of fonts. The whole site is built in Arial,Helvetica,sans-serif fonts. This allows for the reader to clearly read the information needed for the camera.
What I personally thought was neat, was that the coder seemed to use “em” more for sizing than he did pixels. Just thought that was neat because it seems un-useful and a pain, but to see it actually being used is nice.

I wouldn’t consider myself an avid football fan, although I would say I’m able to mostly stay with the game. I’m in the learning stage, and that’s why I think that this site would be good to make, for a girl like me, just tryin’ to keep up.

 

 

 

 

 

 

 

 

 

 

My mood board is more girly than I would like my site to be. I think that it should be obvious that it is for a girl audience, but I also think that it takes a certain type of girl to be interested in learning football at all, and these girls are not completely girly.

 

 

 

I added lots of pink to get the “girl” idea across. I also added things that girls would have or think of pertaining to football. Strong men, fitted jerseys, football accessories, are all things that I first used when associating football.

 

 

 

 

 

Site:

I think that my statistic, “It takes approximately 3,000 cow hides to supply the NFL with footballs for one season!”
will catch woman’s attention, almost by just disgusted. I think that then they can be easliy lead into a train of thought, one that includes a bit of frustration from their husband/boyfriend/what have you spending hours in front of the tv.

Next I could guide them through the in’s and out’s of football, and how to slide by as a badass next time a game is on. Although they love the 20 question game, husbands will be relieved/ impressed with the amount of knowledge attained. The homepage would explain the appeal of the game, by comparing the male camaraderie to a girls night out. The other three pages would be about the game, not just the idea of the game. It will include things like the current statistics, lingo used on the field, and even how to properly throw a football.

This is the only real site that I could find that encompassed what I’m trying to do. Like this site, I don’t want it to be way girly, but at the same time attract females to it.

I really like the illustrations, because they are soft and feminine, but I’m not sure if I want to draw “people.” I think I would rather make the illustrations not people related, more like things they might see or experience when learning, or even things commonly associated with football, like a game plan with “x” and “o.”

I want the text to be very straight forward, but be written from a girls’ point of view. I want the site to poke fun at woman, and this typical stereotype about not knowing anything about sports, while at the same time making the girls who read this feel empowered and a badass for wondering, and for taking the time to learn a little about it.

 

 

Wireframe:

I want the site to be straight forward, but with the charm of a woman. I want it to be flashy, but have the content get straight to business. Each page will have navigation in the same spot, illustrations that are whimsical and fun, and content that is easy to understand (if you a girl).

The how to page is going to be broken up into check lists, because thats what women do, make lists. The stats page will be color coded, and the lingo page will be highlighted.

 

 

It’s not that woman don’t care about your hobbies men, it’s just that we don’t understand them.