Every tab in livedesign is a row of pages, made for building finished work: a logo, a set of app screens, an edited photo. Instead of an endless canvas you work on pages, sheets laid out in a row, each one a picture you build up and then export or present.
Three Kinds of Page
- Logo: a square artboard (1024 x 1024) to design a logo on, with construction guides, mirror drawing, wordmark type, combining shapes and a logo kit export. See Logo Pages.
- Wireframe: a screen framed as a device (a phone, a tablet, a laptop, a browser or a watch), to sketch an app or a site on. See Wireframe Pages.
- Photo: a picture made of layers, edited with brushes, selections, adjustments and filters, its page the photo's own size. See Photo Pages.
Every page, of any kind, is also a slide in the tab's deck, in page order, ready to present (see Exporting and Presenting Pages).
A tab's first page asks What Is This Page For? while it is the only page and still empty, and your answer is the kind of the whole tab: every page of a tab is the same kind. A logo tab holds only logo pages, a wireframe tab only screens (of any devices), a photo tab only photos. For another kind, add a new tab. Until you choose, the page is a blank page: a plain A4 sheet, and no page is added after it.
Starting From a Template
A new, empty tab opens on Start Making Pages: every Pages template, grouped by what it makes (Logos, Photos, Wireframes), with Recommended first and a search. No page is drawn behind it until you choose. Blank Logo is first under Logos (Templates). The × leaves one empty page, ready to ask what it is for. Deleting the last page empties the tab and brings Start Making Pages back.
Content That Does Not Fit a Page
Open a tab whose content does not fit on its first page (an imported tab, say), and a page is made around it, where it is: nothing moves, shrinks or is scaled. The page is A4 when the content fits on it, and otherwise Fit to Content, a page exactly the size of the content plus a margin all round. A message says so, and Undo takes the page away. Content you later leave off the pages (in the space around them) stays where you put it.
Split Into Pages breaks a Fit to Content page into separate pages, from its page panel. Things joined by arrows, or sitting close together, stay together; each group gets a page of its own, A4 when it fits or Fit to Content when it does not, turned portrait or landscape to suit its shape, in reading order (top to bottom, then left to right). Each group moves onto its page at its own size, never scaled. At most 20 pages are made in one go; anything left over shares the last of them.
Pages
- Add a page with the + after the last page. It adds another page like the last one, of the tab's kind (its tooltip says which, Add Another Logo Page, say). On a wireframe tab, the smaller button under it, Add a Screen of Another Device, adds a screen in the device you choose. A new logo or wireframe page carries over the background of the page before it (its colour, gradient or picture, and its pattern; a logo page takes the fill without the pattern), so a series keeps its look. It is the new page's own from then on. With no background to carry over, a new page starts on plain paper. A photo page is never painted: it is its picture. A tab holds up to 100 pages.
- Each page's label sits above its top-left corner: its name, or "Page 2", then its size ("1024 x 1024", the device such as "iPhone", or a photo's pixel size), then its kind ("Logo", "Wireframe", "Photo"). A blank page reads "A4 · Portrait". Press the label to fit that page to the screen.
- Drag a label sideways to reorder the pages. A blue bar in the gap shows where the page will land; let go and it moves there with everything on it. Escape cancels.
- Content belongs to its page. Anything whose centre is on a page moves with it when the pages around it change, and whatever hangs off a page's edge is cut off at the edge, on screen and in exports, as if the pages were the only paper.
- Arrows stay on one page. An arrow's end pins to an element only when that element is on the same page as the arrow's other end; elements on another page show no connection points, so the end stays free where you drop it.
- The page navigator in the bottom-right corner, beside Undo and Redo (once there are two or more pages), shows "2 of 5" between Previous page and Next page, each fitting that page to the screen.
- The arrow keys do the same with nothing selected: Right or Down for the next page, Left or Up for the previous one.
- The view always lands on a page. Pan and zoom freely, and when you let go the view glides onto the page you are on, never stuck between pages or lost off the end of the row. A short swipe or flick turns to the next or previous page. Zoom out past a whole page and it springs back to fit; zoom in as far as you like and it stays zoomed in, just kept on the page.
- Back where you left off. Come back to a tab of pages, from another tab or after a reload, and it opens on the page you were last on rather than the first. Each person's place is their own, kept in this browser.
- Snapping: move or resize an element and it snaps to its page's edges, centre lines and margins, with the same guides as lining up with other elements.
- The title bar above each page holds its buttons, ending in the padlock and the cog: see Beside the Cog.
- In Zen mode and while presenting, the pages show on their own, without labels, cogs or buttons.
Contents
Contents lists every page in the tab, each with a picture of the page as it is, its number and its name. The page you are looking at is highlighted.
On a computer, once a tab has more than one page, Contents sits as a sidebar against the left edge of the canvas, the way a slide editor shows its slides, and keeps highlighting the page you are on as you move around. Drag it by its title to pin it to the right edge instead. Press Minimise at its top to tuck it into a Contents button in the bottom-right corner, beside the theme button; press that button for the same list, and Dock as Sidebar at its top to bring the sidebar back. Livedesign remembers which you chose, on every design and every device you sign in on (and which side, on this device). You can also choose in Settings › Editor › Pages. On a phone, Contents is always the button.
- Go to a page: press its row, or move with the arrow keys and press Enter. The canvas glides there. On a computer the list stays open so you can hop around, and the page lands beside the sidebar rather than under it; on a phone it closes so you can see the page.
- Fit: Fit in the bottom-right corner fits the page you are nearest, beside the sidebar.
- Find a page: with more than six pages, type in Find a Page to narrow the list by a page's name, kind or number, or by any words on it.
- Page actions: in the sidebar, rest the pointer on a page for Duplicate, Lock and Delete beside its name. In the popover, its ⋯ button holds the same.
- Add a page: at the foot, Add Page adds another page like the last one, of the tab's kind (its tooltip says which, Add Another Logo Page or Add Another iPhone Screen, say). On a wireframe tab the square button beside it, Add a Screen of Another Device, adds a screen in another device. The new page lands after the last one and the list marks it.
Anyone can open Contents to find their way round. Only Editors see the page actions and the add buttons.
Beside the Cog
A wireframe page's title bar, above its top-right corner, holds the buttons you reach for most, so you rarely need its panel:
- Layout opens the page's layouts in a popover: press a category, hover a layout to preview it on the page, press it to place it. It is there on every wireframe page, empty or not, and placing a layout replaces what is on the page at once (one Undo brings it back). See Wireframe Pages.
- Background opens the page's backgrounds and patterns in a popover, with the same hover previews as the panel (see Backgrounds and Patterns). It stays open for another pick.
- The padlock locks the page (Locking a Page), and the cog opens the page panel.
While the page is wide enough on screen, each button shows its name beside its icon; zoom out, or use a phone, and they drop to their icons (hover one for its name). On a phone, Layout and Background open as a sheet from the bottom of the screen. A locked page shows no Layout or Background button. Only Editors see these buttons: Participants and Viewers see the pages without them.
A logo page has its own buttons here instead (Tidy for a drawing, Mirror and Guides, and Start From a Layout while it is empty): see Logo Pages. A photo page has its Image, Select and Filter menus: see Photo Pages. A blank page has the padlock and the cog alone.
The Page Panel
Press the cog above a page's top-right corner to open its panel, which opens beside the page so the page stays in view (on a phone it slides up from the bottom of the screen). At the top is the page's name (leave it empty to go back to "Page 2"). Below it, what the page offers:
- A logo page: the Background and Layouts tabs, with no size to choose (see Logo Pages).
- A wireframe page: its Device, the frame's look, its orientation and its system bars. Its layouts and background are on the Layout and Background buttons beside the cog (see Wireframe Pages).
- A blank page: its orientation, until you choose what it is for.
Along the bottom are the page's actions.
Size and Orientation
Each kind of page has its own size: a logo page is always its 1024 x 1024 artboard, a wireframe page is its device's screen, and a photo page is its picture's size (change it from the photo's Image menu). A blank page is A4, and a page made around content that did not fit is Fit to Content (see Content That Does Not Fit a Page).
Portrait and Landscape turn a blank page or a Fit to Content page's sheet; a wireframe page turns from its Device settings. Turning a page keeps everything on it: content that still fits stays as it is, and content that no longer fits is scaled down as one to fit inside the margins, its text with it. Nothing is cut off.
Backgrounds and Patterns
Logo and wireframe pages have the same backgrounds, sorted into Solid, Gradient and Image at the top of the backgrounds (a logo page has no Image); they open on the kind the page has now. A wireframe page keeps them on the Background button beside its cog; a logo page has the Background tab. A photo page has no background: it is its picture.
- Solid: Paper (the plain page) leading your tab theme's colours, then a row of light colours and a row of dark ones (the same colours every colour picker in livedesign offers), the colours already used in the design, and Add a custom colour (four coloured dots) for a custom colour of your own.
- Gradient: a Theme group of fourteen gradients drawn from your tab's theme colours, light ones first, then bold and deep ones (change the tab's theme and these follow it), then a Gradients group of thirteen presets, from Sunrise and Peach to Night, Forest and Ember, plus the rainbow swatch for a custom gradient: pick its From and To colours from the same colours, turn its Angle, or Swap the two.
- Image: a photo covering the whole page. Choose one from your images, or Upload an Image of your own. Over the picture, an Overlay keeps your content readable: None leaves it bare, Light or Dark washes it, Tint washes it in your theme's colour, and Fade fades it to white towards the bottom; Strength sets how much, and a new picture starts with a 60% wash. Position chooses which part of a tall picture stays in view (Top, Centre or Bottom). To change it, choose or upload again under Replace Image; Remove puts the page back on plain paper.
- Pattern, over any of them: None, Dots, Grid or Lines, drawn faintly so they never fight the content.
Hover a swatch to preview it on the page; press it to keep it. A dark background keeps the page readable: elements without colours of their own are drawn in light ink on it, and text, arrows and icons you coloured yourself are lightened if they would no longer stand out (or darkened again on a light page). On a bright or mid-tone colour, such as teal or yellow, icons, progress bars and outlines are lightened or darkened the same way, keeping their hue, and charts adjust their colours as they are drawn.
Page Actions
Along the bottom of the panel: Split Into Pages (on a Fit to Content page only, see above), Duplicate page (a copy right after it, with everything on it), Move page left, Move page right and Delete page (the page and everything on it; the pages after it close the gap, and the view glides to the page before it so you are never left looking at empty canvas). Each one is a single step that Undo reverses.
Locking a Page
Press the padlock beside a page's cog to lock it; it reads Locked while it is. A locked page, of any kind, stays as it is:
- What is on it can't be selected, moved, changed or deleted, and nothing new can be drawn, dropped or pasted onto it (a short notice says why).
- Its name, size, orientation, background and layout can't change, and it can't be deleted. You can still move it along the row or duplicate it (the copy is unlocked).
Press the padlock again to unlock it. The lock is part of the design, so everyone you share it with sees the page locked too.
Good to Know
- Everything else works as always: sharing, live collaboration, comments, undo and redo. Collaborators see your pages and their changes live.
- People who can only view a tab see the pages but not their cogs, buttons or the +.
Was this article helpful?