Kattkatya's Blog

Just another WordPress.com site

Good Elderly Advice

Self Advice

If I could jump into my DeLorean and travel back in time to give my self advice without altering the space-time continuum, I would tell my self “it will be as tough as you want it to be, so drop the bull and believe in your self”.

The first time I enrolled in Intro to Web I had already convinced my self that I wouldn’t do good in it because my mind is not wired that way. I have always struggled with understanding technical information so the process of enrolling in that class was scary; but more than anything I was scared of failure. I knew I was going to fail that class. The truth is, I should have never believed that lie because I came in to the class with the wrong attitude. This attitude, didn’t let me performed well and it did led to failure.

The experience was a very humbling one for me. It was hard to realize reality and face the facts, but I will always appreciate the honest advice and help from my teacher.

Advice to the New Generation

(ha, this happens a lot, but don’t worry. By the way, notice how this image looks pixelated?…that is because it is saved as a JPG not GIF, make sure you know the difference while in Intro to Web.)

If you consider yourself a technophobe, stop. I was one of them and as I mentioned before,that kind of attitude didn’t help. Do yourself a favor and get the book over the summer, read it and practice it over the summer. If you have a question and no-one can help you with it, post it in Facebook and any of us should be able to help. Don’t be afraid, just be prepared and get a head start.

It is going to be a long-fast road of Web Design, you will understand the simple joy of making things float properly without water or the toilet even. However, make sure you are approaching things with the right attitude, it does have an impact in design performance and production.

A little pride is not a bad thing. Have self confidence but don’t let it turn into arrogance so that you can be a good learner and help others.

There are a few things to remember while you are learning web:

  1. Practice good habits and be courageous. In Itro to Web, you should get in the habit of asking questions if you don’t understand something, the silliest the better, put some courage in the blender and go for it. Blake is there to help, so ask ask ask.
  2. Along with that, READ the book. Don’t be lazy, read it. It will also make the difference between a D+ grade and a B grade. To get the A you need practice, so practice practice practice. There are exercises in the book and there is plenty of stuff online that you can research and practice if you are that curious.
  3. Going along with good habits, ALWAYS Validate your code. It will affect your grade a lot, specially in Intro to Web
  4. Your design skills are put to test in Advance Web so don’t be afraid to try a new style, you don’t have to worry about printing here, so go for it. They are the best resources and that is why Blake has put them there.
  5. Take time to review the external links section in Black Board and READ the sites, get into it.
  6. Finally, in Adv. Web wen you get to Jquery pluggins, practice them before hand, not the day before the project is due. Devote some time to understanding how the specific pluggin works because it could take more than a day to make it work in your design, especially when you are making a responsive site.
  7. If you don’t understand some of the terminology used here, google it and get informed.

    It will be a great year, prepare yourself and go to the AIGA review in the spring, it boost my confidence level a lot.

    Resources

    1. Beginner’s Guide to Responsive Web Design helped me understand how to make a site responsive and fluid. You will need this in Advanced Web.
    2. PSD Graphics has been very helpful the past few weeks. They have many useful free PSD files of graphics you might need.

1 Comment »

HTML5 Revisited

Among the many new elements introduced in HTML5 are those that improve the user’s understanding of the interactivity withing the website and functionality; Such as form elements and Web Applications.

HTML5 Form Elements

The form elements in HTML5 provide the user a better experience while imputing the data and gives them feedback about the data entry being submitted. The elements listed have new attributes in the new HTML standard that are important to note, those are:

  • Input
  • Form
  • Datalist
  • Output

These new attributes might also have new values that make the markup more specific, like the input element.

Input

The input element has new attributes and values; such attributes include list, pattern and formmethod. Among the new values for the type attribute include search, tel, url, and email. In addition, the multiple attribute in the input type allows for multiple emails to be typed in separated by a comma, which eliminates unnecessary markup.

One interesting new attribute is the placeholder attribute which is placed in the text area and is visible to the user. This helps the user identify more easily the data that should be typed in that entry.

Double Left has a good example of this attribute in their contacts section.

Also, in the article Fancy Forms: HTML5 + CSS3 – JS, Richard Bradshaw exemplifies the styles that can be done with a form using HTML5 and CSS3, which makes forms less boring and a little more fun to fill out. He also gives us an example of how the form behaves in the page demo.

Another good resource is the Mozilla Developer Network (MDN) article title: Forms in HTML. This article goes deeper into describing each element’s new attribute and values for those that apply.

Web Applications

