Wireframing is an important step in any screen thiết kế process. It primarily allows you khổng lồ define the information hierarchy of your design, making it easier for you khổng lồ plan the layout according khổng lồ how you want your user khổng lồ process the information. If you’ve sầu yet to lớn use wireframing, it’s time lớn get your feet wet.
Bạn đang đọc: Phần mềm vẽ wireframe
Wireframing UI Kits From Envato
Before we get started though, if you’re happy with the principles of wireframing you might want to lớn grab some wireframing UI kits from Envato lớn Elements to lớn bởi the heavy lifting. You can download unlimited kits (no matter what your favorite design tool is) và other items for a single low monthly subscription.
And, for a limited time, you can sign up for a whole month of unlimited downloads, completely không tính phí of charge. You can piông xã up as many wireframing UI kits as you want, along with premium fonts, stochồng photos, WordPress themes và plugins, & lots more, without paying a penny.
To claim your không lấy 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 clip version of this beginner’s guide. Don’t forget khổng lồ subscribe lớn our Envato lớn Tuts+ YouTube channel for tutorials, free courses, và more!
What is a Wireframe?
Think of a trang web wireframe lượt thích an architectural blueprint; you need to lớn see it in two-dimensional black & white diagrams before you understand how to lớn build the actual house. Similarly for a screen thiết kế, you can’t start building components in Figma or Sketch, or writing blocks of code, without knowing where the information is going to go.At a deeper cấp độ, 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 thực đơn behaviors.
Wireframing is important because it allows the designer lớn plan the layout và interaction of an interface without being distracted by colors, typeface choices or even copy. I lượt thích lớn explain to my clients that if a user cannot figure out where to lớn go on a blaông xã & Trắng wireframe, it doesn’t matter what colors you eventually use. A button has to be obvious even if it’s not shiny or brightly colored.
Like the foundation of a building, it has to lớn be fundamentally strong before you decide whether khổng lồ give it an expensive coat of paint.
Step 1: Getting Inspiration
Before getting inkhổng lồ further details, since a picture can paint thousvà words, take a look at I ♥ wirefames. You’ll be able to lớn get a quiông xã overview and visual understanding of how other designers are handling their wireframing process.
Perhaps also grab this nifty browser bookmarklet, Wirify which enables you to see a "wireframe-d" version of any live sầu site.
If you continually observe sầu 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 và its translation to 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 lớn code, though it seems some of their designers vị involve visual mockups in their process too.
For me, I have gone through enough design-to-code cycles lớn have 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 khổng lồ build a ton of sites in Blueprint, thus I would phối both my wireframes & Blueprint to the same 12-column grid. This speeds up prototyping and development time considerably, as instead of having lớn write every element’s width into my css stylesheet, they are now pre-defined from one lớn twelve sầu columns wide. I now use cssgrid instead for its responsive sầu kiến thiết support, but it is still phối khổng lồ a 12-column grid which you can download as a photoshop template.
As I’ve said, it’s up to lớn you to lớn decide which process you are comfortable with, sometimes you may have try it out several times before realizing which is the most effective sầu process. Some people may be really good at sketching và they may prefer not to use a wireframing tool at all. Other designers may want khổng lồ have as many steps as possible to minimize deviations or allow them lớn think through every single iteration as the thiết kế starts khổng lồ take khung and 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 & object styles và re-use them throughout, just like CSS.It’s easy to lớn modify, move sầu or scale multiple objects.It affords easy transition to lớn 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: Pick 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 sản phẩm but a work in progress. Balsamiq also has a huge library of reusable components which you can drag and drop very easily to lớn kiến thiết your wireframes.
You can also use it on almost any platkhung, with desktop versions available for Mac, Windows và Linux, plus there is a web version if you prefer lớn work in the cloud. Third tiệc ngọt apps like 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 like 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ì chưng not have the CS suite, Omnigraffle is good value (~$100) for producing detailed wireframes.
Axure
Almost lượt thích 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 lớn be a widely-used tool ahy vọng industry professionals.
Mockplus
Mockplus is an all-in-one product kiến thiết platform for the modern age. It offers tools for prototyping (RP), collaboration (iDoc), và kiến thiết systems (DS). Get started for không lấy phí, then use whichever plans suits your needs (individual, team, or enterprise).
Figma
Figma has stormed the kiến thiết tool landscape in recent years. Built with web and UI designers in mind, it’s very well suited to wireframing–và being browser-based means it’s igiảm giá khuyến mãi for collaborating.
Figma is very intuitive to lớn use where wireframing is concerned, but if you need a hand it even has a wireframe template to lớn kiông xã things off.
We have sầu a lot of Figma tutorials and courses on Tuts+ so feel không lấy phí to lớn dive sầu in và begin learning:
GoMockingBird
GoMockingBird is an online wireframing tool,và like Figma it’s ripe for collaboration–just thiết kế, drag and drop components, and share the link with your colleagues or clients lớn team up on the same wireframe.
InVision Freehand
InVision is a super-reliable kiến thiết collaboration tool, having been an industry favourite for years. InVision Freeh& is a separate product built by the same team và offers a digital interpretation of a whiteboard you can collaborate on. We’ve 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 svào tư vấn for interactions.
Xem thêm: tai game mien phi hay nhat the gioi
It also has a huge component library, supports master pages & you can export the prototype khổng lồ be viewed online.
Other Online Applications
If desktop software is not your cup of tea, there are tools lượt thích mockflow, and hotgloo which are worth looking at.
Keynote/Powerpoint
Keynotopia “transforms your favorite presentation application into the best rapid prototyping tool for creating Mobile, web and desktop phầm mềm mockups”. For non-mac users, vì not fret, Keynotopia also offers powerpoint templates.
I personally highly recommkết thúc it if you need to wireframe or prototype Smartphone applications quickly.
Adobe XD
For those already familiar with the Adobe suite, Illustrator & InDesign are very capable wireframing tools with their own individual strengths & weaknesses. But in recent years XD has come inlớn its own as the UI thiết kế tool in Adobe’s suite.
It’s capable of advanced interaction kiến thiết, hi-fidelity prototyping, & simple wireframing too; define user flowcharts, navigational structure, and information architecture–all in one place.
Adobe Illustrator
It might not be the strongest wireframing tool from Adobe these days, but Illustrator is one of my favorite tools lớn use because I am already very familiar with it & I am sure many designers here would be familiar with it too. I use Illustrator when I am trying to lớn vì chưng quick, but complex wireframes, with no need for interactivity.
What makes it a winner? The ability to export as a PSD with editable layers, svào copy và paste support to Photocửa hàng, & svào typography controls with type styles you can save, edit và reuse, almost lượt thích CSS.
Adobe InDesign
Similar strengths to Illustrator with even stronger typographic styles controls, svào master pages tư vấn & the recent ability lớn make interactive sầu prototypes.
I piông xã InDesign when I have lớn make interactive sầu high fidelity multi-page prototypes. The only caveat for me is the weak export support to lớn Photocửa hàng 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 and điện thoại prototypes and wireframes worth checking out.
Step 4: Setting a Grid
There’s a lot of theory with regards lớn grid systems, but without going too much into lớn it, I shall explain it as "a structured và simple way to 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 lớn scale between Smartphone resolutions to a maximum of 1140 pixels easily.
Place the downloaded template from cssgrid inkhổng lồ your document.
Tip:
There are plenty of grid templates available for download, 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 to lớn your visitors, top to lớn bottom is the easiest, followed by left to right. Below is an example of a wireframe which has a layout commonly used by software companies these days:
Sometimes, depending on your objective & 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 trang web 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 nội dung to lớn 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 to your audience has lớn be clear, even in a blaông xã và White wireframe.
Simply using different font sizes as a start is a great way to lớn differentiate between the different levels of information.
Don’t be afraid to lớn 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; khổng lồ make as many iterations as possible in order khổng lồ narrow down the best way of representing the information you are trying to 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ồ pick 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 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 inlớn the visual details. It may mean filling in the actual copy into lớn the wireframe và trying to lớn determine the igiảm giá font-sizes:
It could also involve colors:
The general idea is that at visual/code stage you want to be in polishing mode and no longer in drafting or experimenting mode. Persize the iteration cycles (feedback wireframing) as quickly as possible in a wireframing application you are comfortable using, rather than moving layers & pixels in photocửa hàng.
That being said, in certain scenarios it may be more ikhuyến mãi khổng lồ skip defining the details too much and go straight into 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 h& off the approved wireframes to the developers for coding the basic framework while you work on the visual.
Step 9: Translating a Wireframe into lớn a Visual
Mentioned earlier, the reason why I tover to lớn prefer using Illustrator for wireframing is because I can export it into a .psd with most of the type layers editable. By the time I am in Photoshop I won’t need khổng lồ edit the type that much (Photoshop has inferior type control tools, though much improved in CS6):
Here is an example of a wireframe translated into 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 and Resources
We have lots of wireframing và prototyping tutorials and roundups on Tuts+. Take a look!
Additional Resources
If you would like lớn find out even more about wireframing, you may want lớn kiểm tra out these resources.
Go Forth and Wireframe
So here we kết thúc this tutorial. I hope it’s inspired you khổng lồ start experimenting! As with any kiến thiết process, vị not be afraid lớn iterate, iterate and iterate.
Also, bởi spkết thúc some time experimenting with different tools và processes. You’ll find the time investment worth it once you find an application that feels intuitive sầu to you.
Please feel miễn phí to ask any questions in the comments, thanks for reading!
Also, if you need ready-made trang web components, we have sầu a ton of beautifully designed website templates on Envalớn Elements. You can tải về unlimited templates and other items for a single low monthly subscription.
Chuyên mục: Phần Mềm