登录查看更多内容

What do you do if you need to create website wireframes but don't know which tools to use?

由人工智能和领英社区提供技术支持

If you're working on a website project, you might need to create wireframes to show how the content and functionality will be organized and presented. Wireframes are low-fidelity sketches or diagrams that illustrate the layout, navigation, and interactions of a web page. They help you communicate your ideas, test your assumptions, and refine your information architecture. But how do you create wireframes if you don't know which tools to use? In this article, we'll explore some of the factors to consider when choosing a wireframing tool and some of the options available for different needs and preferences.

此文章中的业界达人

由社区从 7 条内容中精选。了解更多

Rishi Kataria

Design Lead at LivEdge
Aakash Memon

UI/UX Designer | Bachelor's in Software Engineering

1 Your goals and requirements

Before you start looking for a wireframing tool, it's important to have a clear idea of what you want to achieve and what you need from the tool. Ask yourself questions such as what level of detail and fidelity is needed for your wireframes, how complex and interactive they need to be, how you plan to share and collaborate on them, and how much time and budget you have for wireframing. Consider if you need simple sketches or more realistic mockups, if animations, transitions, or user inputs are required, if you need to export, print, or present them, and if feedback or approval from others is necessary. Then decide if you need a quick and easy solution or a more robust and flexible one.

添加您的观点

Rishi Kataria

Design Lead at LivEdge
举报内容
When I have no idea which tools to use to create wireframes for websites, I start researching by looking into well-known options like Figma or Sketch, which have robust capabilities and easy-to-use interfaces. These tools are frequently offered in free forms, making them accessible to beginners and widely used in the field. I also use the tools and online training that these platforms offer to quickly pick up the skills necessary to begin producing wireframes effectively. Later on, if I need more sophisticated features, I might look into purchasing programs like Adobe XD or Axure for better support and features.

已翻译

赞
Aakash Memon

UI/UX Designer | Bachelor's in Software Engineering
举报内容
Before starting on wireframes and tools make sure you have all the requirements ready and make sure you have your Design Architecture ready so when you start on wireframes it'll be easy for you.

已翻译

赞

2 Online vs offline tools

One of the main decisions you have to make is whether to use an online or offline tool for wireframing. Online tools are web-based applications that run in your browser and store your files in the cloud. Offline tools are software programs that you download and install on your computer and save your files locally. There are pros and cons to both options, depending on your preferences and circumstances.

Online tools are convenient and accessible, as you can use them from any device and location, as long as you have an internet connection. They are also easier to share and collaborate on, as you can send links, invite users, or integrate with other platforms. However, online tools may have limited features, performance, and security, depending on the quality and reliability of the service. They may also require a subscription fee or have a free plan with restrictions.

Offline tools are powerful and versatile, as they usually offer more features, functions, and customization options. They are also faster and more secure, as they don't depend on the internet or third-party servers. However, offline tools may be more expensive, complicated, and incompatible, depending on the software and system requirements. They may also be harder to share and collaborate on, as you have to export, upload, or sync your files.

添加您的观点

Aakash Memon

UI/UX Designer | Bachelor's in Software Engineering
举报内容
Both online and offline tools have their own benefits but I don't think these 2 are any different these days because most of online tools these days are Cloud based so you can just minimize them and use them as you want if you don't have any Internet connection.

已翻译

赞

3 Popular tools and examples

There are many tools available for wireframing, each with its own strengths, weaknesses, and specialties. Balsamiq is an online and offline tool that allows for a hand-drawn look and a drag-and-drop interface. It has a large library of elements and basic interactivity features, making it great for creating rough sketches of ideas. Sketch is an offline tool with a vector-based interface and rich set of tools and plugins that can create highly detailed and realistic mockups. Figma is an online tool with a pixel-based interface, smart component system, and real-time collaboration feature, making it great for creating dynamic and interactive wireframes. Finally, Whimsical is an online tool with a grid-based interface, smart alignment feature, and simple interactivity feature, which makes it great for creating clear and concise wireframes.

添加您的观点

Aakash Memon

UI/UX Designer | Bachelor's in Software Engineering
举报内容
For me it always will be Figma for go to, but there are a lot of other Wireframes tools like Balsamiq, Sketch, Wireframe.cc etc.

已翻译

赞

4 Tips and best practices

No matter which tool you choose, there are some tips and best practices to help you create effective wireframes. To begin, it's a good idea to sketch your ideas on paper first, as this will help you brainstorm, explore, and refine your concepts without being constrained by the tool or the technology. Additionally, you should use a consistent style and notation throughout your project, such as the same colors, fonts, shapes, symbols, and labels to represent different elements and functions. Furthermore, the main purpose of wireframes is to show the content and functionality of your web pages rather than the visual design or aesthetics. Therefore, you should focus on the structure, hierarchy, and flow of your information. Lastly, wireframes are not final products but working documents that can be improved and refined. Consequently, it is important to solicit feedback from stakeholders, users, or peers and iterate your wireframes based on their input and suggestions.

添加您的观点

Shankar T

Principal Product Designer and Business Analyst (Technical)with Test Manager experience at Clinical Solutions, R&D IT, GSK |xTCS|xBio
举报内容
Some of the ways to get started when you do not know waht tools you need to use to design the wire frame- Start with low fedility tools- - Pen and paper - Power point Meanwhile you can search the tools online. Balsamiq is one of the wireframing tool available online. Also, you can check Figma. The above are few cents from my experience.

已翻译

赞
Aakash Memon

UI/UX Designer | Bachelor's in Software Engineering
举报内容
It'll suggest make sure to have at least drawn some outline on paper with pen before starting the project wireframes, so it'll give you a clear idea where to start, and you can easily work on crazy 8 ideas.

已翻译

赞

5 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Aakash Memon

UI/UX Designer | Bachelor's in Software Engineering
举报内容
Wireframes are a very necessary step into User Experience and UI Design so make sure you brain storm a lot of ideas and spend good amount of time on them so that you won't have to spend more time on High level Design, and you will have amazing ideas for your projects.

已翻译

赞

Information Architecture

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What do you do if you need to create website wireframes but don't know which tools to use?

1

2

3

4

5

1 Your goals and requirements

2 Online vs offline tools

3 Popular tools and examples

4 Tips and best practices

5 Here’s what else to consider

Information Architecture

给文章评分

感谢您的反馈

更多Information Architecture相关文章

更多相关阅读内容

What do you do if you need to create website wireframes but don't know which tools to use?

1

2

3

4

5

1 Your goals and requirements

2 Online vs offline tools

3 Popular tools and examples

4 Tips and best practices

5 Here’s what else to consider

Information Architecture

给文章评分

感谢您的反馈

查看其他技能