Blog Post #5: Advice

It seems very surreal that 8 months have past since I first started taking web design classes. I remember how mortified I was to take Intro to Web Design. I had heard from many that this class was not going to be an easy one, and they were not wrong. It is always challenging to learn something completely new, and designing for the web  was absolutely foreign to me. I had never created a site nor worked in Dreamweaver.

Listen up

An advice I would give myself would be to read as much as I can about web design. Informing yourself prior to starting this classes should be a requirement. There is a lot of useful information out there for us to take advantage of. It is never a bad thing to be prepare for what is coming. Interact with Web Standards was also a helpful resource. Future web student need to buy this. It was easier for me to come into class and understand the lectures if I had done the readings before. It is essential that students follow the exercises available in the book. I did not take advantage of this until very late on the semester, and I now regretted.
Another advice I would give myself and others would be to pay attention to details. I lost a lot of points on our first excessive in Intro to Web, because I did not pay attention to small yet significant details. Missing semicolon at the end of a line, a quotation mark, or a simple misspelled work will cost you greatly. Errors like this ones will result in a lot of frustration when trying to validate your site. It’s all in the details right? There are numerous  tools out there that would help you along this 32 weeks, and to keep track of those important details.

Always remember:
“The details are not the details. They make the design.”
–        Charles Eames

Best tool EVER!

I will have to give the award for most useful tool to Firebug. I have no idea what I would have done without this tool. I loved how I could make changes to my site using Firebug without having to go into Dreamweaver every single time. It let me test out where I wanted to put my margins, padding, line space, etc so that I could be certain how to write them in Dreamweaver. LOVE LOVE LOVE firebug!

Validate every chance you get!

Do not leave it to the last minute, because you will be completely overwhelm with the amount of errors your site will have. One or three errors are easy to correct. When the validator gives you 30 or more, you will want to shoot yourself, especially if you thought you were done. Use it for both HTML and CSS!!

One last advice

Don’t stress. Don’t worry. You will get it ,sooner or later. One day HTML and CSS won’t look so intimidating anymore. Read, practice, follow directions, and PAY attention to details. If you listen, you will do just fine!

Advertisements

HTML 5It seems …

HTML 5

It seems hard to believe that it has been over 10 years since HTML was last updated. HTML had not been update since 1997 with the release of HTML4. HTML5 is the newest version of this essential web design tool. HTML5 it’s a continuation of what has been created with HTML4.01 with new and innovating features such as video and audio tags that can be written directly into the mark up. This new feature has been created in order to eliminate the need to include media players and other downloads.  However, HTML5 is still being develop and some of the amazing new features are not yet supported by all web browsers.

Positives

–          No external plugins for videos and music. More will be added in the future.

–          More organized websites. With tags such as header, navigation, article, section and footer.

Negatives

–          Not yet supported by all mayor web browsers.

–          It is still being develop, and it will continue to change regularly.

 

In the article, What is HTML5, and Why Should You Care? from switched.com. Terrence O’Brien discusses about why HTML is so important and most importantly why designers should take it into consideration when designing. O’Brien explains how Apple has shaped the development of this new mark up.

“In search of a “better user experience” and battery life, Apple has simply dropped support for some of these plugins entirely on mobile devices, leaving much of the media-heavy Internet inaccessible on iPads and iPhones.”

For the site critique I chose portfolio website. Because it is a one page design not all of the new tags are used. On this website, the designer used the header, the nav, the section and the footer tags. This makes the website much more organized. JavaScript and Jquery is still being used thorough the site, and it is not design responsively.

 

 

I tested http://michaelacevedo.com/ using Firefox and Internet Explorer and I was very surprised with how different this website looked depending on the browser. With Firefox, the website looked and worked perfectly. The slideshow was working, the portfolio pieces were aligning to each other, and most importantly the navigation was functioning properly.

 

 

