Englishالعربية/عربيБългарскиবাংলাDeutschEspañolFrançaisहिंदीMagyarBahasa IndonesiaItaliano한국어MelayuPortuguêsPусскийукраїнська моваTiếng Việt中文(简体)中文(繁體)Wireframing is an important step in any screen design process, It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information" /> Englishالعربية/عربيБългарскиবাংলাDeutschEspañolFrançaisहिंदीMagyarBahasa IndonesiaItaliano한국어MelayuPortuguêsPусскийукраїнська моваTiếng Việt中文(简体)中文(繁體)Wireframing is an important step in any screen design process, It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information" />

Wireframes là gì

Length:LongLanguages:url-selector#selectionChanged" data-controller="url-selector">Englishالعربية/عربيБългарскиবাংলাDeutschEspañolFrançaisहिंदीMagyarBahasa IndonesiaItaliano한국어MelayuPortuguêsPусскийукраїнська моваTiếng Việt中文(简体)中文(繁體)

Wireframing is an important step in any screen kiến thiết process. It primarily allows you khổng lồ define the information hierarchy of your design, making it easier for you to lớn plan the layout according lớn how you want your user lớn process the information. If you’ve sầu yet to use wireframing, it’s time khổng lồ get your feet wet.

Bạn đang xem: Wireframes là gì

Wireframing UI Kits From Envato

Before we get started though, if you’re happy with the principles of wireframing you might want to grab some wireframing UI kits from Envato Elements lớn vày the heavy lifting. You can download unlimited kits (no matter what your favorite thiết kế tool is) và other items for a single low monthly subscription.

*
Choose from 100s of wireframing UI kits on Envalớn Elements

And, for a limited time, you can sign up for a whole month of unlimited downloads, completely miễn phí of charge. You can pichồng up as many wireframing UI kits as you want, along with premium fonts, stochồng photos, WordPress themes & plugins, & lots more, without paying a penny.

*

To clayên your không tính phí month, just sign up using this special link, or enter this code on the sign-up page if you prefer:

elements_cont_tuts-freemonth1-3zry88

With that said, let’s get into this tutorial! 

Wireframing for Beginners

Here’s a complete video version of this beginner’s guide. Don’t forget lớn subscribe khổng lồ our Envato lớn Tuts+ YouTube channel for tutorials, không tính phí courses, and more!


*


What is a Wireframe?

*
Think of a website wireframe like an architectural blueprint; you need to lớn see it in two-dimensional blaông xã and trắng diagrams before you underst& how to build the actual house. Similarly for a screen design, you can’t start building components in Figma or Sketch, or writing blocks of code, without knowing where the information is going lớn go.

At a deeper level, a wireframe is also very useful in determining how the user interacts with the interface. For example, wireframes can contain various states of button or menu behaviors.

*

Wireframing is important because it allows the designer to plan the layout & interaction of an interface without being distracted by colors, typeface choices or even copy. I lượt thích lớn explain to lớn my clients that if a user cannot figure out where lớn go on a black and white wireframe, it doesn’t matter what colors you eventually use. A button has khổng lồ be obvious even if it’s not shiny or brightly colored.

Like the foundation of a building, it has khổng lồ be fundamentally svào before you decide whether to give it an expensive sầu coat of paint.

Step 1: Getting Inspiration

Before getting into further details, since a picture can paint thous& words, take a look at I ♥ wirefames. You’ll be able to get a quick overview & visual understanding of how other designers are handling their wireframing process.

*

Perhaps also grab this nifty browser bookmarklet, Wirify which enables you khổng lồ see a "wireframe-d" version of any live site.

*

If you continually observe what other designers or sites are doing for their wireframes, you will slowly get a picture in your mind of how a wireframe helps khổng lồ organize information for the screen.

Step 2: Designing Your Process

Design is an organic process & thus different designers approach wireframing & its translation lớn visuals or code in different ways. You have to find the process that brings out your own strengths và you are most comfortable with. Below is a diagram showing several typical processes:

*

37signals is well known for advocating the use of sketches & going straight khổng lồ code, though it seems some of their designers vì involve sầu visual mockups in their process too.

For me, I have sầu gone through enough design-to-code cycles to have sầu a somewhat streamlined process. This is a step some people may not think about, but I also consider any html/css framework that I would use in the project.

For example, I used lớn build a ton of sites in Blueprint, thus I would mix both my wireframes & Blueprint lớn the same 12-column grid. This speeds up prototyping & development time considerably, as instead of having khổng lồ write every element’s width into my css stylesheet, they are now pre-defined from one lớn twelve columns wide. I now use cssgrid instead for its responsive sầu kiến thiết support, but it is still mix khổng lồ a 12-column grid which you can tải về as a photosiêu thị template.

*

As I’ve sầu said, it’s up to you to lớn decide which process you are comfortable with, sometimes you may have sầu try it out several times before realizing which is the most effective process. Some people may be really good at sketching & they may prefer not lớn use a wireframing tool at all. Other designers may want to lớn have sầu as many steps as possible to minimize deviations or allow them to think through every single iteration as the kiến thiết starts to take khung & shape.