HTML5 features a capability to store data for offline web applications through a method known as caching. Since most of today’s technology runs on apps, the need for mobil apps increases daily. Therefore it is important to study the power of HTML5 and the way it is transforming the web world that we know today.

Web applications are run with HTML5 and without the need of a plugin or flash and it is supported by the major latest browsers like Chrome 5.0 +,
Safari 4.0 +, and FireFox 3.5 +. Hong Kiat is a good resource site that presents many applications powered by HTML5 that exemplify features like the canvas element and photo editing features.

One interesting web application is CSS Warp. This application “is online tool that allows you to attach any text to a curved path or a circle, then create warped text with pure CSS and HTML.” Many designers constantly wonder about whether or not it is possible to warp text around a path in HTML, and now it is possible thanks to HTML5.

The most interesting characteristic about HTML5 powered Web Apps is the offline ability. This is achieved through a caching operation that allows for offline data to be store on the user’s device instead of the server, which saves downloading time and allows for faster display of the site.

2 Comments »

HTML 5

The earliest technology will soon be the latest, and so as humans we are constantly learning. As time goes by everything on earth continues to evolve, including the internet. For about 6yrs. developers from the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) have been working on a new HTML standard known as HTML5.

What is HTML5?

According to w3schoolsHTML 5 is currently under development and will be the new standard for HTML.

How does it differ from HTML4.01 and XHTML 1.0?

HTML5 offers advanced features such as video, audio and canvas elements which allow for enhanced techniques and unique styles. The element video for instance, doesn’t rely on software such as Flash but rather depends on the device’s built in features to view the video. /p>

What are the drawbacks of designing a web site using HTML5?

As of today, the biggest drawback of HTML5 is the lack of support by existing browsers. IE being the biggest browser with problems but claims to resolve the issue with IE 10. Other major browsers like Safari and Firefox support some of the elements in the latest versions.

Another issue with HTML 5 is the video element, which is “no easily manageable DRM” and conflicts with copyrighted material and the protection of such. Also, the video element seems to difficult Media Codecs and other compression software used mostly on PCs.

Articles

According to HTML5 Rocks the internet has enhanced their gaming platform with “Features like high performance 2D and 3D graphics, offline asset storage, rich audio APIs, and socket-based networking let you create compelling modern games with a reach like never before.”

HTML 5 Examples

20 Things I Learned

20 Things I LearnedThis is a unique website is creatively designed as a children story book about 20 webby things learned. Using HTML 5, the book opens as if in real life and flips the pages accordingly.

It also has a book mark feature that drops down when hover that holds the links to the major social networking sites to link the specific page to the user’s preferred network.

The website itself is well designed, giving the user many options as to how to transition to the next page.

Page 4 of the book has an example of the video element featured in HTML5 and it works beautifully.

This website alone exemplifies the many unique features offered in HTML5 and works fine in browsers such as Safari and Firefox.

Leave a comment »

Post#2

JavaScript

Advantages

JavaScript is a scripting language that uses a DOM standard to access HTML. This provides interactive functionality that makes it easy to solve a custom problem and enhances the user’s experience.

It executes on the user’s side. This allows for faster download and saves bandwidth and strain on the server.

JavaScript also has an extended functionally using third party ad add-on like Greasemonkeys that allow developers to implement it on the web page to execute a certain needed feature.

Although the advantages of using JavaScript are plenty, some are also a disadvantage.

Disadvantages

Since JavaScript opens directly on the user’s computer, it makes it an easy target for hackers to use it for malicious purposes. In addition, the reliance on the user itself might cause JavaScript not to function properly since it might be turned off.

Although JavaScript is supported by all major browsers, older versions can affect layout and interactivity.

Plugins

Among the most popular plugins are navigation and image customization plugins.

However, one of the most interesting plugins that call my attention is TipTip, which is a way to enhance a tool tip using only CSS. This plugin also detects the edge of the browser and adjust itself to be displayed either under or to the side without affecting visibility. If it the plugin or CSS is not readable by the browser or the user’s computer, the tool tip falls back to the standard display.

Another interesting plugin is JQuery Slidy-A Transition Plugin, this plugin “generates a customizable transitions automatically” and even better, it offers a variation transition layouts to display the images differently every time it transitions. For instance:

.

Image interactivity always provides an experience to the user, especially if the images are interesting and of good quality. Another transition provided by using JQuery Slidy is one that provides buttons to click on the preferred image.

