(JavaScript must be enabled to view this email address)
KeyCss.com << Graphic Design, WebDesign and Development
Monday, February 22, 2010
Page Fade In effect with Jquery
This is a tutorial in which i show how to add a fade in effect to your pages, this gives a nice feel to a website.
The other a client ask me to have every page fading in when they load and i thought that is easy and if you notice google home page also has a smooth fade in effect when the user moves the mouse over the page, on this example the will be fading in as soon as the page loads and the best of all it only takes a few lines of code due to the fact the we will be using a great Javascript Library Jquery
This will be short and easy.
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
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.
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.
This is a quick post sharing a helpful tool to design in the browser
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.
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.
Wireframes is a method which will help clients and designers to have a better overview of the goals and increase the insight of the project.
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.
Something that i have always asked myself is “How motion designers achieve such an amazing quality videos and motion pictures?”.
Well the best way to find the answer was to ask Jorinna, a motion designer which i came across on vimeo.com which has a stunning portfolio full of top notch work.
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 ?
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.
On this web design 101 article i explain the importance of web page layout and some features you need to consider when designing a web site.
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
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, is a series of posts in which I publish articles related to web design.
I will develop this series with the goal of leading the readers to the stage where they will be able to design and create their own web sites.
In this first article I introduce 5 core elements used to develop any website.
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 .
For a while that i wanted to publish a post ,about the power of video in today’s web, but i did not had the inspiration for it but this has change when i saw this…
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.
Since the early days of the web, and the browser wars, we arrived to an era of peace.
Nowadays we as web designers are in the best position to develop accessible websites , and in this article i will show you some obscure html tags and attributes, that will help you create accessible and findable websites.
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.
Please notice above the summary attribute and the <caption> 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 <acronym> 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.
Note that the <fieldset> tag wraps all the form in one container creating that separation layer in which the user can focus, followed by the <legend> tag where can describe what the form is for and you can also insert a keyword in the <cite> tag for a more findable approach.
Finally you should use the <label> 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:
Many, many, many, people blogged about this topic before but this is my view on the subject WHAT IS DESIGN?
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.
Welcome to keycss.com, my name is Joao Da Silva and i am a freelance designer,web developer and a lover of good design.
Keycss is my blog and playground, where i will be posting: news, tips, resources, tutorials,case studies and anything i believe that can be useful for the design comunity either web or graphic.
You the reader might think ” yet another blog” and you are correct, however just stick around, comeback a few times or just subscribe to rss feed and then make your up your mind.
My aim is to publish interesting posts on regular basis and a weekly emagazine with all the resources, news,content and posts published here at keycss.com
Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.
is a book which i recommend to any designer in general as it explains human reaction to design in a very detailed way.