KeyCss.com

HTML5 Charset

2010-08-27T22:29:53Z

The HTML spec recommends to use UTF-8 as this is a superset of the commonly used ISO-8859-1 and is backwards-compatible with ASCII.
UTF-8 has a wider range of characters to which you type directly on you html documents.

For example you are using utf-8 as your charset on your html5 documents this means you can type the pound sign(£) directly into your html instead of “£” the only ones you still have to use the ordinary html entities are “<” and “>” due to it’s direct connection with html documents.

I would recommend reading the spec on this matter and the wikipedia article on UTF-8, being the later a very completed overview of UTF-8.

Conclusion

Either you are using XHTML or HTML5 i would suggest for you to stick with UTF-8 as the standard charset.

HTML5 Books

2010-08-27T17:39:10Z

HTML5 Straight to the point - Elizabeth Castro

Book Description:
This project-based book walks the reader through the creation of a Web site, using HTML5 and CSS3. It shows how to use the new HTML5 syntax (article, section, and so on) and also how to write JavaScript to force IE to recognize that code so that it can be used right now. It covers the newer parts of HTML5 (such as canvas and video) with a strong emphasis on what works right now, using what people are calling “progressive enhancement” (writing web pages that can be viewed by all but that those with superior connections/systems can see in better ways). The book uses a combination of project examples and explanation to teach HTML5 thoroughly and succinctly.

Amazon Page - Elizabeth Castro website.

HTML5 Up and Running - Mark Pilgrim

Book Description:
HTML5: Up & Running carefully guides you though the important changes in this version with lots of hands-on examples, including markup, graphics, and screenshots. You’ll learn how to use HTML5 markup to add video, offline capabilities, and more—and you’ll be able to put that functionality to work right away.

Publishers Website - Mark Pilgrim.

Introducing HTML5 - Bruce Lawson, Remy Sharp

This book provides great information on HTML5 with good examples and plenty of resources to help you to conquer the new world of HTML5.

Bruce and Remy, teach you to how to implement the new features of html5 in an accessible way and informing the reader on what works on todays browsers.

Book’s Website - Bruce Lawson Website - Remy Sharp Website

HTML5 Designing Rich Internet Applications - Matthew David

HTML5 came to improve the web development world and in this book Matthew shows you what HTML5 can do for your websites by providing demo applications and tutorials that illustrates the power and interactivity offered by html5.

The companion website visualizetheweb.com has many resources, and information to further develop your skills in html5.

Publishers Website - Matthew David.

HTML5 for designers - Jeremy Keith

This is an 85 pages book which transforms a long and tedious spec into a brilliant user’s guide by cutting the chase with practical examples.

The author is Jeremy Keith the author of DOM scripting and Bulletprof Ajax. He also blogs at the adactio.com

Order - Alistapart Website - Author Website

IE8 HTML5 support

2010-05-16T23:48:46Z

Well after that episode i got the bug of html5 and started experiencing whit it a lot more, but there is always the issue IE7 / IE8 html5 support so for client work i am using this sudo approach explained in the podcast by Jeremy Keith.

This approach consists in adding div’s with classes that map to the new html5 spec.

But in some new personal projects i am using straight html5 and to make htm5 markup work in IE7 / IE8 i have include HTML5 shiv a javascript piece of code developed by Remy sharp.

This piece of code does wonders and is available here.

You can check HTML5 enabling script blog post where Remy Sharp introduces this script and gives basic instructions on how to use it, but basically you have to place the script in the header of your website, this being place inside IE conditional tags as follows:

If you can rely on the use of javascript for your next project why not take HTML5 for a spin.

One last word is that if you want to be on the top of html5 i suggest you to subscribe to html5doctor website as this is full of very useful information related to html5.

Great Packaging Design

2010-04-05T19:01:05Z

Resources

Interview with Renato Marques a Portuguese Motion grapher

2010-04-05T02:52:35Z

Renato could you please introduce yourself for Keycss.com readers?

My name is Renato Marques, I´m a 26 years old, a motion designer, living in Lisbon.

I work mainly as a motiongrapher, but I´m starting to produce my own projects,
where I can create the concept, direct and do the design components.

This doesn’t mean that I don´t like to work with a team, because I do, and I think that it’s really important, but from time to time, it’s good to be in control of everything.

The kind of work that i really love to do, is without a doubt, title sequences.

