Any website from development to the final online, is need team work and careful a process, and often will encounter all kinds of problems in the actual, so web designers often need to play multiple roles, in addition to master the necessary web design skills, it should be to understand the development process and content of late, so that from the global to grasp the web page is beautiful and practical. Here are some useful and easy-to-understand design and development tutorials.

(1) Web design tutorial

1. Responsive design

The concept of responsive designer was first proposed by the famous web designer Ethan Marcotte, then swept the front-end and design fields, and has now become one of the major trends in web design. There are a lot of responsive design web pages out there, and there are a lot of tutorials:

Responsive Web Design: What is it and how can it be used?

★★★★★ ★



This is a great introduction to the basics, and author Kayla Knight will walk you through the basics of responsive design and give you an understanding of its fundamentals. If you are interested in web design, this article is not to be missed.

Guide to responsive Web design

★★★★★ ★



For those who need a better understanding of responsive web design theory, as well as practical product design, interface design, and the differences from interaction design, this article will tell you.

2. Flat design

Nowadays, flat design is no longer so “flat” compared with the original style. Clearer layers, richer details and better visual experience make it still occupy the mainstream and have a high degree of fit with responsive design.

35 flat Website design inspirations

★★★★ ★



This article gives you a lot of examples of flat design and explains the highlights of their design to help you better understand typography, color matching, and page layout.

Has flatness fallen out of favour? Here are 10 examples to tell you the answer

★★★★★ ★



This article traces the history and current situation of flat design, and lists and compares its advantages and disadvantages. It has good guiding value for those who want to get started or try flat design.

3. Font design

Limited by technical reasons, fonts in web design are not as free as those in graphic design. In addition to some fixed fonts (such as yahei, 宋体, boldface, etc.), the design of many special fonts can only be presented by pictures.

23 Classic Private English fonts for Web designers

★★★★★ ★



Here is a summary of 23 web design, may be often used in the English font, some of the changes in thickness, but can be displayed as text in the web page, with better freedom and extensibility.

The top 5 typefaces and their usage

★★★★★ ★



Here’s a roundup of the six most commonly used fonts in web design from around the world, including Google font, Open Sans font, Montserrat font, and more, with download links and thoughtful use case demonstrations for each font.

4. Form design

Web forms are the primary means of communication between visitors and site owners, so it goes without saying how important it is to make web forms easy to understand and use. However, there are a number of unique and interesting tricks to keep forms from getting boring.

Webpage background design: list design, form design

★★★★ ★



This article introduces in detail the design details of forms and forms in the web background, from menu/navigation, data/graphic display, forms, to forms, controls/components and pop-ups, etc., are involved.

3 best tips for form design

★★★★★ ★



You can see how designers, business people, and even casual visitors can think differently about form design, minefields to avoid, and precautions to improve the user experience.

(2) Web development tutorial

The following is a site for web development and construction, including discussions of CMS such as WordPress, CSS and HTML tutorial code, and more.

1. Instant Shift

This site is very popular among web designers and developers abroad, and it has many high quality blog posts on web building tools, CSS, tutorials, etc.



2. CSS-Tricks

This csS-only blog site created by Chris Coyler covers all aspects of web development and design in the form of articles, videos, code snippses, tutorials, and more.



3. Mockplus

As a simple and efficient prototyping tool, Mockplus’s blog post provides rich design and development tutorials covering front-end developer skills, site templates, beginner iOS development, UI development and front-end development differences, and supports subscription push.



4. Six Revisions

The site was created by Jacob Gube in 2008 and includes the entire workflow of building a website and application. Publish weekly updated tutorials, news, and guides for a wide range of readers, from Photoshop to freelancers.



5. Smashing Magazine

Designed for designers and developers, the site offers a series of related articles and tutorials covering code, mobile applications and design, graphics, and more. Of course, there are also many website themes, PS, CSS, etc.



(3) Web development and design tools

As the saying goes, “If you want to do a good job, you must sharpen your tools.” Tool use is also crucial to becoming a good designer. Here xiaobian also prepared a list of web design and development tools needed to try.

UI design tools

  • PS: also known as Adobe Photoshop CS, is currently recognized as a good general graphic art design software, the main functions include: image processing and drawing.
  • Adobe Illustrator: Vector graphics is a great tool for creating web pages, multimedia images, and print pages. It is suitable for small to large complex projects.
  • Fireworks: Similar to Illustrator, it not only has the flexibility to edit vector and bitmap images, but also provides a common library of pre-built resources.

2. Interactive prototyping tools

  • Mockplus: A powerful, easy-to-use, rapid prototyping tool for one-click drag-and-drop interaction creation, massive UI resources and packaged components, and time-saving team collaboration.
  • Sketch: This is a lightweight online vector design tool that allows you to interact with visual design drafts. There are plenty of plug-ins and tutorials around it.
  • InVision: Provides services for prototyping and team collaboration. It also uploads pre-made visual designs and adds links to create online prototypes.

3. Web development tools

  • Dreamweaver: currently recognized professional web page production procedures, support HTML, CSS, PHP, JSP and ASP and other scripting language syntax coloring display, is a beginner or professional site developers must choose tools.
  • FrontPage: a lightweight static web page creation software, suitable for the novice use of static web development.
  • CSS Design: suitable for professional CSS debugging applications, but also support instant view style function, convenient program debugging and effect comparison.

In fact, there is no such thing as the best tool, only the most suitable tool, the selection of tools is actually a make a balance process. The most important thing is my experience and creativity accumulated after learning and thinking. Let’s work together on the road of design!