You’ll eventually develop your own preferred process but for the tutorial’s sake I’ll use my typical process as an example:

*

The reason why I use usually Illustrator as my wireframing tool is mainly for three reasons:

Styles – you can save type and object styles & re-use them throughout, just like CSS.It’s easy lớn modify, move or scale multiple objects.It affords easy transition to other software later.

However, I bởi vì use other tools and it depends on the project scenario. I will briefly outline some popular tools, their strengths and their weaknesses in the next section.

Step 3: Piông xã Your Tools

Here are some popular tools in no particular order:

Balsamiq

Balsamiq became popular as wireframes produced with Balsamiq resemble sketches, making it immediately obvious that the wireframe is not a finished product but a work in progress. Balsamiq also has a huge library of reusable components which you can drag and drop very easily khổng lồ thiết kế your wireframes.

*

You can also use it on almost any platkhung, with desktop versions available for Mac, Windows và Linux, plus there is a website version if you prefer to lớn work in the cloud. Third tiệc nhỏ apps lượt thích iMockups for the iOS also support Balsamiq export formats.

Omnigraffle

An old Mac favorite, Omnigraffle also has a widely supported user-contributed library of reusable components; Graffletopia.

*

Since it was developed specifically as a diagramming application, Omnigraffle also has complex features lượt thích automatic layout, custom object styles tư vấn, smart guides và graph tools. Some of these features are also available in the Adobe CS suite, but if you vị not have sầu the CS suite, Omnigraffle is good value (~$100) for producing detailed wireframes.

Axure

Almost like the grandfather of wireframing tools, Axure was one of the first professional-class wireframing/prototyping tools. Until recently, it was only available on Windows. I personally don’t have sầu much experience with it, but it’s known to be a widely-used tool aước ao industry professionals.

Mockplus

Mockplus is an all-in-one sản phẩm thiết kế platkhung for the modern age. It offers tools for prototyping (RP), collaboration (iDoc), and design systems (DS). Get started for không tính phí, then use whichever plans suits your needs (individual, team, or enterprise).

Figma

Figma has stormed the design tool landscape in recent years. Built with web và UI designers in mind, it’s very well suited khổng lồ wireframing–& being browser-based means it’s ideal for collaborating.

*
From How lớn wireframe by Toni Gemayel

Figma is very intuitive lớn use where wireframing is concerned, but if you need a hand it even has a wireframe template khổng lồ kichồng things off.

We have a lot of Figma tutorials và courses on Tuts+ so feel không lấy phí lớn dive sầu in và begin learning:

GoMockingBird 

GoMockingBird is an online wireframing tool,& like Figma it’s ripe for collaboration–just thiết kế, drag và drop components, và cốt truyện the liên kết with your colleagues or clients khổng lồ team up on the same wireframe.

InVision Freehand

InVision is a super-reliable thiết kế collaboration tool, having been an industry favourite for years. InVision Freeh& is a separate sản phẩm built by the same team and offers a digital interpretation of a whiteboard you can collaborate on. We’ve sầu talked about the merits of using pen and paper for wireframing; this is actually very similar: sketch, doodle, annotate, edit, wipe, wireframe, iterate!

*

Flairbuilder

Flairbuilder has very strong support for interactions.

Xem thêm: Bắn Mụn Thịt Ở Đâu - Đốt Mụn Thịt Bao Nhiêu Tiền

*

It also has a huge component library, supports master pages and you can export the prototype lớn be viewed online.

Other Online Applications

If desktop software is not your cup of tea, there are tools like mockflow, and hotgloo which are worth looking at.

Keynote/Powerpoint

Keynotopia “transforms your favorite presentation application into lớn the best rapid prototyping tool for creating mobile, web và desktop phầm mềm mockups”. For non-mac users, bởi not fret, Keynotopia also offers powerpoint templates.

I personally highly recommover it if you need to lớn wireframe or prototype điện thoại applications quickly.

Adobe XD

For those already familiar with the Adobe suite, Illustrator & InDesign are very capable wireframing tools with their own individual strengths và weaknesses. But in recent years XD has come into its own as the UI kiến thiết tool in Adobe’s suite. 

It’s capable of advanced interaction design, hi-fidelity prototyping, và simple wireframing too; define user flowcharts, navigational structure, và information architecture–all in one place.

*
Wireframes and beyond, with Adobe XD

Adobe Illustrator

It might not be the strongest wireframing tool from Adobe these days, but Illustrator is one of my favorite tools to use because I am already very familiar with it and I am sure many designers here would be familiar with it too. I use Illustrator when I am trying khổng lồ vày quick, but complex wireframes, with no need for interactivity.

What makes it a winner? The ability to lớn export as a PSD with editable layers, strong copy and paste tư vấn to Photoshop, and strong typography controls with type styles you can save, edit and reuse, almost like CSS.

Adobe InDesign

Similar strengths lớn Illustrator with even stronger typographic styles controls, strong master pages support and the recent ability lớn make interactive sầu prototypes.