It´s that kind of work that grows, while your are working on it, you get to try a bounce of different things in oppose to advertising.

What made you start a career in the design industry and has anyone in particular influenced this decision?

The design thing happened casually before going to college.

I was actually thinking in becoming a painter, because I always liked to give a personal interpretation of life and things, and for me painting was and still is a perfect way to exorcise feelings and aspirations. In the meanwhile I thought that maybe it wasn’t enough for me and I changed my mind and went to college.

I finished a degree in communication design, but without really knowing what design was in fact, which is something that I´m still trying to figure out.

So, in a way or another, I think that I can say that painting helped me in my decision, and still helps me now. It’s a perfect way of freedom in visual communication.

Alright interesting path, so when you first began your career, what were the biggest challenges you faced?

There were plenty. From the industry that is still pretty closed in Portugal, to the payments.

Starting in this industry is not easy at all, you have to really love what you do, or else you are not going to make it. But fortunately I got an internship at Euro Rscg 4D Lisbon, that allowed me to learn how the Industry works.

The other thing that was hard to handle, was the rhythm, which was completely different from college as all the hours and dedication necessary in this area is a lot.

What was your view on the design back then? Has your perception changed since?

Yes it completely changed.

When I started, I looked at Design as a personal communication tool, and I wanted to use it, without any method at all, in a way I was using it as a art tool nothing else.

Now I see it more as a way to communicate what others want. For that I have to have a method for me to achieve results constantly, and not work Design as Art, in spite of doing that sometimes.

5- How do you typically start a new project any method in particular?

I always try to search for references, to see what was done on the kind of work that I will be doing. Then I try to find the right font, and when that happens, everything becomes real easy. And from then one it´s all about experiment. That is mainly it. It´s a research process, that leads to the creation of the first mood boards.

On my last interview with motion designer Jorinna Scherle she mention that she gets inspiration from things like nature or modern art, In your case is there any process that you follow for inspiration or brainstorming ?

My main references are movies. I watch as many as I can, with the maximum attention to detail as possible. For example Fight Club is a huge source of fantastic references, not only because of the aesthetics, but also for the “twists and turns” that inspire me, with out a doubt.

For me when I design I have music as my best friend really like it and I always wanted to know if other fellows designers have something similar to stimulate the design process, does music influence your design spirit or there is any other particular thing that help you going?

Totally! When I´m tired or out of focus, and have a project that needs to be delivered, I always depend on music. One of my favorites is Cinematic Orchestra. Their sound has a power that involves you, and pushes you to your “zone”.

I recommend every one to see and hear “The Man with the Movie Camera”, which the sound track is from Cinematic.

I have other tricks to keep me motivated, like, working at home, instead of driving to my office, which, for me, is pretty cool to have that freedom. I also like to “download the internet” searching for good references, for a particular project.

When you first started what was your very first paid job or project you performed as a graphic designer, any interesting story you would like to share?

I honestly can´t remember that. But I will never forget when I saw one illustration I did printed in the morning paper. That rush really became a fuel for continuing forward, and searching what I want.

Is there any advice you give for new comers to the design industry?

Everyone “copy´s” works from somebody, my advice is to copy from the best.

Do you have any preferred artists that you like in particular?

Pleix is certainly one of them. They are mainly responsible for my decision to start working on motion design.

They have such groundbreaking work. I am still amazed admiring their work several years later.

Is there any online resources or feeds you follow related to the industry?

Several:

www.motionographer.com - for inspiration.
www.greyscalegorilla.com/blog/ - for understanding.
www.videocoplilot.net - for learning.

What are your 5 favorite sites online?

That’s not easy, but:

Where can the readers find out more about you and your work?

I have a new site that is going to be easily updated. that is www.cargocollective.com/renatomarques, so stay tuned.

I have there all of my contacts and my best work.

Thanks for everything, and keep up the good work.

Conclusion

I would like to publicly say thank you to Renato for his time in answer to my questions, and that i really appreciate his work.
Please time some time o see his work online, and you can start be whatching the video below.

INL SHOWCASE DIRECTOR´S CUT from RENATO MARQUES on Vimeo.

This is a showcase of work done for the inauguration of INL. There was total creative freedom, which was great. The agency was Grey Lisbon.

Jquery xml tutorial

2010-04-04T23:17:21Z

Note: All files are placed inside the same folder.

1. The XML file