First of all in Internet Explorer, as we open the site there ir an error on the page.  We can notice jerky reactions compared to the other browser. The navigation  only works on the top, therefore, in order to navigate the rest of the page one would have to continue to scroll drown.

 

 

 

 

Changes are always scary, and most people feel vulnerable in new territories. As long as HTML5 continues to be develop, web designers will definitely think twice about using this markup. However, the advantages that HTML5 brings to the plate are hard to overlook.

Blog #2: JavaScript

For our last project in Intro to Web, I tried implementing  jQuery into my website design and failed miserably. Back then, it had been really hard for me to understand all of the coding and scripts I needed to use to get the effect I wanted. Thanks to this assignment I definitely feel I could start implementing some of these techniques into my designs. In addition to the links posted on Blackboard, I found a very useful  website that broke down both JavaScript and jQuery into different sections which helped me better understand.

Pros

JavaScript and jQuery can definitely make a website look a lot more interesting. By using these tools web designers can create a much more interactive site that will make the users’ experience a lot more engaging. JavaScript has countless scripts that can sure enhance the look and feel of a website such as, interesting image transitions, text treatments, cool animations etc. Another positive aspect of using JavaScript is that is very accessible and most of the time free. Users don’t have to download anything in order to use it, and you can find millions tutorials online that will walk you through on how to implement it. It is supported by all major browsers, and visitors don’t have to do anything in order to make it work properly.

Cons

Just as there is a positive side of using JavaScript, sadly there is a negative side as well. There is an option to turn of JavaScript, and once this happens the website will no longer look as it was intended. In fact is JavaScript is unable or is not well implemented viewers will be able to see the code and ultimately not see the effects. Another issue JavaScript can present is the speed on wich the effects can be seen. If a page is loaded with JavaScript this could ultimately slow down the site.  Also there it is not guarantee that every single script you find will work perfectly nor properly. Therefore, designers have to make sure that they are getting the scripts from a reliable source. Hackers can also get their hand on these scripts and damage the work of the designer.

Plugins

Tip Tip

Tip Tip will allow the designer to add “tips”, small notes, clarifications, definitions, etc to basically any element within the site. This can be added to either links, or to actual text.

JText Translate

This is a plugin my parents would highly appreciate. It gives the viewers  the option of translating the information on the website to other languages.

Pikachoose

This is a slideshow plugin that creates a beautiful and easy to customize photo presentation. It also allows to add tips, descriptions or captions to the photos.

JSquare

Is another jQuery plugin for photos that would allow the image to pop out of the grid and simultaneously present a description of the image to the viewer.

Sponsor Flip Wall

This plugin creates a beautifully organized grid to fit all the information you need to include on your website.

Unowhy.com

This website screams jQuery at you in every single page!!! I don’t know if it is because I now understand what JavaScript and jQuery is, but I had never seen a website with some many uses of scripts. There are scripts for basically every effect you see on the page. I would have thought that a page like this was going to take forever to upload, but it’s actually very fast and simple. The first plugin I immediately noticed was the large background image.  This is a plugin called Fullscreenr which makes the image perfectly centered and fitting the entire screen resolution appropriately. On this site, there are a couple of background images that use this script. The have the plugin to embed a Google map into their website. They have sliding effects for their text and navigation. Which make the site much more interactive and keeps the viewer engaged. Also, these plugins make the site easier to navigate through. They are not overwhelming to the point were the viewer gets distracted by the effect, but rather focuses their attention to where its needed. All of these plugins make the site exciting to explore, unique to look at, and even entertaining for the viewer. I’m in love with this website!

Home Page

Navigation

Menu

Recipes

I’m very excited to start using this technology! 🙂

Mood Board P1

For our fist project, I have decided to take an illustrative approach. I picked to work with greens and purples, as well as grays and creams. I have a couple of concepts in mind, and I made sure that all worked well with the color palette I have select. My concepts are: breakable design, a close-up interpretation of a pie charts, extraterrestrial gardens, and coconut trees. The connecting element between all these random thoughts would be the illustration style and the color. I really want to explore with different shapes, forms, and line weights. The target audience is definitely a younger audience between the ages of 17 to 25, looking to learn a little more about CSS.

 

