A great "Lorem ipsum" tool by Chris Coyier.
Web Designers always have a lot of ideas on how to help their productivity as well as other designer's, the problem is that we rarely have the time to implement and share these ideas.
Once in a while though, when an idea exists for a long time in the heads of designers, someone talented enough eventually finds the time and makes an idea come to life!
This is what Chris Coyier has created, a page with ready made "Lorem ipsum" together with the html tags!
Great Job Chris !
Thank you for your excellent tool!
Visit the page:
HTMLipsumLabels: concepts, tools
by Nick Fassolas
This code will make the Fx.Slide start hidden and when the link is clicked it will slide open the hidden division.
Give your JS file or your CSS any filename you want but remember to link them in your html page, I have named them both “horizontal”
Here is the code I used to make it work.
The javascript (horizontal.js):
window.addEvent('domready', function() {
var status = {
'true': 'open',
'false': 'close'
};
//--horizontal
var myHorizontalSlide = new Fx.Slide('horizontal_slide').hide('horizontal');
$('h_slidein').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideIn('horizontal');
});
$('h_slideout').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideOut('horizontal');
});
$('h_toggle').addEvent('click', function(e){
e.stop();
myHorizontalSlide.toggle();
});
$('h_hide').addEvent('click', function(e){
e.stop();
myHorizontalSlide.hide();
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
$('h_show').addEvent('click', function(e){
e.stop();
myHorizontalSlide.show();
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
// When Horizontal Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myHorizontalSlide.addEvent('complete', function() {
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
});
The CSS (horizontal.css):
h3.section {
margin-top: 1em;
}
#horizontal_slide {
background: #000;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:600px;
min-height:700px;
}
div.marginbottom {
margin-bottom: 10px;
}
And finally the html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="horizontal.css" type="text/css" />
<script type="text/javascript" src="../mootools.js"></script>
<script type="text/javascript" src="horizontal.js"></script>
<title>Fx.Slide horisontal start hidden</title>
</head>
<body>
<h3 class="section">Horizontal</h3>
<div class="marginbottom">
<a id="h_slideout" href="#">close</a>
|
<a id="h_slidein" href="#">open</a>
| <strong>status</strong>: <span id="horizontal_status">open</span>
</div>
<div id="horizontal_slide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.
</div>
</body>
Hope it helps you in your endeavors for a creative and exciting design.
Labels: concepts, development, javascript, mootools
The difference between Web Designers and Real users
By Nick Fassolas
Web designers have a naturally, distorted view of how people see and understand websites.
The way we look at the web pages given the fact that we design them is very different from they way they are used in the real world by real users.
To create projects that will operate in the real world, we first must understand how they will actually be used.
How designers consider and view the websites:
- We appreciate the balance, depth, abundance, and surprises.
- We enjoy the designs, the graphic part of the site and general design.
- We appreciate the original presentation even if it differs from our own design style.
- We persistently look with intensity on the screen for some time.
How users use web pages:
- Users move quickly because they do not want to look at the screen for a long time.
- They are impatient - tend to click on the first promising link, and often do not wait for pages to appear before they decide to go elsewhere.
- They don’t want to read the entire text; they just scan around looking for indications on what they want.
- They look for things that will help them do what they want to do!
These are fundamental and massive differences!
The way in which we as designers approach websites is almost alien, if not weird, next to how a common user does.
This is probably the main reason why there are so many poorly designed web sites.
Whenever a web designer looks at a design his mind and opinion about it changes. In addition, we look! we really look, like we would look at a work of art.
We begin to observe the subtle differences that we had not seen at first glance and then we begin to appreciate the game played between different colors, materials and layers of which a design is made of.
If we stay there for quite some time (which usually happens) we will virtually stop looking at the websites content and to what it offers to the user and dive deeper and further into the design details of the project.
Here goes the classic saying, “I saw the tree but missed the forest!”.
The Impact of the “deeper viewing style” of the designers:
- The user can’t navigate easily in this website
- The user can’t get the information that they are looking for
- The user gets dizzy and disorientated from to much movement and special FX!
- fled from the site with a sense of low self-esteem because they failed to find the contact page…thus felt stupid!
What should we do?
To create more effective web designs, friendly to the public eye; we should become more sympathetic towards the World Wide Web users who see our designs.
To do so we must start to behave intelligently in three main points of planning:
- We must understand the environment of the actual use of a Web page (who will want to see it, what they like to do, etc.
- We must take into account the habits that users adopt in order to see and use the websites we design.
- We must ensure that users leave a website we have designed satisfied! That they were able to successfully navigate it with smoothness and ease and were able to find all the information they came here for.
These three points are essential and summarize what we as designers and developers need to do to users.
How to design for the World Wide Web:
We should design according to how users really see and use the pages we create and not the way we would want them to see and use them.
The essence of design should not be to turn users into designers but to help them find what they are looking for and by doing so we may succeed into educating them user on modern design.
Of course if a web designer does not want to accept this, I recommend that he creates what ever design he wants and present it in a personal portfolio! So the rest of us designers can check it out with our “deeper viewing style”, and be amazed for hours and hours on how wonderful and innovative this design is! And worry not for trivial things such us text and contact links.
www.buildupper.com [ For designers only: Great flash site in foreign language, amazing concept, excellent work! couldn't find the contact button though! ]www.elf.od.ua [ For designers and users: Great CSS site in foreign language, easy to navigate, I could have easily bought something discarding the fact that I didn't know the language ] Labels: concepts, web design
101 great wallpapers!
On my Journey through the various routes the web leads me I have found this great post from Francesco Mugnai, presenting some of the
most beautiful wallpapers! excellent job Francesco!
Labels: concepts, wallpapers
