Back to the Beginning

Turn Back the Clock

If I could go back in time and give myself advice that would help me through my two semesters of web design, I would definitely not be short for things to say. Some of the most important aspects that I had to learn more thoroughly through my web design classes include organization, time management, and attention to detail.

Like every other design class, organization is stressed for importance. However, I think it is even more crucial in web design that you stay organized because of the functionality and interactivity aspect of the medium. With pages linking to pages linked to images, fonts, and style sheets, keeping your files organized and structured is of critical importance to a successful site. Without an organized file structure, you cannot hope to manage a successful site.

Time management is also extremely important to being a successful web designer. Do NOT underestimate the amount of time designing for the web can take. Because of the added level of interactivity and fluidity the web has, you are designing just as much if not more for functionality than you are for strictly visuals. Underestimating coding will always go badly, as problems WILL arise (especially because we are students) and not leaving enough time to troubleshoot the issue will be your downfall.

The last tip goes along with  the previous one. Attention to detail is a really valuable trait with a good web designer. It is in the details and embellishments such as interesting navigation, sprites, jquery, etc that give your site the extra level of excellence and set your site apart from other mediocre ones. However, in order to allow yourself the opportunity to add such elements means you would have had to used your time wisely and gotten the basic structure elements sorted out and set for your page.

Fresh Meat

For those students about to enter the realm of web design I say DONT PANIC. Web may seem intimidating and overwhelming but look at in instead as a challenging opportunity. READ your book. Practice A LOT. Start good habits from the beginning and you will be setting yourself up for success. Dont be afraid to be bad at it at the beginning, just know yourself well enough to spend extra time on it if you need to.

However, in case my words of comfort didn’t quite do it, HERE is a great link to a crucial tool-utilize it! It is called the 960 grid and it will be your very best friend. Not only does it give you proportional templates for your thumbnails and roughs, but it also gives you the correlating psd files so you can always remain consistent in your design. Just download the file and enjoy 3 different design options (12, 16, or 24 column grids).

Advertisements

April 23, 2012 at 3:04 pm Leave a comment

Now Your’e Speakin’ my Language

For those of you who cant get enough of the excitement generating about HTML5, here is a closer look at some of the important aspects I touched on last post.

Semantics

Us current web designers are familiar with the present levels of semantic mark-up including divisions, headings h1–h6, definition, unordered, ordered lists, forms, fieldsets, and tables. Now in HTML5, marking up a page will utilize a different kind of organization with new tags.

These new tags include:

  • nav- Used for major navigation (global, local, or page footer).
  • header- Used to group introduction or navigational aids.
  • footer- Used to contain information about a containing element.
  • section- Used to group thematically related content.
  • article- Used to group self-contained related content.
  • aside- Used to group information related to the content, but if removed doesn’t alter or detract from over-all meaning of the content (pull-quotes, ads, etc.).

There are also text-level semantics that are new to html including mark, time, meter, and progress which allow us to control things such as highlighting text, mark-up measurements, and values the process of change. Through the standardization of these tags, web designers can hope for a more uniform and organized method of web design.

Here is a linkto an awesome HTML5 resource that shows how the new mark-up looks:

Form Elements

Along with new attributes in the semantic elements, there is also newness in the Form elements. Some  include fields like Input, Output, Datalist, and Form.

Input is a particularly good example of some of the new mark up in its addition of list, pattern, and formmethod. The input type also now offers such tags as search, tel, url, and email with a special option of multiple to list multiple email addresses.

You can see Here a good explanation of how to properly use HTML5 in your forms:


Here, we get really helpful knowledge on how and when to use some of these new attributes. Scrolling around on this website in general will give you the majority of knowledge-everything from attributes to validations-you will need in order to venture forth into HTML5. Read all about HTML5 at www.html5rocks.com.

We all have so much to look forward to in the upcoming years with HTML5 on the horizon. Out to once again revolutionize the web design industry, HTML5 brings us so many exciting new options and endless posiblities.

April 9, 2012 at 5:21 pm Leave a comment

5th Time’s a Charm…

What is HTML5?

HTML has gone through many revisions and updates over the years to get us to where we are today. Now, yet another improvement is on the horizon, HTML5. The new installment in web development means many things, both good and bad, to designers when thinking about the future.

New Features and Benefits

