HTML+CSS Experience Designer: front-end technologies and frameworks and tools

Article Description: HTML+CSS Experience Designer: front-end technology and framework and tools.

I've always believed that I don't know. html and CSS Experience designers are architects who don't even touch bricks or steel bars, so in the past more than 10 projects, although always the design of the strategy layer, but also do not forget to exercise their HTML and CSS capabilities, only hands dirty enough to become a good designer.

In recent discussions, we've been grappling with topics where designers and developers can't get along, but the answer is simple--how do you let me understand you when you don't have my life experience? In the developer's world of logic, process, abstraction, and definition, which part is involved, determines whether you are a designer who understands developers enough.

So I tried to use a designer's language to talk about front-end technology-how the computer transforms your design into a computer language.

The design translates into a variety of elements that computers can understand.

When you're using Photoshop to make an interface, the concept of layers will be used to break down elements such as input boxes, buttons, and drop-outs, which exist in the PSD document to the browser, and are turned into a standard element by the front-end engineers, and the combination of these elements forms the DOM structure (Document Object Model, the browser generates the last page by reading the DOM structure.

HTML responsible for skeleton CSS for decoration

The definition of these elements is done by HTML, what it looks like, is done by CSS, in the following example, the CSS-modified DOM structure leaves only the "skeleton" of the HTML, and the CSS retouching will become the designer's desired effect.

This is how your design is used HTML and CSS into a page that a browser can read, and if you notice the dropdown menu above, as a designer you may not like this style, want to become the following style:

This will make CSS rendering very troublesome, because the CSS raw material only so many kinds of cloth and decoration, you design things than the CSS can provide the effect, will increase the development process. But with the development of front-end technology, it's not entirely impossible, but the browser is dragging its hind legs, each version and the "brand" support CSS rendering effect is different, they spend a lot of time to make all their performance consistent, you are very easy to use your Mac on the effect of PS. Do you know why your programmers complain about you behind their backs?

JavaScript helps you to manipulate these elements more richly

So you can generate a static page, in the past, this is enough, through a static page can interact with the background, but now, the front-end interactive behavior is more and more rich, many interactions are placed in the foreground, and do not need to go backstage.

This is like you buy a bun, you ask the waiter has no cabbage, the waiter directly told you no, she did not run to the kitchen to ask the chef. Front-desk interaction is certainly not as simple as buying buns, and there are a lot of details about interactions that are done by JavaScript--that's the meaning of JavaScript--it helps you better manipulate these elements, changing their style, location, content, and additions and deletions as needed.

The following example is a common return to the top of the page interaction details, the entire interaction process (here in the online demo) is:

1. Pull down on the first page;
2. Slowly emerges a button;
3. Click the button to return to the top of the page;
4. The button slowly disappears.

This interaction is not HTML and CSS can be done, of course, is not Photoshop can be completed, meticulous designers will be in the document to write clear about this part of the interaction, or use Axure to do a prototype, but if you master a little bit of front-end technology, you can completely write this effect, The front-end code is the most natural tool to communicate with programmers, while in the Agile UX environment we encourage designers and front-end developers to pair together to express this interaction.

In the past, it is really difficult to learn this knowledge, but the development of front-end technology so that we can now only grasp some basis to write a smooth front-end code, which is the rise of a variety of front-end frameworks, such as HTML and CSS less, 960.gs, JavaScript in the jquery, YUI , Prototype, in addition, there is an increasing number of integrated frameworks that combine HTML, CSS, and JavaScript to make it easy for designers to make high-fidelity prototypes, such as Twitter's bootstrap and Zurb's foundation.

The existence of these frameworks is a number of front-end interaction with the existing mode of code packaging, with you in the steamed stuffed bun to 3rd package, no need to tell people what kind of stuffing to drink porridge, said "number 3rd" to fix. These patterns include pop-up dialogs (Dialog), tabs (Tabs), Drop-down (Dropdown), Forms (forms), reminders (tooltips), warnings (alert), Tumbling (Scroll), unwinding (Collapse), Merry-go (Carousel), button (button), automatic completion (auto Complete) and so on, you just need to write a little bit of code can be called steamed stuffed bun, sorry, complete an interactive scene design.

Learn a little jquery

jquery is the JavaScript infrastructure of many frameworks, such as bootstrap JavaScript syntax and jquery are basically consistent, learning a little jquery basics to help you better use these.

You need to understand the three basic types of jquery elements, objects (objective), events (event), and methods (method), and the relationships of three elements:

Find an object and find a way to do it for yourself or another element when a particular event occurs;