*

I pick InDesign when I have khổng lồ make interactive sầu high fidelity multi-page prototypes. The only caveat for me is the weak export support to lớn Photosiêu thị for designing visuals.

ProtoShare

“Powerful Prototyping Made Easy.” Recently released version 9 with a new wysiwyg palette. Interactive sầu trang web, ứng dụng và điện thoại prototypes and wireframes worth checking out.

Step 4: Setting a Grid

There’s a lot of theory with regards to grid systems, but without going too much inkhổng lồ it, I shall explain it as "a structured and simple way to lớn layout elements".

I’m using Illustrator for this tutorial but the steps can be applied to any of your tools.

Firstly, set a document kích thước. I used 1280 x 900 because I will be using cssgrid which will allow my trang web to scale between Mobile resolutions to a maximum of 1140 pixels easily.

*

Place the downloaded template from cssgrid into your document.

*

Tip:

There are plenty of grid templates available for tải về, but if you’re interested in customizing your own take a look at responsify.it.

Step 5: Determine Layout With Boxes

Start by drawing boxes on the grid. Think about the order of information you would lượt thích lớn present lớn your visitors, top to lớn bottom is the easiest, followed by left to lớn right. Below is an example of a wireframe which has a layout commonly used by software companies these days:

*

Sometimes, depending on your objective sầu & the entity you are designing for, you can be creative with the layout, though still keeping the hierarchy of the information in mind. This is a real-world example of one of my clients where I was breaking out from conventional technology company website layouts:

*

Here’s a layout for a blog, with carefully positioned advertising containers & specific instructions for the client:

*

Step 6: Define Information Hierarchy With Typography

After you are satisfied with how the boxes are laid out, start dropping in bits & pieces of your content to get a feel of whether the information is being well-structured. The rule of thumb is the same: the information you want to lớn deliver lớn your audience has to be clear, even in a blaông xã & White wireframe.

Simply using different fonts sizes as a start is a great way to lớn differentiate between the different levels of information.

*

Don’t be afraid to experiment at this stage. Sometimes, as you fill in more detail, you may realize the original layout is not working well. That’s the whole point of the wireframing process; to lớn make as many iterations as possible in order khổng lồ narrow down the best way of representing the information you are trying to lớn communicate.

*

Step 7: Fine-tuning With Grayscale

Using the full spectrum of grayscale can help you determine the visual strength of your elements without having khổng lồ pichồng a color palette. In fact, it may help you during the visual kiến thiết process later on.

*

Step 8: Hi-definition Wireframe

This is an optional step, but if you like to lớn take things in increments you may want lớn try it out. Making a wireframe high definition means simply adding more details, as much as possible, without going too granular into the visual details. It may mean filling in the actual copy inlớn the wireframe and trying to determine the ikhuyến mãi font-sizes:

*

It could also involve sầu colors:

*

The general idea is that at visual/code stage you want lớn be in polishing mode and no longer in drafting or experimenting mode. Perform the iteration cycles (feedbachồng wireframing) as quickly as possible in a wireframing application you are comfortable using, rather than moving layers and pixels in photoshop.

That being said, in certain scenarquả táo it may be more igiảm giá lớn skip defining the details too much và go straight into lớn an interactive sầu prototyping stage (ala 37signals). The argument for this is that certain interaction details cannot be communicated fully on a flat image.

If you work with a team of developers, you may want to lớn h& off the approved wireframes khổng lồ the developers for coding the basic framework while you work on the visual.

Step 9: Translating a Wireframe inlớn a Visual

Mentioned earlier, the reason why I tkết thúc to lớn prefer using Illustrator for wireframing is because I can export it into lớn a .psd with most of the type layers editable. By the time I am in Photocửa hàng I won’t need to edit the type that much (Photoshop has inferior type control tools, though much improved in CS6):

*

Here is an example of a wireframe translated inlớn a visual. The backbone of the wireframe is pretty much intact, though there are tweaks made visually. You can also view this website live:

*

Wireframing Inspiration & Resources

We have sầu lots of wireframing và prototyping tutorials và roundups on Tuts+. Take a look!

Additional Resources

If you would lượt thích khổng lồ find out even more about wireframing, you may want lớn check out these resources.

Go Forth and Wireframe

So here we end this tutorial. I hope it’s inspired you to lớn start experimenting! As with any design process, vì chưng not be afraid khổng lồ iterate, iterate và iterate.

Xem thêm: Chỉnh Độ Sáng Màn Hình Laptop Ở Đâu, 11 Cách Điều Chỉnh Độ Sáng Màn Hình Windows 10

Also, vày spover some time experimenting with different tools và processes. You’ll find the time investment worth it once you find an application that feels intuitive to you.

Please feel miễn phí lớn ask any questions in the comments, thanks for reading!

Also, if you need ready-made trang web components, we have a ton of beautifully designed website templates on Envato Elements. You can download unlimited templates and other items for a single low monthly subscription. 


Chuyên mục: Kiến thức