Creative web design with Adobe Muse

204 Pages·2014·30.75 MB·English

by  Asch

Creative Web Design
with
Adobe® Muse®
David Asch
First published 2014
by Focal Press
70 Blanchard Road, Suite 402, Burlington, MA 01803
Published in the UK
by Focal Press
2 Park Square, Milton Park, Abingdon, Oxon OX14 4RN
Focal Press is an imprint of the Taylor & Francis Group, an informa business
© 2014 David Asch
The right of David Asch to be identified as author of this work has been asserted by him in accordance with
sections 77 and 78 of the Copyright, Designs and Patents Act 1988.
All rights reserved. No part of this book may be reprinted or reproduced or utilised in any form or by any
electronic, mechanical, or other means, now known or hereafter invented, including photocopying and recording,
or in any information storage or retrieval system, without permission in writing from the publishers.
Notices
Knowledge and best practice in this field are constantly changing. As new research and experience broaden our
understanding, changes in research methods, professional practices, or medical treatment may become necessary.
Practitioners and researchers must always rely on their own experience and knowledge in evaluating and using
any information, methods, compounds, or experiments described herein. In using such information or methods
they should be mindful of their own safety and the safety of others, including parties for whom they have a
professional responsibility.
Product or corporate names may be trademarks or registered trademarks, and are used only for identification and
explanation without intent to infringe.
Library of Congress Cataloging-in-Publication Data
Asch, David.
Creative web design with Adobe Muse / David Asch.
pages cm
ISBN 978-0-415-81179-8 (paperback)
1. Adobe Muse (Electronic resource) 2. Web sites--Authoring programs. 3. Web sites--Design. I. Title.
TK5105.8885.A355A83 2014
006.7’86--dc23
2014008665
ISBN: 978-0-415-81179-8 (pbk)
ISBN: 978-0-203-38522-7 (ebk)
ii
Creative web design with Adobe Muse
Table of contents
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Working around limitations . . . . . . . . . . . . . . . . . . . . .38
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 Menu display options . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38
Why use Adobe Muse? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
Image-based page link . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Who is the book for? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
Add sub-menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
How to use this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
The completed master page . . . . . . . . . . . . . . . . . . . . . . .43
Keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Downloadable assets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
3
Creating the site content
. . . . . . . . . . . .44
1
Introducing Adobe Muse
. . . . . . . . . . . . .4 The home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
Build a slide presentation . . . . . . . . . . . . . . . . . . . . . . . . . .46
Features at a glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
The Composition widget settings . . . . . . . . . . . . . . . . . .47
The Welcome Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Add the slide content . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49
Creating a new site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Set the Autoplay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Working in Plan mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Test the presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Design mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Add the information panels . . . . . . . . . . . . . . . . . . . . . . .57
Preview mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Embedding HTML code . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Publish mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
The gallery pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62
Manage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Add the page description . . . . . . . . . . . . . . . . . . . . . . . . .62
2 Build the slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Designing the master page
. . . . . . . . .10 The slideshow settings . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
Import the images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
Planning the site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Position the thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . .65
The initial site layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Set the hero image size . . . . . . . . . . . . . . . . . . . . . . . . . . . .66
Preparing the new site . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Create a breadcrumb trail . . . . . . . . . . . . . . . . . . . . . . . . .68
The site properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Alter the page hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Designing the master page . . . . . . . . . . . . . . . . . . . . . . . .15 Replace slideshow content . . . . . . . . . . . . . . . . . . . . . . . .72
Duplicate the widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
Beginning the design . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Our services page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Setting the browser fi ll . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Defi ne the header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 Create a frame template . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Add the header images . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Using the Crop tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
The alignment tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Rotating images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Build the footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Create a page divider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
The Rectangle tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Wrap text around an image . . . . . . . . . . . . . . . . . . . . . . . .80
Create the footer content . . . . . . . . . . . . . . . . . . . . . . . . . .22 Create a library item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81
Setting a typeface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 Reusing a library item . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Styling text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 The Information page . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
Create a paragraph style. . . . . . . . . . . . . . . . . . . . . . . . . . .26
Add an Accordion widget . . . . . . . . . . . . . . . . . . . . . . . . .83
Create an email link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Style the accordion panels. . . . . . . . . . . . . . . . . . . . . . . . .84
Create a link style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Populate the panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85
Working with Photoshop buttons. . . . . . . . . . . . . . . . . .31
Simulating tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Working with Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . .32
Our services page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Preview the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Add new pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33 Add a basic contact form . . . . . . . . . . . . . . . . . . . . . . . . . .91
Add a navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 The Form widget settings . . . . . . . . . . . . . . . . . . . . . . . . .92
The Menu Widget settings . . . . . . . . . . . . . . . . . . . . . . . . .35 Styling the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Style the menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36 Create a ‘thank-you’ page . . . . . . . . . . . . . . . . . . . . . . . . . .99
iii
Set up auto-redirection . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Export as HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Add a live map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Going live . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Customize the map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
The Muse dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Final adjustments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Creating a ‘404’ page . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Increase the header margin . . . . . . . . . . . . . . . . . . . . . 104
Design the 404 page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Add a footer site map . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Enable online editing . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
The completed site content . . . . . . . . . . . . . . . . . . . . . 105
Import the page code . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Test the error page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
4
Designing for mobile devices . . . . 106 In-browser editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Add a site user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Creating the phone layout . . . . . . . . . . . . . . . . . . . . . 108
Edit live content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Set up the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Change the text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
The master page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Replace an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Add the navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Publishing the changes . . . . . . . . . . . . . . . . . . . . . . . . . 173
Style the menu bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Edit alternate versions . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Create the footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Update changes in Muse . . . . . . . . . . . . . . . . . . . . . . . . 174
Pop-up information panels . . . . . . . . . . . . . . . . . . . . . . 115 Adding a ‘favicon’ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
The About Us panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The Contact Us panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 7
The left-overs
Set up an email link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Set up a phone link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
An alternate navigation bar . . . . . . . . . . . . . . . . . . . 178
Preview the phone layout . . . . . . . . . . . . . . . . . . . . . . . 123
The home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Add a new master page . . . . . . . . . . . . . . . . . . . . . . . . . 178
Deciding on content height . . . . . . . . . . . . . . . . . . . . . 125 Create a dummy page . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Fixing layout issues. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Working with scroll eff ects . . . . . . . . . . . . . . . . . . . . . 180
Working with layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
The Scroll Eff ects panel . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Our cakes page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Scroll eff ect mechanics . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Create the slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Create a ‘sticky’ menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
The Information page . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Flying items onto the page . . . . . . . . . . . . . . . . . . . . . . 184
The completed mobile site content . . . . . . . . . . . . . . 141
Change an item’s opacity . . . . . . . . . . . . . . . . . . . . . . . . 186
Setting up Google Analytics . . . . . . . . . . . . . . . . . . . 188
5
Search engine optimization
. . . . . . . 142 Create a new property . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Set the tracking type . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
The concepts and practicalities . . . . . . . . . . . . . . . . 144
Add the site details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Setting the page titles . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Create a tracking ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Add the page description . . . . . . . . . . . . . . . . . . . . . . . 147 Set up the tracking code . . . . . . . . . . . . . . . . . . . . . . . . 189
Amend the URL structure. . . . . . . . . . . . . . . . . . . . . . . . 148 Test the account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Content and keywording . . . . . . . . . . . . . . . . . . . . . . . . 149 Creating a State Button . . . . . . . . . . . . . . . . . . . . . . . . 190
Create heading styles . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Use a scratch page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Create styles to defi ne key phrases. . . . . . . . . . . . . . . 151
Create a composite button . . . . . . . . . . . . . . . . . . . . . . 190
Internal linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Add the State widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Using social media to generate traffi c . . . . . . . . . . . . 153
Create the combined item . . . . . . . . . . . . . . . . . . . . . . . 191
Adding descriptions to image content . . . . . . . . . . . 155
Renaming fi les . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Working with Muse Libraries . . . . . . . . . . . . . . . . . . 192
Preparing the library item . . . . . . . . . . . . . . . . . . . . . . . 192
6 Add to the library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Launching the live site
. . . . . . . . . . . . . . 158 Adaptive library items . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Exporting and importing . . . . . . . . . . . . . . . . . . . . . . . . 195
Publishing to the web . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Library items: caveat . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Publish to Adobe hosting . . . . . . . . . . . . . . . . . . . . . . . 160
Third-party hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
iv
Creative web design with Adobe Muse
Acknowledgements
Th is book is dedicated to Josephine, of course, for her support while I wrote it.
Immense thanks to the following people:
Steve Caplin for his continued help and guidance
Donna Ayto from Th e Brighton Cake Company
Dave Bevans, Carlin Bowers, Mary LaMaccia and Denise Power of Focal Press
Technical reviewer, Tommi West
Images used in the book under the Creative Commons licence:
Cover – El Caganger, Flickr
Page 4 –Catherine (Sailor Coruscant), Flickr
Page 10 – Liz Mc, Flickr
Page 44 – Victor Rosenfeld, Flickr
Page 106 – Rachel Kramer Bussell, Flickr
Page 142 – Daniaphoto, Fotolia
Page 158 – Hotzeplotz, Flickr
Page 176 – With Associates, Flickr
1
Introduction
Why use Adobe Muse?
Not everyone has the aptitude for building websites using code alone. Typically, the design of
the site will be created in Adobe Photoshop (or its equivalent), which is then handed over to
the web developer to break down and reconstruct using HTML and CSS. Th is is fi ne if your
budget supports it but, for many people, this is not an aff ordable option. Muse gives us the
ability to build a site straight from the design concept.
Muse is a totally visual web-design tool. Th ere is no coding needed to put together fully
functional websites. Everything is created in a drag and drop environment, Muse handles the
code side of the operation, making the design and construction process a whole lot easier for
those of us who think CSS is a cable TV channel and Javascript is the receipt you get at the
coff ee shop.
Th e visual approach used in Muse will be familiar to anyone who has used a desktop pub-
lishing application such as Quark, Adobe InDesign or even Microsoft Publisher. Th e toolset
in Muse is minimal and easy to get to grips with, even if you haven’t used similar applications.
Th e fundamental page composition is created using either a text frame or a rectangle. Th e
latter can be simple shapes fi lled with color, or contain images and even embedded HTML
code for video and other rich content. Th e rest is determined by styling options and widgets:
predefi ned slideshows, menus, forms and presentations.
Who is the book for?
Th e book is aimed at anyone using Muse for the fi rst time who wants to get stuck in and work-
ing from the outset. Rather than looking at the program’s features and commands individually,
the content is project-based, taking you through the process of putting together a website
from start to fi nish. It is, in fact, based on a working website I created for a local business, Th e
Brighton Cake Company, so it is also testament to the program’s powerful capabilities. Th e live
site can be found at www.brightoncakecompany.co.uk.
Th ere may be diff erences between the version we’re creating here and the live version, this,
of course, is one of the downsides of the static printed page versus the ever-evolving Internet.
Any major design changes to the site or updates to Muse itself will be detailed on the book’s
companion website.
Th ere may also be slight changes to some of the design elements used here, com-
pared to the live version, mainly for reasons of intellectual property and privacy but these
will be few and far between and are, on the whole, inconsequential to the overall project.
How to use this book
Th e book is designed primarily to be worked through in a linear fashion, as it runs through
from the basics of using Muse up to producing a fully working site. Th ink of it as a route-map,
rather than an atlas; using only the tools and techniques required for the job at hand. It can,
however, also be used as a reference book; the chapter intros give an overview of what we’ll
be doing and there’s the index, of course. Th e format is laid out in a step-by-step style with a
screen capture or illustration, along with a caption explaining what’s going on.
2
Creative web design with Adobe Muse
Although I’ve attempted to incorporated as many of features of Muse as possible into the site
to demonstrate them in context, there are a few that I simply could not shoehorn in without
totally disrupting the design and some that were released too late during the writing of the
book to be incorporated. For this reason I have placed a chapter at the end of the book with
examples of using the features individually.
Keyboard shortcuts
Th roughout the book I use a mixture of menu commands and keyboard shortcuts to show
how to switch tools and invoke the various features, as some people prefer using one or the
other, or sometimes both. It is, however, worth learning the keyboard shortcuts as it can help
immensely to speed up the workfl ow!
Th e keyboard shortcuts are given for both the Mac and PC platforms where applicable. Th e
format I use is the modifi er, Cmd and Opt for the Mac, Ctrl and Alt for the PC, followed by the
associated keystroke. For example, invoking the Place command would be listed like so: File >
Place (Cmd+D/Ctrl+D). If the keystroke is the same for both platforms, it is just shown in black,
Shift, Tab, etc. Th is gives the commands a little more distinction from the rest of the text.
Accompanying website
All the necessary fi les for putting the example website together are available from the book’s
accompanying website www.creativemu.se. Also, with Adobe’s soft ware subscription model,
its applications are being updated far more regularly than before. I want to make sure you’re
kept as up-to-date as possible, of course, so I’ll be posting details and tutorials about any new
features and changes, along with any other signifi cant news, as and when they happen.
3
1
Introducing
Adobe Muse
Before we jump in and start building our websites we’ll need to familiarize
ourselves with Muse and its features. Much of the interface and toolset will
be recognizable to you if you’ve used any of Adobe’s applications before. There
are a few differences, of course. In this chapter we’ll take an overview of the
application’s features.