One of the greatest and easiest features to come in HTML5 is that you can goodbye to the need for plug-in usage for videos in your code. A change like this will give the user a much faster download time and decreases the risk of receiving a virus on your computer.

There is also an impressive storage feature that allows information to be held in the user’s cache and accessed at a later time. This feature also doesn’t require internet access to run these apps that have their information stored in the cache, which is helpful to designers when not around wifi and also with user’s because of a faster download time.

And finally, probably the most talked-about feature is the cross-browser compatibility. Gone are the days where you would have to write separate code for browsers like safari or IE. HTML5 will help to create a consistent user experience across all browsers.

Differences

Validation is probably one of the most surprising differences between HTML5 and HTML4.0 or XHTML 1.0 Strict. In HTML5, code can be in uppercase or lowercase and can have open tags and multiple elements in a link. In either of its predecessors, having all lowercase, all closed tabs, and not more than one element in a link was very important and would not validate without it. In my opinion, even though this gives a bit more flexibility, it holds the potential to make for disorganized files.

Presentation elements are also quite different to any of the earlier versions. HTML5 now eliminates the ability to use tables and frames to build out sites. This new system allows for all layout to be done in CSS and only allows tables for tabular data specifically. Keep in mind though that even though some of these features might sound exciting, it is not entirely finished or functional and there is still a lot left to be done to perfect it.

Examples

This article on 24 ways to have a field day with html5 shows some interesting new features to the structure of forms. Some of the new form elements include things such as credit card and telephone numbers,  email, and required fields while utilizing features like placeholders and autofocus. These will help to better organize the content and provide the user with a better experience.

The website I was most intregued by in my research was The Wilderness Downtown site that allowed you to enter in an address and have the google earth map of that image be an incorporated background in a short film that gets played. This was really amazing to me and was done quite creatively and gave it a unique viewer experience.

Across the different browsers the site experience was about the same, just a little slower download time for firefox.

March 26, 2012 at 3:18 pm Leave a comment

JCrazy

What is JQuery?

JQuery is something that is getting more and more common in websites today. It is a form of JavaScript that introduces unique and interactive features to your page. It can be tricky to learn to use properly, as are most aspects of web design, but very handy once you have mastered it. Also good to keep in mind is that many resources to help you solve many of your Java problems are easy to find online.

Benefits

Java, and more specifically JQuery, allow you to embellish your website with many features. Users expect a certain level of interactivity on most sites they visit, and Java (JQuery plug-ins) is the way to meet their needs. It also comes with the benefit of being faster and simpler to write, as well as supporting CSS 1, 2, and 3 and will work in all major browsers.

Downsides

Although all of the options of Java can get you excited, be cautious not to get too script-happy when designing your site with it. There is definitely a balance of how much you want to use in a given design. As like anything else, there are negative aspects to using Java. First, even though it does work crossbrowser, there can be rendering differences between the different browsers that may make diminish the useability of that feature. This becomes even more of a problem with older browsers such as IE 1.0-5.x. You also will run into problems if you have relied too heavily on JavaScript and the user has Java turned off, effecting their usage of the site. All in all, keep in mind to use Java as a way to add extras or enhance your site; not a way to build it and you should be ok.

Plug–Ins

Uniform

Uniform is a plug-in that allows for you as a designer to be able to customize and style elements like drop-down menus, checkboxes, file upload inputs, etc. This also leads to the ability to create unity to the elements between browsers. It works by simply masking over the original elements, in order to keep useability working at its best.

Nivo Slider

Nivo Slider is a great plug-in that gives you a nice photo slideshow. They have up to 16 unique transition effects, so finding an interesting and relevant look that goes with your design is guaranteed. The file size is also pretty small and allows for keyboard scrolling as well. All of these features would make for a very fast and easy experience on your site.

Tip Tip

Tip Tip is a tool tip plug-in that is as smart as your browser’s. Tool tip is an intelligent tip bar that is completely customizable in CSS, has a very small file size, and will reformat itself to always stay inside the browser window! This is very helpful for us as designers because it gives us more options to make our designs look cohesive (being that its customizable) and to get our message read.

News Ticker

News Ticker ads an animated news bar at the top of your site (like BBC’s news ticker). It is very simple to use and allows for a guarantee that current or important information is seen by the user. For a site that tracks current situations and updates, this would be a very handy tool for the designer to implement.

SimpleModal