Blog #1: Responsive Web

Long gone are the days where Web developers would sit down and put all their efforts in creating ONE beautiful website. Computers are no longer the only devices used when navigating the World Wide Web. Nowadays, Web developers have to consider all the new technology that is constantly emerging.  The idea begin a Responsive website is that no matter which device you are using, whether  a computer, smartphone or a tablet, the design of the site will adapt to its screen resolution.  The ultimate goal for a developer is to maximize the user’s experience when visiting a site, and now thanks to fluid grids and media queries this is all possible. Beginner’s Guide to Responsive Web Design is a great article to get you started on this here-to-stay new trend.  Responsive Web Design: What It Is and How To Use It it’s also a great detailed article that will further explain how to make your website responsive to all devices.

Taking the website I designed as a starting point. In order to make my website responsive, I would have taken in account both the orientation of the site; landscape and portrait design, the fluidity of the grid, the size of the images, and a number of other factors. One of the most important factor to take into consideration when designing a Responsive site is Fluid Grids.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. – Nick Pettit

To accomplish this, I would have to make everything on my website flexible. Columns, images, navigation, and other elements would have to become fluid in order to be scale up or down to perfectly fit the screen resolution of the device. The layout of the website would have to be rearrange, for instance, a three columns layout will most likely change into a two column design, or in other cases even a single column design. Also, I would have to include another very important factor of responsive web design: media queries.  Media Queries will help me identify the type of device being used to then apply the correct CSS style. For example, if the screen resolution was of 480px by entering a media querie like the following, the site would automatically readjust to the correct resolution.

css” media=”screen and (max-device-width: 480px)” href=”shetland.css” /> – Ethan Marcotte/ Responsive Web Design: What It Is and How To Use It.

From a 960px to 480px

Thanks to media queries and fluid grid, web developers can create responsive websites that satisfies the proportions of all the different devices use nowadays.

Blog Post #8: Evolution

I have been surfing the World Wide Web ever since I can remember, and yet I hadn’t noticed the changes on the design of websites.  Before taking this class, I wasn’t very much aware of the changes involving website design. I could easily separate beautifully constructed sites from those that were not. However, I didn’t really acknowledge how websites had evolved through time. Throughout this semester, I enjoyed the process of dissecting and analyzing websites. I became fascinated with the look and feel of the new websites, and the techniques used to animate them. For this reason, I knew exactly what I wanted my last blog post to be about: the evolution of website design.  While doing my research I discovered a very cool website that illustrated this evolution process. In CSSMySite the designer has chosen to divide the history of web design into the major trends that have influenced this art. The trends are categorized as: none (or the beginning), frontpage, business, web 2.0, textures, flash, minimal, dark, and grunge. Once you choose a category to explore, the site transforms into a typical example of the trend.  Thanks to this website, I was able to pay close attention to the differences between each trend. It seems almost incredible that not many years ago years ago websites would look as rudimentary as seen on the none link. In this period of time CSS didn’t exist, therefore sites looked very similar to each to other. Some of the characteristics these sites had in common were white background, serif fonts, headings, paragraphs, and text, text, and more text. They did not have any source of illustrations nor pictures, and the structure of the pages was all the same. They were just there to inform an audience about a service, a product, etc.

The slow computers of the age necessitated few if any graphics were used in web pages. The main focus was to distribute information without thought to how the websites looked.

 

None Style

3270 Terminal

FrontPage

 

 

 

 

 

 

Business

Flash

Web 2.0

 

 

 

 

 

 

Texture

Minimal

Dark

 

 

 

 

 

 

Grunge

 

 

 

 

 