This xml file is a simple task list with three elements and each element has two child nodes, the task heading and the task body. A simple file to make the tutorial simple enough.


	
	    Reminder
	    Don not forget the game this weekend!
	
	
	    Beer after game
	    Let go for a beer after weekend
	
	
	    Ah! subscribe to keycss.com
	    Don not forget to subscribe to keycss.com RSS

2. The HTML page element

I have included an unordered list with the id of “place-holder” and in this list I will append the results provided by the jquey request.
So inside the body tag of your html document paste the code snippet below:

3. Download and setup Jquery

I like to link to the jquery file hosted on google code in Google Ajax Libraries, there you will find jquery link among other popular javascript libraries.

The reason for this is that a general part of developers link to this this file therefor is most likely to be in the users cache and a faster loading time will be achieved, now back to the tutorial.

Paste the link below in between the head tags of your document

The next step is to have an external javascript file in which i will place my custom javascript code, i called it script.js but you can call it whatever you want.
I load it into the web page as below by placing it between the head tags:

Now that we are set keep reading, the real deal is coming in a moment

4. Requesting XML file with jquery $.ajax function

In the code snippet below i requested the xml file via $.ajax function specifying four arguments.

type: this describes what kind of request we are making, in this case we make a GET request as we are only reading data and not changing anything on the server side.
url: simply indicate were is the source of our data in our case is tasks.xml located on the tutorial folder and exemplified on step 1.
dataType: as descriptive as it is we are telling Jquery what type of data we are dealing with.
success: this has the name of the function we will use to manipulate and read the data requested, in my case below i called my function manipulateXML.

$(document).ready(function()
{
 	 $.ajax({
 	   type: "GET",
   	   url: "tasks.xml",
    	   dataType: "xml",
    	   success: manipulateXml
  	});
});

Place the code above in your script.js file

5. Read and manipulate the XML with Jquery

Now that we have requested the data and told Jquery to use the function manipulateXml to deal with the response we need to create that function, paste the code snippet below in your script.js file just after the previous snippet.

function  manipulateXml(data){
  //find every Tutorial and print the author
  $(data).find("task").each(function() {
	
	var heading = $(this).find("heading").text();
	var body = $(this).find("body").text();
        
        var output = "";
	output += "" + heading + "";
	output += "" + body + "";
	output += "";
     
        $("#place-holder").append(output);
  });
}

Now step by step

Our function manipulateXml() has one argument that is in fact the response object that is provided to us by the $.ajax function, so once the request is successful we have an object to work with in my case i called it data.

With this data which is in fact a DOM tree i use the function .find() to find all the xml elements with the name of task, after i utilize the .each() to loop my results and generate a response.

$(data).find("task").each(function(){
});

Within my .each() loop i created two variables that represent the two child nodes of my task elements, utilizing the keyword this as in ” this task ” and once again i use the .find() to get my elements.

Another important thing here is that in fact for example we found the heading element but what we want is the text inside that particular element so for that reason we call the function .text() to simply get the text we want.

var heading = $(this).find("heading").text();
var body = $(this).find("body").text();

Another step we need to do is to actually output our data into the web page after all that is the main goal right!
So i created a variable output and simply assign it a string with the markup and variables heading, body.

var output = "";
output += "" + heading + "";
output += "" + body + "";
output += "";

Last but not the least i append our output variable to the unordered list using the .append() function.

 $("#place-holder").append(output);

There you go, if all went alright you should be able to see your tasks in the web page once you load it, if not sure please have a look at the demo of this tutorial.

Conclusion

In this Jquery XML tutorial i explained a simple way to deal with xml files and jquery, i hope that its clear.

For me using Jquery to consume XML is just so easy and advantageous, in this jquery xml tutorial i used a simple xml file to exemplify the concept and the basic steps but if for example you wanted to get your twitter stream would be as easy as what we done in this tutorial.

Please view the example to better understand the tutorial, and please download the file to play around.

View the example or Download the files.

Page Fade In effect with Jquery

2010-02-23T04:49:06Z

1. Set up HTML

Firstly we set up a basic web page, nothing fancy just for the demonstration, on this page i will include a page wrapper with some text.

Place the code displayed below, inside the body tag of a HTML document.



Page Fade In effect with Jquery
A simple Jquery trick to Fade In any web page in your web site
To verify it just reload this page.
Check the tutorial page

2. Add some nice CSS

With this css i have added a nice background to the body, set some basic styling for the text, centered the page wrapper , added padding and also added some css3 rounded corners.

