Blog Post #13

If I could turn back time…

"Obligatory picture of Cher"

These last two semesters of web design surprisingly went by in a snap! I feel like this class taught me more than I imagined, and there’s so much more to learn, considering that technology is always evolving.

I would tell myself to make more time. Make more time to validate. Make more time to design responsively. Make more time to make sure that X meets all the criteria. And etc. I can’t even tell you how terrible I am with losing points over the littlest, simplest things. I would tell myself to make sure that the deliverables are turned in and completed on time, no excuses. Who would want to lose 3 or 5 points per deliverable, already deducted from the final grade? Save yourself from grief and do your homework.

All three of this semester’s projects have taught me to FIRST design responsively. I always end up saving the responsive aspect for last, thus, never having spent the time as I would have wanted. Designing responsively first will save you a lot of time and effort down the road.

Start from scratch. I have an incredibly bad habit with Ctrl + C and Ctrl + V. For the CSS Zen Garden project, I used an example CSS downloaded from Blackboard. I had always wished I had never done it. I thought it would save me some time to work of the responsive aspect, but I was so wrong. Even though styles were already provided, it cause me hours and hours of confusion. I hope that the incoming web design students won’t go about it the way that I did. Always start from scratch!

These resources are crucial to your success.

Interact With Web Standards (buy) was the required text for both classes. The explanations are idiot-proof and easy to understand. Read it. Know it. Love it.

Validation is your best friend. Use these services at your disposal. And very, very often.

Blog Post #11

HTML5!

HTML is a set of rules that tell computers how to interpret the code of the website. HTML5 is the 5th generation of these rules. It’s not a single “thing” or a colossal technology. To put simply, it is a collection of several current technologies used to make websites while amplifying its strengths of interactivity and connectivity. HTML5 doesn’t belong to a specific company or a certain browser. It’s like a collaboration of universal browser standers to push web capabilities further. With HTML5 you can expect improved multimedia, audio and graphics, capability of offline use and storage, improved performance, being able to target the largest number of devices with little development effort, safer and more secure, and lower costs and easier maintenance.  To this day, there are already many different HTML5 features on the internet, it is still in development and probably won’t be 100% complete for several more years.

http://www.html5rocks.com/en/why

Brad Neuberg, who works for Google, gives a 42 minute introduction to HTML5:

Introduction to HTML 5 from Brad Neuberg on Vimeo.

HTML 4.01 and XHTML 1.0?

Compared to HTML5, HTML 4.01 get plenty of errors due to its more lenient parsing rules. HTML 4.01 also has no multimedia support, unless you use plugins. As for XHTML 1.0, it’s more complicated to write than HTML5.

http://stackoverflow.com/questions/256953/html-5-versus-xhtml-1-0-transitional

HTML5?!

There are a few drawbacks that come with using HTML5.

  • Browser support – It only supports modern browsers, meaning everything except Internet Explorer.  Thought it’s becoming lesser used today, there’re still a few that use this dinosaur and its older versions.
  • Still working on it – Another problem is that the language is still a work in progress, which means that anything can change.
  • Licensing Issues – multimedia, like audio, will need to be compressed in several formats in order to be compatible with most browsers, so it’s a bit more work.

http://planetoftheweb.com/components/promos.php?id=556

 

 

The Endless Mural is a web app, created by Eric Fickes, where you are given a canvas to create shapes and drawings based on the gestures of your mouse. It encourages to the user to experiment, draw, and play using the tools provided. Once you are happy with what you created, you are able to submit your work to its ever-growing gallery. A <video> element is used in the help section.

http://endlessmural.com/

Project #2 Mood Board

My concept will be based on my recent magazine design “Tea Leaf,” which is a health and lifestyle magazine for women. It promotes and encourages a healthy lifestyle through tea and alternate forms of medicine from the east, fitness, and choosing to be Eco-friendly. The viewer is a young to middle-aged female tea-enthusiast, who believes that the secret to good health is within nature. She participates in environmentally ethical practices, such as using plant-based products, and has a great appreciation for life and enjoys it in its simplest forms.

Blog Post #10

JavaScript.

You’ve probably heard this term a billion times amongst your higher-ups in the web developing and design field. But what exactly is JavaScript?

JavaScript is a popular scripting language used on the Internet to make interactive websites, working on all major browsers like Internet Explorer, Safari, Opera, Firefox, and Chrome.

What does it do?

  • It can react to events, like when  someone  hovers over a button or clicks on a link.
  • It can read , write, and change the content within the HTML.
  • It can be used to validate data before it gets to the server, which saves the server from extra processing.
  • It can be used to store and retrieve cookies/information from a computer.
  • It can be used to detect the type of browser, and, depending on the browser, it can even load a page specially designed for that browser.

To think of it another way, JavaScript is kind of like an extension or an add-on to HTML. Like a snazzy hat or an expensive wristwatch on an average Joe. You use HTML tags to create a page, and you interact with it by using JavaScript.  And all you have to do is embed a JavaScript code into an HTML file to make an average Joe into a Snazzy McSnazzpants!

Why would you want to use JavaScript?