The JqFancy Transitions is an interesting way to display a portfolio since it offers many alternatives to display the image transitions.

The advantage of this is that it is supported by major browsers.

Jquery Full Calendar plugin is useful to websites that host events. Having an interactive calendar of events allows users to plan better for their events ahead of time and surf through their calendar for all the important information.

This is just an example of a calendar using JQuery, there are plenty different layouts and interactivity in other jquery plugins.

Website Example

The Assosiation of (ASID) has a good example of a plugin. It is interactive and easy to navigate. Each scheduled event is linked to a page with more descriptive information to help the user/member plan better for one of their meetings.

Leave a comment »

Project #1: Mood Board

The ideas for the CSS Zen Garden are every where in my sketches. They range from rapping cats to birds nest to skateboarding. Therefore, putting together a mood board was a bit complicated. In addition, taking into consideration styles that I haven’t tried and colors that haven’t been in my palettes , I was able to put together a mood board that could be used for any of the ideas in my sketches and make it interesting yet relevant. First, the color palettes is based of a combination of colors that I found in different illustrations related to the topics in my sketches which have pastel tones. I really like textures and although one of my favorites is news print, I would like to combine stamping and brush textures. I am a very illustrative person but I would like to work with silhouettes since they are not very detailed and would create a nice contrast with the texture. My attempt is to combine rough textures with soft colors to create an interesting contrast between the idea, the environment, and the action/theme.

Leave a comment »

Responsive Web Design

The Web design community is constantly in the loop for new techniques to catch up with the advancing technology. It seems that everyday, there is something new to learn and apply. It is mind blowing to think of all the different devices in existence and to think that as we learn to adapt to these forms of mobile devices, it is impossible to adapt every design to every single form. Ever since the invention of the iphone in 2007, the world wide web has been in constant adaptation and being experienced uniquely by every user. Thus the need for good Web Design has grown rapidly the past years.

Although, time has always been “money”, the world is certainly more demanding of speed and take into consideration how fast they access the web and how fast they can interact with the it. Paul Fitts law about human computer interaction and ergonomics has never been applied as it has for the past 5 years. Clients now demand a Responsive Web Design to go along their website to fit the needs of their clients and make their websites more accessible to the public.

As I learn about Media Query, I can’t help but thank that there are web agents working daily to adapt and improve the web experience like the W3C. Even though I might not understand it entirely and I have yet to put it into practice, reading about its attributes has helped me understand how important it is to have a well organized structure and presentation that adapts to the many screen sizes and resolutions.

Reviewing the Healthy Berries site created for Introduction to Web Design class, I realized that I would encounter certain issues when “scaling down” the site, but there wasn’t anything that would alter the style of the site. The navigation for instance, would not look the same in a 320px width device because it would not be horizontal but vertical floating to the left to preserve certain characteristics that stand out in the site like the treatment of the banners and the round edges of the main navigation.



I also realized that there would be a lot of smart links I would have to add in order to allow the user to move faster throughout the website. For instance, a link to go back to the main navigation at the end of each section, especially in the recipes section.




However the first attempts to re-arrange the structure might not be ideal but at least it keeps the consistent style of the original design and has potential to translate good into a fluid grid.

Leave a comment »

60 Words Rule and Headlines

One thing that I have taken into consideration a lot this semester is the “60 words or fewer rule”. As I surfed the web for example websites, I realized that my attention to line length and paragraphs was increasing. Therefore, tip #4 from chapter 5 was even more helpful to me to understand how to write for a better user experience.

Zac something website, line length is one of the things I noticed. Where there are areas with appropriate line length, there are other areas like the “About” section and the “Professions” section that have long lines of text going across the page.

However, I believe that although it doesn’t follow the rule, it works for him for different reasons: the paragraphs are small, and it seams appropriate for the Resume section. Although, I would have made the Resume a PDF file for those who are interested and a small list of accomplishments to have in the actual site only to give a glance as to what he has accomplished.

In addition, tip #5 from Chp. 5  reinforces the importance of good Headlines.  In the article “20 Great Examples of Compelling Headlines “ Stephanie states that “Through the use of compelling headlines and witty taglines, your brand can break through the clutter and be distinctly creative and unique. Generally, the most successful websites include headlines that support the website’s goals and are simple and easy to remember.” Good taglines are good examples of (or can give you an idea) as to how to word a headline. For instance, Apple and Dunkin Donuts.