This is nothing to advanced but gives it a nice look, i think.

body {
     background: url('images/background.png') top left repeat-x;
}

h1 {
    color: #ffffff;
    font-family: Helvetica, arial, verdana;
    font-size: 24px; color:#000000;
}

p { 
    font-size: 13px; 
    line-height: 13pt; 
    margin-top: 8px; 
    color: #808080;
}

a { 
    font-size: 13px;
    text-decoration: none;
    color:#e51837;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#page_wrapper {
    width:500px;
    margin:0 auto; 
    border: 1px solid #cccccc; 
    padding: 20px;
    background-color:#ffffff;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

#page_wrapper img {
    float:right;
}

Place the code above in a stylesheet or between the the head tag of an HTML document.

3. The Jquery nifty bit

I have placed this Jquery code before the end of the closing body tag, so that the page effect happen before the all document is loaded.

With two lines of Jquery code we create the fade in effect of the page, yes I know I love it too.

$('body').hide();
$('body').fadeIn(1000);

I placed all the code in one page to make this tutorial simple but for good reasons and practice this should be placed outside the document and linked to it.

Conclusion

I dont know about you but i like the effect of having the page fading in on this website, hope you like this little trick.
Please feel free to ask any questions on the comments below and i will assist you if you have any problem with this tutorial.

Please view the example to better understand the tutorial, and please download the file to play around.

View the example or Download the files.

Grid tool to design in the browser

2010-02-20T06:03:42Z

Since the begin of graphic design one of its core elements is layout and a fantastic way to help you achieve a professional layout is the use of grids.

Well this has arrived to the browser by bookmarking a Bookmarklet called Grid developed by Allan Jardine .

This tool is very simple and easy to use, you bookmark this Tool from the link provided above, and one you clicked you will have three main sections: Page, Latitude and Gutter.

In the page section you specify the details of your page as for example the width and other easily understandable attributes, followed by the number of columns you require as in a traditional print worflow and lastly you choose the gutter details.

This tool is very easy and useful, give it a try.

I would like to say thank you to Allan Jardine for this so useful tool, well done.

Web design 101: Wireframes

2009-12-10T04:46:14Z

Wireframes and Information Architecture

Information architecture is an important element of any website and wireframes will help you produce a visualization of the overall project. This will also allow you to have an easier implementation of the project on a long run avoiding miss understandings on what is the overall goal.

Keep it simple

Wire frames are used to outline the initial concept of the website so for that reason they should be kept simple to better verify the functionality and main goal without much clutter, after all the point is to have a basic starting point.
However the most complex is the website the more elaborate wireframes should be but maintaining a simple outline.

A good resource to find all kinds of wireframes is a Tumblelog brought to you by Ivana Jurcic, Web Developer from Belgrade wireframes.tumblr.com. Go and have a look but come back…

Wireframing will save you time

Ok, you might be septic about this idea and adopt the point of view that will be an extra cost and time.

Yes, but in a long run you will correct or change less elements as you already have a solid starting point based on the wireframes produced , therefore the overall time frame of you project will be reduced and if any new features pop out you will have a straight view on were to incorporate them.

Share It

You should share your wireframes with coleagues, business partners or anyone with a relevant opinion to the overall project.

This will allow everyone in that project to better understand the concept, functionality and path, bringing all the ideas to the table at an earlier stage. Furthermore the tasks will most likely be better prepared since everyone is in the same page.

Conclusion

I am sure that there is much more related to wireframing, however this is the main concepts i use for projects in which i am involved.
I hope this article will convince you that wireframes are important and you should ponder if they will bring you any extra productivity or help you to achieve a better final product.

Useful links

Interview with Jorinna Scherle a Motion designer

2009-10-17T01:07:13Z

I would like to say thank you to Jorinna for the availability to answer my questions and for designing such inspirational work.

Interview

Hello Jorinna thank you for the time spared to answer some questions to keycss.com, so :

Can you introduce yourself for our readers?

My name is Jorinna Scherle, I’m a 27-year-old designer, living in Berlin.

I’m mostly focused on motion and interactive design, but always try to spend as much time as possible on art projects. I work as a freelance designer for companies all over Germany – right now in Munich for a broadcast design studio.

I really like your motion design work and my question is, how did you get interested in motion graphics ?

When I was 19 and still at school, it was just fun for me to mix electronic sounds and compose short music pieces for websites and flash animations. This was my first contact with “motion graphics”.