JavaScript is fast, so instead of waiting for contact with the server and waiting for an answer, JavaScript runs immediately. It’s also easy to learn and simple to use, and is flexible with other languages and can be used in a wide variety of applications. It can be inserted into any web page regardless of the file extension. JavaScript can also be used inside scripts written in other languages.

Why would you NOT want to use JavaScript?

Sometimes can be exploited for malicious purposes, like planting Trojans and viruses, so some people choose to disable JavaScript. It is also sometimes interpreted differently by different browsers. The server scripts can produce the same output, while the client’s can be unpredictable. So it’s important to test your script in all the major browsers.

Project #1 Mood Board

The first project of the semester. We are to create a single-page website using Zen Garden, which is a place for web designers to display their CSS and designing skills.

I’ll be giving myself a little bit of challenge and turn my cheek away from my usual feminine style. I’m going for is a comic book theme, which is something I haven’t done before. I’ve actually never picked up and read a comic book, besides the Sunday paper funnies when I was younger. I was particularly inspired by it’s bold, bright colors and the various line qualities found in the objects and figures of the drawings. Of course, the half-tone patterns are also stirring my creative juices, so strong patterns will also probably be a distinct component to my design.

I found that the ending credits of Pixar’s The Incredibles to be a good reference as well, with sharp angles and exaggerated shapes and curves, and bold colors.

Blog Post #9

What is “Responsive Web Design”?

In a nutshell, it’s about creating a design that is flexible (in terms of  layout, screen size, etc.), accommodating the users and the transition between the desktop computer screen to the screens of smart phones and tablets. It’s, in essence, the responding to society’s technological advances and making it look good with design.

http://www.alistapart.com/articles/responsive-web-design/

The website I designed for my final project in Introduction to Web Design involved designing for a very young audience than can barely read. It’s an informational dental hygiene site that parents can go over with their children.

(Layout of a computer screen resolution of 960px)

(Layout of a smart phone resolution of 480px)


There wouldn’t be any drastic changes to the design, but adjusting the character images to make them more fluid and decreasing the width of the containers. The navigation would also undergo a change, in which two buttons will move below the first two buttons, making a 2×2 navigation.

 

Blog Post #8

With Thanksgiving having past and more holidays approaching, I’d thought I’d do a critique on a website that sells gift cards called GiftRocket.com. Maybe you can find it useful for those last minute gifts. To send a gift card, you search a business or category and the location of the recipient. The gift can be sent to their email or Facebook wall, and they are able to redeem their gift instantly.

The design of the website reflects their service: fast, simple, easy. It’s visually pleasant and allows plenty of white space for the viewer’s eye to comfortably move around. The curves and rounded shapes suggest a docility, approachability, or friendliness of their service, which I thought was a clever approach to the design.

Navigating around the website is effortless. There’s a circular  graphic navigation panel that categorizes business types, and another navigation panel at the top of the page that links to information about their service. The graphics implemented made all the difference in its visual impact.

Blog Post #7

I’m not a total health-nut, but I do love great-tasting beverages that also happened to be good for you! The ever popular health-fad Vita-Coco is “100% pure coconut water”, in which, through a little research, I found to be one of the most hydrating drinks next to distilled water. VitaCoco.com seems to be doing a great job selling their product through the design of the website. When I was irked enough about hearing about the Vita Coco fad over and over, I visited their website for the first time, and there was an immediate visual impact.

At a Glance

Maybe it’s my internet speed, but the pages loaded quickly. The color palate and imagery that they used is very effective and pleasing to the eye. Eye-catching, but not interrupting the text. The hierarchy of the text is strong and is clear in using varying text sizes and color.

Navigation was easy to understand and use, and is consistent throughout the website. Each page of the website looks like it belongs to the same site, in which the designer carried repetitive elements throughout the pages.

The HTML

Looking at the HTML of the home page, it’s organized and easy to understand where the main elements of the page are located.

The navigation bar was created as an unordered list with each link as a list item. The “Main Wrapper” contains the “meat” of the page, and is divided into three columns containing an image of the product, press articles, and a short description.

The footer is also divided into three parts that contain Vita Coco’s social networking pages, a navigation bar for the different flavors, and then the copyright.

CSS

The cascading style sheet is especially lengthy, however it’s very organized, all in a logical order, making for a precisely designed webpage.

Blog Post #6

“13% of the U.S. brush their teeth from side to side.”

I found this interesting because I thought the percentage would be a little higher, but I did assume that the highest percentage of people would brush their teeth in a circular fashion. The other percentage, if any, probably do not brush their teeth at all. Gross.

So the website I will be designing is an informational dental hygiene site for kids from the ages 4 to 7 that they can go through with their parents. Because it’s for a very young audience that can barely read, imagery is key. So I will be using kid-friendly illustrations with plenty of bright colors so that it can encourage healthy dental habits.

Mood Board

These are found pictures from Google Images. The style I am trying to pursue is a 1950s-70s pop-cartoon feel with simple shapes, simple angles, and simple color, which are things that I’m sure that kids are able to appreciate.

 

 

NickJr.com is one website that I found inspiration from. It was fun to look at. There were bright colors and smiling characters and mascots that seemed to have fun with whatever they were doing. One thing that I noticed is that the games and activities are in the feature, which is an apparent hook; the designer is demanding the children’s attention.