Also, in the article Stephanie points out that giving some sort of character to the Main Headline or tagline can help the website stand from the crowd and be memorable to the user. The Justdot website is a good example with their “Brilliant ideas come to life” Headline in the middle of the page.
Their Headline gives the user a clue as to what they would find in the website and follows the 8 word rule.

 

 

A website that exemplifies good use of typography to express the meaning of the Headline is Forever Heavy. It is the portfolio website of Nick Coates who designed the Healine to resemble a beer label. However, what makes it interesting is the use of color and type choice to fit the design and call the users attention.

One more example of great Headlines is the Don’t Let Yourself website against abuse. The stylized type is catchy, friendly and gives a sense of strength; which is important because that is what the Headline states, and what the website is about.

Over all, I have learned that as Web Designers it is important to remember that the users seek a good over all experience. Therefore, time and content go hand in hand when designing a website. After having good content, it is important to remember to give it a little character so that the site is remembered, specially headlines since it is the first thing that users will read.

I suggest to take a look at other articles by Stephanie since there are great websites exemplifying many other topics about Web Design that might be helpful and good “food for thought”.

Leave a comment »

Dissecting a Website

Rumbling around which website to dissect, the portfolio website of Zach Woomer attracted my attention the most. He is a web designer, therefore I thought it would be interesting to dissect his site. His website is not just a “hi, I am Zach and these are my creations” site, its actually well designed, a bit entertaining, stupidly humorous, and easy to dissect. It would also be a good “source of inspiration” since besides showing off his web and illustrative skills, he has a blog in the “read” section talking about different things that interest him. Among them are some blogs about CSS3 and other techniques that he has found useful and loves to share.

Home Page

The home page has 3 main divisions which are “header”, “wrapper (container)”, and “footer”.

  •  Header Division: The page starts with a division named “Header” which has an image tag and an Unordered list. The logo is a sprite of 130px by 130px conformed by two image sprite that varies in a small shadow for the hover state.zach woomer website

Following the logo is the Unordered List for the navigation which is also a sprite conformed by 12 images, two images per link that activate on the hover state of each link. Each image is unique at each hover state which gives a hint of the humor/fun of the design elements around the page.
image of navigation spriteEach list item is styled with a width of 109px and a height of 59px , floated to the left and with a margin-right of 26px.

  • Wrapper Division: There are many divisions within divisions in the wrapper. The first sub-division has a class named “content” which has a division called “homeContent” which has two more divisions.The homeHeader division is 124px high with padding-top of 20px. It also has the first Header 1 element which is an image replacement floated to the left. It is an image “greeting” the user and identifying what its on the page which is the “latest article/blog”.

To the right of H1 element is a self portrait image of the artist that has an opacity of 0.5.

Following that division is the “articleHeader” division which contains the main information of the article. The division has padding-top of 300px to give space for the background-image of the article that reads Sphinx and Hercules. Following that is an H2 element which is also the title of the document and has a drop shadow. The title is followed by a span class to style the “postedDate” of the article. There are five paragraph elements proceeding this class, each with 30px of margin on the top. The Image is in its own paragraph and is floating to the left.

  • Footer Division: The last and final division is the footer and is composed of two sub-divisions called “borderBottom” and “footerInner”.  “borderBottom” is a png image 2560px wide. It is positioned at the bottom with 0 margin. The “footerInner” division is consists of a paragraph element that cites all the works by the artist and copyrights. It also contains an unordered list that is the secondary navigation for the footer. The navigation is a sprite image and it only portrays the first letter of the link.This is a creative approach to the secondary navigation usually found in a footer but if I don’t remember what the links where I find myself going back to the top to look at the names and make sure that what I am linking is what I want. Finally, there is an image-replacement that links to the twitter page of the artist.

Zach has been working as a web designer since 2008 but as I dissected his personal website I realized that some of his markup doesn’t make sense. Like the logo is not the H1, which is not what the screen reader reads first as it opens the page. In addition, the line length seems a little long in almost all the pages. But the way it is designed makes it work.

1 Comment »

Visual Research for Final Project

After the feed back from the presentation, I looked back and analyzed why I had gone the “boring” route. I was originally interested in the nutritional properties of berries, which led me to an extensive research of the Acai berry and its agriculture, which lead me to analyzing the economy of Brazil. So I took a step back into my research and decided to go in a “funner” direction. Berries are a great source of antioxidants and can help lower cholesterol among other things. Therefore, the final project will be about the healthy eating of berries. There are plenty of articles discussing the many benefits of eating berries but there are not that many websites informing about berries in a fun interactive way. My visual research consists of bright full colors and a photographic style combined with a fresh lose illustration style. The use of watercolor and ink is interesting and represents the freshness of the berries. Some websites that describe berries are more about the company that produces them than the actual fruit. Although, great images can portray the truth about the product, images might make the site feel serious and expensive. Therefore, the combination of photography and illustration could convey freshness, affordability, and easy/fun.

