Right click and select “Group” OR use the keyboard shortcut command ⌘ + Option + G (on Windows replace command with CTRL).If you have multiple items, you can also draw a box on top of them. To select items that belong to same group, hold command ⌘, (on Windows CTRL) and click items you want to group.For example, If you have a group of checkboxes, it might make sense to group them together so you can move them around. While this is not necessary, this may save a lot of time and gives your UI prettier look. One of the best ways to keep your UI components clean and move them around is to group related elements together. The link is view only to make sure no one else is will edit the template accidentally but you can start using it in your own projects by making a copy of it. In this template, I have created master slides for mobile, tablet, and laptop with some common layouts as well as basic UI components for copy/pasting. If you have static parts that are same on all screens like navbar, you can add these to Master Slide to use this as a non-interactive “water stamp” on the background. Make a slide with basic components and reuse themĪ good starting point is to make simple slide of the basic templates you need so that you can just reuse them later. How to create wireframes with Google Slides in 7 simple steps 1. Google Slides also allows you to customize themes and so called “Master Slides” if needed but in basic wireframing usually this is already unnecessary. In many prototyping software you only see screens in presentation mode. You have also possibility to to drop in extra slides like title slides, sitemap, questions, comments etc. Flexibilityīased on experience in playing around with dozens of prototyping software, I can comfortably say that in Google Slides you have all features you need for basic wireframing. You will see exactly who did which change and when, and you can always revert back to earlier version - all this is done automatically on the background. You can do also interactive clickable prototypes on Google Slides to simulate full interaction flow and every button press your users will take when using actual software. Backups are automatic and you can make sure your latest version is always saved. It works on the cloud: everyone sees changes realtime and no problem if you need to switch laptop in between. Compared to paper wireframes and many prototyping software, it is also easier to update for a newbie. You can decide who you share the link with by press of a button. There are no costs to use it and pretty much everyone can access to it. Also, you don’t have to be a designer to do small changes to the prototype like legal copy text fixes which frees up designer’s valuable time. This means that stakeholders has usually no learning curve to share their feedback unlike when using many other prototyping software. Most of the people have already used Google Slides and the comment feature that is used in all Google Drive products. Why should I use Google Slides for wireframing? People already know how to use it As a designer-developer working with the whole flow from wireframing to release, I have found that using Google Slides to sketch out simple interaction flows and feature screens is a surprisingly convenient way to discuss which features should be implemented and get feedback from users and colleagues in the early phases of the product development. However, you don’t necessarily need to pay for complex design software to create beautiful wireframes. Making simple wireframes is an important step in any new software product and you will save tons of time later on if you do it properly. If you introduce detailed icons and styles for customers before the features and overall purpose have been decided, customers’ focus tend to be in that one icon that confuse them or the background colour they dislike instead of seeing the the important features and interactions of the application as a whole. Especially in the beginning of the project, your main focus should be the interaction and the features rather than the shiny visual details of your application. However, in real life, I have noticed many companies do not care which tool you use for prototyping. I have also used all of these in the past projects and during my Master studies in Human Computer Interaction and Design. Wireframing Toolkit for Google Slides with Basic UI components and templates for mobile, tablet and laptopĭesigners are used to work with multiple shiny prototyping tools such as Adobe xD, InVision, Axure, Sketch, Figma, proto.io and so on.
0 Comments
Leave a Reply. |