In all two scenarios, find the object, determine a particular event, and do the method; then let's look at how to do these three things separately:

Finds an object in the form of $ ("objective"), which can be either document or a specified element in the DOM structure. For example, when defining $ (document), the object of the future operation is the entire document, and when the $ ("#division") is defined, the object of the future operation is an element with an ID called division; when defined $ (this) the object of the future operation is the object of the current operation.

The format of a particular event is event (function () {}), where xxx can be clicked (click), Loaded (ready), mouse hover (hover), and so on, and the braces will be filled with methods to do to yourself or another element. ; Together with the previously found object, it becomes: $ (document). Ready (function () {...}), meaning when the document has finished loading ...

Again, to execute a method, the format of the method for an element is. Method (...), depending on the methods, the format of the parameters in parentheses is different. For example, to express the addition of a new class name can be written as a. addclass ("Newclassname"); combined with the previous two actions, it becomes:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (
2. Function () {$ ("#"). AddClass ("Newclassname")}
3. );

When the document is ready, find an element with ID called division and Add a class name to it.

You can also make this process more complex, such as the following code:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (
2. function () {
3. $ ("Button#hello"). Click (
4. Function () {$ ("body"). Append ("hello!")}
5. )
6. )

This means that when the document is ready, find a BUTTON element called Hello and, when clicked, add a hello! word under the body.

Some useful methods and events in jquery

In the completion of the High-fidelity prototype, most of the interaction we need to do is: click/hover a page element, turn off/open/pop/change another element style/change content, and so on. You only need to master two triggering event click () and hover () in jquery, and AddClass (), Removeclass (), show (), Hide (), append (), text (), attr () six basic methods. You can do a variety of interactive effects with jquery already has a framework.

Let's try to complete a click on a button to appear a hidden layer of code:

First write HTML, we need a button and a hidden text field:

View Plaincopy to Clipboardprint?

1. <button id= "Open" >open a textpadbutton>
2. <textarea id= "TextPad" style= "Display:none" >textarea>

Here omitted the process of CSS rendering, we write a click of the button to open the Text field code, do not hurry to write code, first think about what we want to do, we have to do the following several things:

1. Wait for the document to read;
2. looking into this button;
3. click on it;
4. Find this hidden field of text;
5. to show it out;

So we started writing programs, and the first step was to wait for the document to read:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (function () {})

The second step is to find this button:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (function () {
2. $ ("#open")
3. }
4. )

Step three click on it:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (function () {
2. $ (#open). Click (function () {})
3. }
4. )

Step fourth Find the hidden text field for the target:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (function () {
2. $ ("#open"). Click (function () {
3. $ ("#textpad")
4. })
5. }
6. )

The fifth step shows it:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (function () {
2. $ ("#open"). Click (function () {
3. $ ("#textpad"). Show ();
4. })
5. }
6. )

jquery provides a number of special effects controls to help you design your interactions in detail, such as adding Fadein () to your code:

View Plaincopy to Clipboardprint?

1. $ (document). Ready (function () {
2. $ ("#open"). Click (function () {
3. $ ("#textpad"). FadeIn ("slow");
4. })
5. }
6. )

Open a TextPad

jquery and other frameworks have a large number of behavioral effects plug-ins that can be read by the API to understand the rules of use of various methods, the basic idea is consistent with this simple example above.

What do you need to do?

The front-end technology is a very profound field outside the interactive design, it's impossible to cover it all with a simple blog, the goal of this blog is at least when you have the opportunity to work with the front-end developers, a little bit of front-end technical knowledge can help you better communicate with the front-end developers.

Many interactive details are not text or pictures that can be explained, although using axure can more or less solve the problem, but the existence of axure sometimes hinders communication with developers, because this is not a skill that both roles can use, so now that the front-end technology has been greatly developed, Why not try to learn some front-end technology and put your ideas in the form of code.

This is just a tip, I hope more and more interaction designers can spend some time learning some front-end technology, the links below are some of the frameworks and tools that I often use.

Front End Frame

jquery– Popular framework is also the framework of blog use;

Bootstrap–twitter produced by the framework, including a beautiful set of UI solutions, full support less, a variety of interactive mode plug-in integrity;

Foundation–zurb produced by the front-end framework, a variety of interactive control integrity, the UI is not as fine as Bootstrap;

1140 CSS grid– with responsive design CSS framework, better than 960.gs;

Practical Tools

Jsfiddle– 's Easy-to-use online Html+css+js editor supports jquery and bootstrap frameworks;
pears– is good for basic interactive mode HTML and CSS templates.