I worked then some years as a screen designer, until I found out for myself, that making films and animation is my passion that drives me forward. Animation in general gives me the possibility to create designs even for big clients that are not limited by too many guidelines and the combination of visual and auditive is one the things that I love most.

Where do you usually get inspiration for your fantastic work ?

I try to get my inspiration from artistic fields outside design like modern art, music, theater or modern ballet – but what inspires me most is nature and light.

Taking a walk through beautiful forests and observing nature from different perspectives, gives me my visual energy for the next project.

In contrast to that I like electronic music, especially if it comes from Sweden, Norway or Denmark, I love watching people, drinking white Russian and I’m a big fan of David Lynch.

Could you describe a little about your design process ?

For me every project needs some time to grow until I really start with the design process. I need to be sure, how the result should feel like, and I need at least a rough idea how to achieve that.

I’m ready then to do the next steps, and they are never the same, in many commercial projects, I start with styleframes and really lots of layouts for the storyboard, that makes it easier to produce after wards in 3d, especially if you are working together with other 3d artists or have a bluescreen shoot with many people.

If I work on my personal projects or don’t have to get very fix results in the beginning, I enjoy working very intuitive and change the style and look until I’m happy with it. Sometimes I start with layouts in Photoshop, sometimes even directly in 3d or with scripts for generative pieces like audioreactive, for other projects I take my camera and film close up stuff, or I do some scribels and try to get myself more clear about my idea.

Which tools do you use on the daily basis to achieve this stunning work ?

It always depends on the project, but I like it most to mix different techniques or programs and use the specific tools each one offers, for example simple modelling and lighting in 3d, use some special blurs in the compositing and use programs like photoshop to quickly try different looks and compositions and manage all the color adjustments.

But in the end tools are just tools. I don’t want to let the software dictate my style and never use plugins as a replacement for good design. In fact I don’t like plugins, if you can identify them after wards.

What resources would you point someone who is interested in learning motion design ?

The resources I recommend every beginner are ambition, patience and of course a little talent for design. For me the hardest thing was to actually start learning.

So the best way to learn the software and how animation works, is to have a real project. If you work with a concrete aim, you will learn the things you need to achieve it. I’m really glad, that so many people online help you to learn 3d and animation stuff.

Actually you just need a computer, have to spend a lot of time in front of it and never give up, even if you don’t understand anything at first.

If our readers are interested in your work, where can they find you online ?

You can find my work online: www.jorinna.com

And you are very welcome on my next exhibiton: Nov. 13th, 2009, Berlin (detailed location soon on my website!)
Thanks, Joao, for the interview and good luck with your blog!

Conclusion

For all the readers i hope this interview helped either by the sincere answers or by Jorinna’s works.

Please comment bellow or if you know some other designers that you would like them to featured on this blog please don’t be shy.

Web design 101: Page Layout

2009-10-08T20:30:23Z

Web page layout has to deal with technical issues as well as aesthetic ones.

The technical issues include: how large the files size can be, what layout style will better fit your goals, what screen resolutions your layout will be supporting.

The aesthetics choices are: how we arrange the text, areas of focus, call-to-actions, white space, what kind graphics or images transmit the spirit and goals of the website.

The main step for a good web page layout is to understand the medium in which is involved.

File Size Concerns

As it is logic the larger the file size of a web page document the longer will take to load.

The total file size equals to: HTML, css, javascript, images, flash. video and audio.

The latest four are the biggest “overweight” of any web document due to their potential file size. This can create potential download problems by decreasing the site loading time.

In the other hand HTML, css and javascript are text based files which usually have a fast loading rate.

Taking this in consideration we need to create a balance between elements that are critical and the ones that we might not need at the beginning of a project.

Screen Resolutions

Nowadays the screen resolutions varies depending on the visitors personal preferences, however the lowest resolution available is 800px X 600px but this is no longer used in most of the cases, therefor the reccomended resolution widely adopted is 1024px X 768px. This resolution is a safe choice to void horizontal scrolling, which in most cases is a usability issue.

Layout Options

The two main options which i consider when designing websites are: Solid Layout and Liquid Layout .

Solid Layout

With Solid Layout, you basically set a fixed width to your layout, and whatever the visitors screen resolution your website will allays offer an uniform experience throughout the entire site.

Liquid Layout

