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 the TechRepublic 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 <iframe> plus URL method
(Figure Q).

Figure Q

To be sure I was following the
correct procedure I searched the Lucidpress help topic on working with videos, and the short tutorial explained the same
process that I was using to embed a YouTube video (which is the
only supported video source as of this writing). After some trial and error, I figured
out that I needed to insert the specific video file name into this URL
naming convention: https://www.youtube.com/watch?v=%VideoFileName%. I think the video help documentation should state the URL needs to be adjusted using the URL
convention that the tool actually utilizes (
Figure R).

Figure R

I centered the video embed relative to
the page and other contents, and the corrected YouTube source worked, as shown
below in the live preview (Figure S).

Figure S

You can view the published Space Exploration Demo page live. I don’t like the URL that the publishing application creates, and I’m not sure if there are options to create an SEO-friendly URL, but it
would be a nice-to-have feature.

Conclusion

I only spent a couple of hours on the
one Space Exploration digital template while reviewing Lucidpress and the dashboard,
and I’m sure there are less involved templates that would work for other
digital projects. While the Space Exploration theme does have some nice
parallax elements and great images from our decades of space exploration, the
theme lacks a fluid navigation.

The Lucidpress dashboard isn’t hard to get around in, but it would be nice if there were a larger catalog and selection
of objects, images, and media sources to add into document projects — I suppose this is where the collaboration and linking to Google Drive etc. would come
into play.

I didn’t try any of the collaboration tools such as forming a team,
chat, document presence, commenting, or customizable permissions. I also didn’t browse any of the other
Lucidpress support forums or tutorials. You can submit a ticket request to
report any issues, though I didn’t submit any help desk tickets for the issues I found when attempting to make edits (i.e., the second navigation arrow
issues).