Los Angeles InDesign User Group

Muse: Embarking Upon a Codeless Web for Print Designers

Thursday, July 20, 2017

Designory , 211 E. Ocean Blvd. #100, Long Beach, California 90802

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 Prize Winner

Mighty Deals—Nancy del Aguila

Raffle Prize Winners

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

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

Markzware. 12 month subscription. Value $199.00—William Gunn

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

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

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

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

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

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

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

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

Pluralsight. 1 month subscription. Value $29.00—Jessica Edelstein, Douglas Magill

Fry’s 2000mAh Power Bank. Value $7.99—Katy Adams, Andrew Edelstein, Brad Hall

LA Web Professionals Group meeting ticket. Value $7.99—Armando De La Cruz, Jessica Edelstein, Douglas Magill, Bing Wong

Custom Artwork—George Wilde

Home