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!
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 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.
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.
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.
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.
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
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; }
Blog post #6: Final Project Visual Research
After our presentation on Wednesday, I reevaluated the focus of my website. Because I want to target a younger audience, I decided to drop the history and the cross culture perceptions. Instead, the other three additional pages would be divided into: types of kisses, fun facts, and health benefits. The last page would give additional support to my original statistic; you burn 26 calories per every one minute that you kiss someone. I want this website to be fun, entertaining, yet informative and credible.
Mood Board
While researching my topic, I noticed that most of the websites where content heavy, and not engaging. I didn’t find any that could help me get inspired nor motivated. Therefore, I had to explore a little further in order to find inspiriting websites.
Purity
Even though this website has a lot of information, the design and organization is completely beautiful. It creates the false impression of being a multi page website, when its not. The navigation scrolls down along the different sections of the page. It is easy to follow and the information is well organized. The typography matches the overall design, and the colors serve as an unifying element. The footer, however, seems a slightly out of place because it doesn’t follow the same style as the rest of the site. I did look up the code using firebug, and I noticed that it was built using JavaScript, which is something we won’t be covering during this semester.
Chirp
This was another website I found very inspiring. I was immediately drawn to it because of the big typeface, the colors, the illustration style, and the hover stage of the Polaroid pictures. Even though, the information on the homepage is all scatter around, the navigation is easy to find. There are some hierarchy problems, but the colors and the design elements help organize the information. The interior pages follow the same grid structure, and they just have slight differences. This website was also designed using JavaScript. However, I think the design is simple enough be able to design it using HTML and CSS.
Blog Post #5: Single Page Website
Less is definitely more. There is something about a single page website that invites the viewer in. Whether it is the simplistic layout, the bigger size font, or the attractive imagery, this new trend is definitely catching the eyes of internet users. Before I knew what a single page site was, I had been noticing how website design was becoming much more streamline. They present characteristic such as bigger font sizes, less body text, more imagery, and the entire design tends to fit above the fold. I had already talked about a single page website in one of my previous blog posts: WhoisLeon. At the time, I had mentioned it was probably one of my favorites. “Simple, succinct, clean, well-organized, and beautifully design”.
Home
The Good
I also wanted to highlight other websites that exemplify what a single page design should look like. Arnaudthuillier I find the simplicity of this website fascinating. There is no way one could get lost navigating this website. The first thing you see on the home section is the logo of the designer, his name, and what he does. After that, your eyes go down to an all icons navigation (very self-explanatory). This navigation takes you to his profile, then his portfolio, and lastly to his contact information.
festadascomadres has a little more information about the company, as well as imagery. Even 
though this website has much more to offer to the viewer, it still follows the principles of a single page design. The navigation is easy to find, and the size of the body text is larger than what we are accustomed to, making it easier to read. The colors used throughout the website helps set an appropriate mood that represents what the company does.
The Bad
On the other hand, sparklingmilk was a bit confusing for me to navigate. I could not find the 
navigation, and for this reason, I kept wanted to click on every single title I found. Because there was no navigation, I had to keep scrolling down in order to read the rest of the information. Also, the text size was a little too big.
The Exercise
For exercise 05, I decided to create a website for one of my favorite singers, Kate Nash. She is an English
singer, songwriter, and musician. I had never visited her website before, and I was a little surprise of how unorganized it looks. There is not a clear layout structure, and the navigation does not exhibit any style, like no thought was put into it. If it wasn’t for the background image, this website would be a complete disaster. She has a Facebook, a myspace page, a Twitter account, and a Youtube channel. All these sites have unifying elements that reflect Kate Nash music style. She is much more popular in England, and well-known in the indie music scene. Therefore, having a single page website can simplify the information, making it easier for new fans to find what they are looking for.
Youtube
Blog post #4: Usability in Web Design
It is still necessary to mention the importance of a good navigation system of a website. There isn’t a more frustrating thing than to visit a webpage and not truly find what you are looking for. I found in the internet an article; Good Web Site Navigation-Reaching the Information Instantly, very interested and helpful, which highlighted the steps that need to be followed in order to create an effective navigation for your website. The article is divided in a different steps: Checklist and key points to consider when designing navigation, Think and act like the average user does. Then design., Design good primary web site navigation, Position of the secondary navigation does not have a general rule, Reasons against intricate, overly modern navigation, Web site navigation checklist, and others. All of these various steps contribute to properly plan the ideal organization of a navegation system. For example in the article they mention that “the less clicks the better,” which is ultimately the goal of both the designer and the individuals visiting the web site. In a way the article makes you think as if you were the one visiting the web site. Therefore, it helps you create a friendly user website.
Think as a user. Then Design.
I decided to look into Starbucks Coffee Web site. Once again, I was a bit disappointed with the design of Starbucks’ web page. I think their products and the actual physical stores have better designs than the web site; however, I do believe the page was well designed, organized and with a lot of white space, which is pleasing to the eye. The first detail I noticed when I enter Starbucks’ site, they do not have any background imagery. It is just plain white and above the fold they do not show any image of the Starbucks coffee. Because it is such a large company with so many products, I was looking forward to seeing their organization in their navigation system.
Navigation:
Their navigation follows the same simplistic style of the entire web site. It is easy to find and to navigate it. The navigation has descriptive words that described what each tab represents, which helps the user to easily locate what they are looking for. Once you hover over a particular link, the tab opens up and the background changes to black while the text changes to white. The tab displays a number of items, which will take you to different places within the site. All the navigation items are organized by using the unordered list HTML feature. Their main navigation is set as a horizontal list of links. Very clean, organized, and easy to use.
Starbucks Navigation
Breadcrumbs:
I thought it was interesting that this page did not have evident breadcrumbs. In fact, the lack of breadcrumbs made me a bit unconformable. I did notice that when you scroll down to the very end, one could see some sort of breadcrumb evidence, but it was not obvious. If I were not looking for it, then I probably would have missed it.
Text Links Styling:
I did notice a variety of different styles when it came to links. For example, within the navigation, when the link was not active, the text was light and black, when you hovered over the link, then the text became green. As I mentioned before, once the link is hovered a black background appears, and the text automatically changes to white. Once the text active, then the link became green and bold. In addition, other links would only have a green or gray highlight whether it was hovered or visited, they don’t change line- weight, color, nor position.
Site Search:
The navigation bar is located in the top right hand corner of the web page. The thing that truly draws the eyes’ attention is the green magnifying glass icon that represents the search bar. It’s positioned in a place where user would expect it to be, and that helps to recognize what it is. It is not big or bold, but you can definitely find it.
Search Bar
Starbuck Store:
Just as I was a bit disappointed with the Starbucks’ page, I was equally thrilled with the design of the Starbucks’ online store. I thought it was interesting how it was inside the website, but it had a slightly different design. The navigation bar had a different treatment and the images were set as rotating headings. In addition to the navigation, there were images that served as links to different features within the shop. The overall design of the online shop was exactly what I had been expecting of the actual Starbucks’ website. It captures in a more effective way the feeling that Starbucks evokes and represents.
Kimita ~ 