One of the websites that first caught my attention is the Oregon Berries.

The organization of elements and design style make for an engaging website. Two of the elements that I find the most interesting are the navigation and the logo image. The design style of the navigation is visually interesting, inviting, and friendly.
Another website that is visually interesting is Driscolls. The two main elements that maintain the life of the website is good layout and great pictures. The site’s organization of elements, like the recipe page is structured well and the choice of imagery keep the user visually engaged with the content.
One of the last websites that caught my attention is Just Desserts. The site is not well designed but there are a few elements that were different. For instance, the navigation is centered at the top which adds emphasis. The rough border style of the banner is an interesting element that attempts to add a touch of “roughness” and “home made”. Although, the design styles on this website are not contrasting, the website attempts to organize the recipe elements into a simple visual organization. All of these websites directed my design visual research and guided my ideas toward different elements. For instance, the navigation has to be visually interesting and fun and the images can be appealing but cohesive with the over all style of the site.

Leave a comment »

Single Page Website

Creativity is best explored when there are boundaries. Single page websites are an example of that and it is one of the reasons why their popularity has grown. It is impressive how these websites are bursting with creativity and personality. One website that utilizes the single page concept is volll, a portfolio site. The design style is vector illustrative and colorful, which create a vibrant and friendly environment.
Whether I am driving around down town or surfing the web, I like to know where I am. Therefore, the first thing I look for in a website is navigation so that I know how to get around. Each section of this website has a simple and easy to find navigation that doesn’t get overwhelming with the colors and illustrations neither gets lost with them. Each link uses a transparent PNG sprite with a black and white rectangle that shifts so that it blends with the gradient in the background in its hover state or selected class. In addition, the site is designed in “levels” that relate to the way the navigation is worded. For example, the “main” link in the navigation has a background of land and water, the “about” link takes the use “one level up” the page into “space”. The “works” link goes into the water and the “goodies” drops down to the bottom of the ocean. I find this very interesting and a well designed concept.
Furthermore, the site is well organized. As seen in the pictures above, the content is straight forward and well structured. Each section is not cluttered with words or graphics. One thing that is different from other pages is that in their “Works” section, there are no images show casing each design as a background graphic, rather the user first has to click on the link for the work to show on the display window. This allows them to have a variety of works without being overwhelming. It also helps the user focus on the one work they select and move on to look at the other works one by one. There is also a lot of animated graphics that are incorporated very nicely into the design of the page without making it overwhelming. Even the little sheep move slightly in the Main page. Finally, one thing that I appreciated was their sense of humor because it adds to the personality of the website and themselves. The amount of creativity, content organization, and attention to detail is what makes this single page website a success.

Moving on, the personal website of Dann Petty doesn’t apply the “single page concept” properly. The “Main” page has a nice look and feel design to it, personally I like the tight leading and the open space of the image but that is all it has as a site. His web page consists of a group of links that redirects the user to blogs outside the server where he has all his information and examples of his works. There are at least 4 different external links that are all related to bog sites that host his porfolio, pictures, etc. like twitter, behance, and dribbble. This is not very user friendly because I have to navigate back and forth between sites only to see Dann Petty’s works.

One of my favorite bands that I will be designing a single page website is Family Force 5, a Crunk Rock band from Atlanta, GA. Their site has improved significantly since last spring and is a bit more friendly with mobile devices since the slide-show is deactivated and the navigation bar is visible when the screen is the size of a tablet or iphone.

However, there are a few minor details that could still be improved. For instance, the home page consists of a slide show. There is no navigation at first glance so its a bit confusing at first. The only other thing besides the image is the band logo at the top right corner which when hover over drops down the navigation. It is an interesting approach except that it takes a few seconds to figure out how to navigate the site. Secondly, there are too many links in the navigation that could easily be condensed to 5 links. The news and the blog for instance have the same information:
The band could benefit from a single page website because it would narrow down the main details about the band, it could be a little more creative and portray the personality of the band more accurately. Their music is a fuse of different beats and “old-school” style which characterizes them in every album. They are also very energetic at their concerts and their website doesn’t portray that.

Leave a comment »