These layouts are layouts based on percentages rather pixels, allowing your design to adapt to any screen resolutions. This kind of layouts provide a very useful way to display a lot of information but still remaining consistent in smaller screen resolutions.

Personally i prefer solid layouts simply because they offer the same experience to any user independently of their screen resolution and also in terms of development time as this is much easier to accomplish, therefor the cost passed to a client would be less.

Visual Consistency

When designing a website layout we need to keep a consistency across the entire website and how do we achieve this?

1 - Limit the number of elements on each page, this means that you should only display the essential elements for your site purpose.

2- Repeated elements will bring a feeling of order, harmony to your site.

3- Repeat a master page layout throughout the entire site, this not only will improve the website usability but also will improve your conversion rates as the users will become used to your interface allowing them to reach their aims quickly. This means that you keep the same layout changing the colors or graphics depending on your needs.

Page balance

Their are three main descriptions on page balance: Symmetrical pages, Asymmetrical pages and Unbalanced.
Below i display three different images, that express the web page balance theory.

Symmetrical

As you can see on this image all the elements are divided in clear blocks of content all with equal spacing.

Click here to view this design

Asymmetrical

On asymmetrical designs the flow is different as you can see on the following the main part of the web site is floated to the left leaving an asymmetric feeling to it.

Click here to view this design

Unbalanced

Unbalanced layout is simply something like “get creative and blend it together”.

Click here to view this design

Website Wireframe

At this stage we have decide what kind of layout we want plus what elements are required for the web site which lead us to wireframing a basic page layout, which lead us to the next article.

Conclusion

On this web design 101 article i introduce the basic concepts of page layout for the web.
When designing a website the page layout element is an important fact and will be better accomplished once you have an idea of what information you want to pass to your website visitors.

Web design 101: Introduction to web design

2009-10-05T21:12:43Z

The five key elements for a good web site are: site architecture, technology, content, visual design, interaction.
When developing a web site you should take this 5 elements in consideration to ensure that your online presence has the correct foundations.

Site Architecture

Many years back when i use to go to my local video rental shop, i had to fill in a card with the reference code of the video i wanted, and hand it out to the shop assistant so that he could find the correct video and bring it to me.
Well this is information architecture as he had to organize the videos accordingly to that code.

This theory is the same as when developing a web site architecture, because we need to label, categorize and organize the content in order to define what information we want to pass to a website user.

For example Microsoft website is so complex in terms of the amount of information available, that without a good web site architecture would be impossible to control such amount.

Just as my local video shop had to organize the videos, we as web designers, web developers or website owners have to organize our content not just by category but also by its relevance.

Technology

Firstly, when developing or designing web sites one of its core elements is to define what technologies will be used throughout the project.

The number of technologies is expanding at a fast rate and became overwhelming, so to choose the correct one is crucial and might not be as easy as most people think.

Below is a list of some technologies used on the internet.

Browsers
HTML/XHTML
Cascading Style Sheet
Javascript
Adobe Flash
Adobe Flex
Multimedia: Video, Audio
Server Side Technologies
XML and Web Services
AJAX
Content Management Systems

It is a long list and if you top it up with the sub-categories of each technology mention above, the list would easily expand to its triple.
As you can see the choice of which technology, that you will be using in your projects is crucial to any website success.

Secondly, you have to come to a solution of how the chosen technologies interact to each other.

Content

Has so many people said before “Content is king”.

Content is the first reason why visitors come to a website, either they want to learn something or check a review for product you sell, the list is endless.
Just keep in mind that informative and relevant content will bring you more visitors and increase the reputation of your website. Ways to get content is a whole new article.

Visual Design

Visual design is the aesthetics of a website and involves some communication characteristics: Layout, Typography, Color, Graphics, Images.

Visual design should provide good visual identity and visual consistency throughout the entire website.

Keeping that in mind visual design meets the requirements of good website usability, because what is the point of having a really pleasing website which is not usable, by making it over complicated for users to reach the content provided or not being able to find a clear and defined call to action.

Keep your website aesthetics pleasing but do not forget what is the final goal and make it clear to the users what you want from them.

Interaction

Interaction is everything that is expected from a user to do in a website, either is filling out a form or purchase some item, etc…

The question here is: “How we lead users to become active instead of being passive observers ?”.
My answers is, design a clear and easy to use user interface, so that the users don’t have to to move back and forward to achieve their aim on a website.

Sometimes websites have so much information not well organized that users have difficulty in reaching the expected action.

