Muse: Embarking Upon a Codeless Web for Print Designers

For many designers, the operative obstacle in making the jump from print to web is code. The good news for all of us is that in today’s world, Adobe Muse provides us with tools to design for the web without code. The obstacle of learning to write code has been replaced by the ever-shrinking obstacle of translating what you already know as a designer, from print standards to web standards.

You will learn:

• The basics of structure and navigation
• Translating your knowledge of file formats, resolution, color and typography
• Interaction design and thinking like a user
• How to deliver for desktop, tablet and mobile screens
• Tips for taking your site live

Location and Parking

Free underground parking in the building where the meeting is being held. Tell the live attendant you are attending this meeting.

Meeting Notes

By Alvin Takamori

After a five-year absence, the Los Angeles InDesign User Group returned to the Designory in Long Beach where a three-screen conference room provides every seat with an excellent view. Group Manager Alan Bell kicked off the meeting by having everyone quickly introduce themselves and mention their favorite fonts. After that, we were all introduced to the guest presenter for the evening, Joseph Angelo Todaro, the founder of MuseResources.com.

Instead of focusing on showing details of Muse and how to use the tools in it, Joseph wanted to explain general principles of website design. Keeping in mind that the typical Muse user would be a designer who is familiar with print but wouldn't know much about web design.

He began by posing the question, "why design for the web using Muse?" Muse allows a designer who doesn't know how to code, the ability to create a website and control how it looks. The interface is similar to InDesign. File Management, Type and Color are handled the same way that they are in InDesign.

One thing that is different is the non-linear flow of information. You need to create a sitemap that shows how the content can flow between pages. Start with a homepage and typically, you would also have an About Us and Contact pages. Be careful not to make unnecessary pages. Viewers like to work efficiently, find what they're looking for and leave.

To create content on a webpage, Joseph explained that it is important to think of a visual hierarchy and to remember that most viewers have short attention spans. Google Analytics can be a useful tool to analyze what pages of a website viewers are looking at.

When designing web pages you can use traditional design software like Photoshop and Illustrator. However, Joseph doesn't recommend using the razor blade tool to cut up your layout in Photoshop. Just create the layout in layers. You also don't want to rasterize any text to convert it into an image. Web browsers search for text and can't see it if you convert it into an image.

Joseph recommends exporting buttons in a navigation bar as a group and using the image as a guide to line up the buttons. A basic rectangle can be created in Muse and it uses less memory than an imported image. Gradients should also be created in Muse because they come out smoother than gradients exported from Photoshop or Illustrator.

Another difference between print layouts and web page layouts is the ability to create responsive designs. A static page layout always has the same proportions, which could look tiny on a phone or waste space on a big screen. A fluid layout can move elements on a page to fit different screen sizes. An adaptive layout might have two different layouts. at some breakout point the choice of layouts switches; perhaps one layout for phone sizes and another for computer screens. An option that you might be less familiar with is responsive layouts that combine fluid and adaptive layouts.

Joseph also brought up the issue of designing with screen resolutions in mind. 72 ppi was a good average for old CRT monitors. Currently, standard practice is to design a webpage layout at 960x960 ppi. But a retina display would be 1920x1920 ppi and its use is likely to increase in the future.

At the break, Joseph Hill of ProLifeDigital.com showed some nice samples from his company of printing on wood and aluminum.

After the break, Joseph discussed more things that need to be considered when creating a website. A basic thing you need is a server to host the website and a domain name address. As far as layout design is concerned, you need to consider whether you want a static web page or one with interactive features, videos, slideshows. etc. You need to think about who the target audience is and what device you expect them to use to see your website. Also, you have to make choices over how much information you want on a single page. Do you want viewers to scroll down to see more content, or to click to another page.

It's important to carefully consider the expectations of viewers. If you create features that are unique, viewers could be surprised and delighted, or they might be confused by something that is unfamiliar. Using familiar design patterns that are instantly recognized can help a viewer navigate quickly. For instance, a button is a familiar image. When people see them, they expect to click on them and see a change. However, if the change occurs too slowly or worse, nothing happens, you can upset the viewers.

Speaking of buttons, another consideration is whether you want buttons to resize based on the screen size. A button can become too small if scaled down to fit on a phone screen. A typical phone screen is 768 pixels wide, so you might want to create an adaptive layout with a breakpoint at 767 pixels, where the layout is switched to something designed for the phone.

When you publish a website from Muse, you can export it as HTML or upload to an FTP host. Although Muse is great for allowing a traditional print designer, who doesn't know code, to create a website. It's not great if you want to expand to a more sophisticated website later. The code generated by Muse is very messy so, you don't want to turn it over to a professional web designer to change later.

Farthest Attendee

The bona fide LAIDUG member who travels the farthest specifically to attend the meeting will receive her or his choice of any one deal at MightyDeals up to $50.00. Mighty Deals offers fonts, templates, apps, e-books, etc. You need to prove to us that you traveled farthest to attend this meeting. Having recently moved to the area from somewhere else won't cut it. Be prepared to show us indication of your current residence—perhaps a driver's license or a utility bill. Decision of the administrators of the Los Angeles InDesign User Group is final. Winner — Nancy del Aguila

Raffles

LAIDUG meetings are free. The group is supported by raffles of donated prizes. No one is required to participate in the raffles. Raffle tickets are: $3 for 1, $5 for 2, $10 for 5, $20 for 13, $40 for 30. $50 for 45 and $100 for 100. All major credit cards are accepted.

Raffle Prizes and Winners

eDocker CREATE! 6 month subscription. Value $774.00 Winner — Tamara Mason

Stock Layouts. Full access to Stock Layout template library. 3 month subscription. Value $299.00 Winner — Wayne DeSelle

Markzware. Any single product. 12 month subscription. Value $199.00 Winner — William Gunn

Expo Creative Asset Manager for Mac from Insider Software. Value $149.00 Winner — George Wilde

Font Agent Pro 7 from Insider Software. Value $99.95 Winner — Joni Casimiro

InMotion Hosting. Web hosting and free domain. Value $90.00 Winner — Joni Casimiro

DTP Tools Cloud for InDesign. 6 month subscription. $77.40 Winner — Katy Adams

TypeDNA. Font management software. Value $49.00 Winner — Joni Casimiro

Adobe Stock. 15 image licenses. $44.00 Winner — Brad Hall

Creative Web Design with Adobe Muse by David Asch. Value $39.95 Winner — Jeff Schimsky

InDesign Magazine. 6 month subscription. Value $30.00 Winner — William Gunn

Pluralsight. 1 month subscription. Value $29.00 (two raffles) Winners — Jessica Edelstein, Douglas Magill

Fry’s 2000mAh Power Bank. Value $7.99 (three raffles) Winners — Katy Adams, Andrew Edelstein, Brad Hall

LA Web Professionals Group meeting tickets. Value $7.99 (four raffles) Winners — Armando De La Cruz, Jessica Edelstein, Douglas Magill, Bing Wong

Custom Artwork Winner — George Wilde

About the Presenter

Joseph Angelo Todaro

As founder of MuseResources.com, Joseph Angelo Todaro embraces and explores the vast capabilities of Adobe Creative Cloud through online learning as well as sharing assets and design resources. Now working as a full-time design education video producer and formerly designing UI/UX for the inflight entertainment industry, Joseph continues to be an avid design software evangelist and resource to those bringing their design work to the web.