CSS played a major role on the evolution of website design. Thanks to the development of the Cascade Style Sheets, designers were able to create more dynamic, fun, and vibrant sites. CSS gave designers the opportunity to explore different grid designs, color schemes, typefaces, and imagery.  Soon after CSS was introduced websites started to look more as the ones we see now; much more interactive.Similar to CSS; Flash, Jquery, JavaScript have also played major roles in this evolution, and the techniques used to draw audience to exploring their websites.

Websites nowadays are completely interactive in order to grab the attention of the audience. They are now designed to not only provide other with information, but also to entertain. The body copy tends to be less or broken down into smaller sections, in order to help the audience read better. The imagery is unified under one large illustration or photograph. The text size is bigger, and the navigation is easier to identify and, therefore, to use.  Footers are treated with as much importance as the rest of the content of the page. Hierarchy became essential when organizing all of the information displayed on the website.  An example of this is the website Polar Gold

Blog Post #7: Dissecting a Website

Yoke

Homepage

For this week’s blog post I decided to dissect the design studio website, Yoke. I was trying to find a good designed website, and I was immediately drawn to this one. There are a couple of things that work together to create a beautiful, easy to use site. For example, the color scheme is not screaming at the viewer, it’s very soothing. The font size is not uncomfortably big nor unreadable small, and the illustrations add character to the company. At the bottom of the each page, right before the footer, the is a back to the top link. Other websites have this, but there are usually small, and unimportant. However, on this website it looked at as another design element, which makes it more interesting. The footer is also another element that brings character to the website. It’s big, engaging, and even fun to look at.

 

Navigation

First thing I noticed when searching for the navigation was that it was inside another div, which is nothing I was not used to. Once we open the division “header”, we have to open another div “headerWrap” and there we can find the nav div. It’s organized using an unordered list. I had a hard time trying to figure out how the designers created the navigation. At first, I thought it was build using CSS sprites, but while I was viewing the source I couldn’t find any sign of image replacement. At first glance the navigation seems very simplistic. Its design vertically, when hovered the words turn blue, and when its active the box turns blue, and the text white. However, once you scroll down the page, the navigation also shifts down, which makes its easier to locate. The name of the company works as a link to the home page, as well as the green circular design.

Type Choice

The designers used three different typefaces throughout the entire website. There is a playful typeface used of the big quotes located on the banner images, and the back to the top bottom. The typeface used for the body text is a san serif face that adds a little more formality to the design. The third it’s an italic slab serif used for quotes or decks.

HTML

There are A LOT of div on this site! There are div inside of other div that are also inside of other divs!! Every single object on this website has been put into a div, from the top banner, to the individual images located on the content. If the HTML wasn’t label with classes, and ids It would get very confusing. The information on this site is extremely well-organized, which is enormously important when creating imagery heavy sites. Some of the div are named differently, for example the container its called wrap, and navigation it’s located within a div called header. There is not a lot text on the home page, however, every box serves as a link that takes the viewers to another page where the project is described in detail. I noticed the designers use of JavaScript and jQuery, which they have decided to positioned it last.

Graphics

On this website, there are as much images as divisions. The designers go back and forth with the format of the images. PNG, GIF, and JPEG are used. There is a massive image that serve as an introduction to the page, it covers most of the above the fold area. This banner image changes depending on what page the viewer is in, as well as the quote. There is also a background image for the entire website. The images on the content change every time we hover over then, and serve as connecting links.

 CSS

The CSS on for this website it’s linked. There are some codes within the CSS that I could not understand. For example:

“img, #pageTopLeft, #pageTopMid, #pageTopRight { }

#header h1 a, .menu li a, #page h2, #page h3 { }

Beside these, the CSS is not as complex as I thought it would be. For most of the images and links I noticed some repeating codes, such as, the use of transparency, scroll, relative positions, and others. I also noticed that for the font-size and other measurements, the designers did not used EM’s but percentages  and points. The designers group some of the division in order to apply the same effect to them.

#page #sidebarWork h3, #page #sidebar h3

{ margin-bottom: 0; margin-top: 0; }