Sunday, November 17, 2013

Review of a Lucidpress web design template

Ryan Boudreaux reviews the Lucidpress app to see how simple it is to use one of the offered templates to create a site design.

The Lucidpress design app allows users to create content for the web and print using a cloud-based productivity suite that can be configured and integrated alongside Google Drive, Skype, Dropbox, and other online tools. This article details my attempts to modify an existing Lucidpress digital template to create a website design.

(Note: Lucidpress offers much more than what I review here, including team collaboration, export print options, data encryption, and backups. For instance, read our article Desktop publishing from the browser: Lucidpress. )

Getting started

You can create a free user account, or you can sign in using an existing Google or Yahoo! account (Figure A). Once you allow Lucidpress to associate your account, you're into the application very quickly. I used my Google account and got to the dashboard within seconds.
Figure A

You can also integrate your Google Drive account quickly by accepting and allowing Lucidpress to view basic information about your account, allowing view and management of Google Drive, allowing it to be added to Google Drive, and allowing it to view files and documents in Google Drive. 

Next, you are given options to set the synchronization level and the save the changes. I chose to Automatically Sync Documents I Create In Lucidpress To My Drive Account (Figure B).
Figure B

Getting creative with Lucidpress digital offerings

I clicked the Create button in order to create a new folder (Figure C).
Figure C
I selected New Folder, named it Demo Web Content, and clicked OK (Figure D).
Figure D

Figure E

I went back to the Create button and selected New Document (Figure F).
Figure F

The list of templates is displayed for digital, print, and custom options, along with several categories, including blank, basic layouts, flyers, interactive, and more (Figure G).
Figure G
Lucidpress offers 36 digital templates at this time, which seems like a short list when you compare that to other "publish" type applications. I decided to use a template from the Digital Interactive category and then selected the Space Exploration template (Figure H).
Figure H

I named the project document Space Exploration Demo. When I selected the document, it opened in Layout mode (Figure I).
Figure I
The Space Exploration template has four pages designed within a parallax scrolling scheme with a main horizontal scroll between them, and then a vertical scroll is included on the second and fourth pages, which reveal more content. The third page includes expanded views of four space-themed images.
From the top menu bar in the dashboard, I went to the Share tab and clicked the Publish menu option to "publish" the document (Figure J).
Figure J
Once published, I wanted to see how the user experience for this interactive template would measure up. The navigation seemed a bit clunky given that the active bar above the pages is not too easy to notice at first, and there are no intuitive instructions for which direction to proceed. I would think a template would include at least a few basic navigation clues other than the sliver of a line at the top (Figure K).
Figure K
I decided to try to add a navigation clue to the cover page. I went back to the layout view, selected objects from the left sidebar and then a right arrow shape, and dragged it to the right side of the cover page. My first attempt somehow got lost even after I saved the document, so I attempted to add in another right arrow shape, modified its line and filled gradient properties and then saved the file again (Figure L).
Figure L
I selected Share and Publish again, and the arrow displayed (Figure M).
Figure M
Clicking the right arrow does nothing, but using your mouse to click and drag or using the right arrow key on the keyboard takes you to the second page. I wanted to see if I could add a click-action function to the right arrow so I didn't have to use click-and-drag functionality for the parallax effect to work.

In the dashboard I went into Interaction Mode and clicked the right arrow. When the Choose An Action dialog box appeared, I selected Link To Page from the drop-down selection and then selected Page 2 from the page drop-down. Once the action was saved and I'd saved the document, I tested it by refreshing the preview; I was able to click the arrow and advance to the next page (Figure N).
Figure N
A few side notes: It's too bad that the down arrows included in the second page don't appear to be editable or part of the sidebar toolkit of shapes. In addition, the keyboard up and down arrows do not work for the vertical parallax scrolling effects -- only the mouse can be used for that feature. The next step would be to add the arrow shapes to the other three pages and point to their respective directions for navigation cues. I attempted to add a right arrow with a similar action to navigate from the second page to the third, but the action in the live page would never work for me, even after multiple saves of both the action and the document (Figure O).
Figure O
The Space Exploration template includes 30 images and makes for a bloated website. I tried to run a performance and network utilization audit using Google Developer Inspect Element Audit, and it only completed for the present state, which resulted in three yellow flags for cookie size, unused CSS, and CSS property names, and one red flag for failure to optimize the order of script and CSS references. I attempted to run an audit on load, and it would hang on the 7 of 10 loading and never complete (Figure P).
Figure P
While I could have selected a less involved Lucidpress template, it was my intent to utilize a highly interactive digital offering from the selections. I can only hope that less involved templates are more user friendly.  

Embedding video

I attempted to embed several YouTube videos. Each of the share URLs that I tried failed to parse using either the straight share URL or the embed code using the