SimpleModal allows for a fully CSS-customizable dialog box for your site. This can be useful for many aspects of your site, such as login, send message, or even searches. Imputing the plug-in is relatively simple and they give you a few options and demos on the site to familiarize yourself with the available options.

Website

Because Navigation is one of the most expected places to see some type of Java, I chose a site where I think their navigation is nicely styled. Here on Aviary when you scroll over the navigation,you get a nice drop down menu that you can tell they have done a lot to style to match the aesthetic of the page. It also gives a nice contrast to the background so finding what you want is easy. Also, in the case of the first tab “Aviary Tools” we see the use of a two column drop down menu.

February 8, 2012 at 6:33 pm Leave a comment

Mood, Anyone?

Here is my mood board for the first project:

Since I wasn’t sure which direction I was going to go, I did a mini mood board for the four ideas I decided to continue with into my rough stage. For the Carnival theme, I wanted a fun, nighttime, energetic vibe that incorporate some of the iconic images associated with the atmosphere of the fair. For the Fairytale theme, I wanted a very soft and romantic feeling without being to childish. For the Toy theme, I wanted simple shapes and bold colors and that feature some of the most beloved toys. And for the Art/Painting page, I wanted it to be very colorful, but also a bit chaotic, as so many artists and art work stations are. Lots of brushstrokes and splatters, etc to help give that artsy aesthetic.

January 11, 2012 at 7:16 pm Leave a comment

How would YOU respond?

Responsive Web Design

Responsive web design is an amazing concept that features the unique ability to design for multiple devices and layouts within one design. Using the properties of a “fluid grid” and “media queries” you are able to design multiple layouts within one another that will change and engage the correct layout depending on how the page is being viewed. This practice can save a lot of time and stress for a designer (not having to design multiple individual pages for each device and resolution) and can allow for a better experience for the viewer.

Fluid Grids

Having a fluid Grid is what is going to allow your page to customize itself to different devices, layouts, and resolutions. The concept is not that difficult to understand if you just grasp that the dimensions are set up as percentages rather than exact pixels. By using proportions in your design, it does not matter which device is accessing the information, it will always be showing them the correct version of your website. Beginner’s Guide to Responsive Web Design describes the process as this:

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:

Another great source for learning the proportions is in Responsive Web Design: What It Is and How To Use It. Here, they show a chart on different proportions used on different devices:

Media Queries

Media Queries are what allow the website to know which version or resolution of the site to display. It inquires about what device is accessing the page and therefore displays the appropriate page layout. In this case, it is mostly done using the “min–width“ feature. This is especially important in smaller devices like an iphone, where the dimensions are very small and it would be easy to receive a nasty scroll bar.

My Design

For my final project design, implementing these features would not be extremely complicated. My site mainly features a two–collumn design so I would focus on making my images scale to a proportion that would not be so overwhelming for a medium–sized device (tablet) and would condense my layout to one collumn for smaller dimensions (such as a smart phone) using the order of header, navigation, and then body content.

January 9, 2012 at 6:21 pm Leave a comment

Post 8: The Future of Web Design

For this last and final blog post I have chosen to pass along the knowledge offered to young web designers at a site called mindgruve. There, they have an article on the “Top Web Design Trends for 2012” which can be very important for us upcoming designers to be aware of, even if we are not at that skill level quite yet.

They also link to pages that show great examples of each of the tips they talk about; HTML5, CSS3, mobile useability, sliders, 3D effects, one page websites, grid-ridden layouts, typography, large images, and parallax scrolling as seen in an awesome example here.

This effect was seen in video games but can now help to add an interesting level of interactivity to a website. It allows for things to scroll in different directions and, in cases like this, to help tell a story.

The info on having large image backgrounds was also really interesting for me to read and consider because in class and other places I have read, they have emphasized all of the problems that can go along with large photos in regards to file sizes and loading speeds. They make the point here that with all of the program uploads and general technological advancements, those problems should fade in importance and allow greater accommodations for large images. They offer their own website as the example they show for the large photo tip.

The site also links to other interesting articles in other categories for young designers such as “Why You Should Integrate Email + Social Media” and “Behavior Targeted Advertising is About to Blow Up.”

I found this site to be very useful and interesting to read as a fellow designer. It also can act as a source of inspiration in designs to come by keeping these qualities in mind throughout the design process.

November 24, 2011 at 6:52 pm Leave a comment

Older Posts


Recent Posts