Conclusion

This was the first web design 101 article and i included a brief introduction to what i think being 5 core elements of good web design .

Hope this article is helpful and please feel free to post a comment and share your opinion.

Insanely great

2009-10-01T05:13:23Z

Insanely great is just a title but after you check this site all made in flash and video you will have a reality check on how far the web will go.

Now less words and check this out asylum626.com.

Come back soon for that post about video and communication.
Enjoy

Accessibility meets findability

2009-09-29T23:55:38Z

There are many different techniques out there, that will help you achieve accessible and findable websites, bellow I have described a few different options and pointed out a few resources where you can learn more.

Correct way of using tables

Back in the day, web documents used to have table-based layouts and this was a bad practice for the various reasons, when css became widely supported web designers started to adapt some standards and abandoned the table based layout websites.
Just because table-based layouts are a bad idea, does not means that you shouldn’t use them to display tabular data so please do not ignore their power for this purpose.
Tables can also offer great options to increase density of keywords on a web document and search engine love them.


Web design and assecibility meets findability
       
        
            
            	Tags
                Used for
            
        
        
        
            
            	abbr
                together with the tittle attribute can be used to specify what an abbriviation stands for, helping users to learn it and search engine to index it.
            
            
            
            	acronym
                together with the tittle attribute can be used to specify what an acronym stands for, helping users to learn it and search engine to index it.

Web design and assecibility meets findability
Tags	Used for
abbr	together with the tittle attribute can be used to specify what an abbriviation stands for, helping users to learn it and search engine to index it.
acronym	together with the tittle attribute can be used to specify what an acronym stands for, helping users to learn it and search engine to index it.

Please notice above the summary attribute and the tag offer two valuable opportunity points to insert extra keywords and make the document more accessible by giving more information to the users.

Building a table following the accessible standards we have increased the keywords on the page, not bad.

Acronym tag

Acronyms are all over the place, you do not know them all and this is where this tag come into play.

Users will search for some acronym or they might search for the the all sentence, well with the example below you will find a way to clear this up.

W3C

Using the attribute title together with the tag you can deliver the content in both ways, easy and simple.

Abbr tag

Abbreviations are handled in the same way as the example above and they have the same vantages to deliver an accessible web.

PT

Accessible forms

Online web forms are everywhere and for some users this can be confusing, so creating accessible web forms is a key element of today’s web design.
A form element on your website can have a positive or negative impact on your site is used and help your conversion rates.
Below is a web form that has all the features to make as accessible as possible.


  The play Hamlet was written by:
  
  William Shakespeare

  
  Rudyard Kipling

  
  George Bernard Shaw

  
  Ernest Hemingway

  
  Charles Dickens

Note that the

tag wraps all the form in one container creating that separation layer in which the user can focus, followed by the tag where can describe what the form is for and you can also insert a keyword in the tag for a more findable approach.

Finally you should use the tag to clearly describe what information that you expect from the user.

All of this tags bring opportunities for a more accessible and findable forms.

Conclusion

For me accessibility on the web is a very important asset for us web designers, because as shown above you can create accessible web sites which therefor will be more findable and seo friendly.
You can have a very well designed and presentable website but do not ignore this strong asset as everyone is a winner with this approach.

For more info in accessibility i recommend this resources below:

Please share your tips below.

What is design ?

2009-09-29T05:38:27Z

Starting with keycss.com as an example, some visitors might consider this design, boring, dull, without enough features etc…
However, in the other hand some people might consider this design minimalist, straight to the point, usable with the essential features required for a blog.

Well design is what each and every mind decide on what is presented to us humans, and while studying design i had a teacher which use to say that our main objective as designer is to create an emotion around our design work and make it simply attractive.

Design is everywhere, and everyday we capture tons of information that surround us, but just a few elements became memorable, and for that reason their is a very popular quote in the design community : ” LESS IS MORE “.

Why less is more?

Simple, everything comes down to the a single word MESSAGE. Yes focus on the message that you want to transmit and make your designs, photography or any graphic element express itself, because if you add to much clutter onto your designs you have the risk of not getting the message across and then it will be just another element in populated landscape.

“Emotional Design: Why We Love (or Hate) Everyday Things” is a book which i recommend to any designer in general as it explains human reaction to design in a very detailed way.

Below is a a talk by tim brown a master of design tinking hope you enjoy

Design for you is?

share you philosophy on design in the comments bellow.