Craft:Scribe: Website Branding

About

I worked with my client, who is also a developer, to create the branding of Craft:Scribe, a WYSIWYG website builder similar to WordPress, including the logo, landing page, and CMS (Content Management System) design.

Role

Landing page design / UI & UX design / Logo design

Tools

Adobe XD, Adobe Illustrator

Logo Design

Logo Research

I referenced logos of other website/app builder software companies, as well as those named “Scribe” and helped my client to narrow down their vision to a hand holding a quill as their logo. From there, it was a matter of refining the exact composition, typeface, and color variations.

Landing Page

The client wanted to landing page to be animated to emulate the WYSIWYG editor workflow. We brainstormed several ideas of how to visualize this, using Adobe XD’s Auto-Animate feature.

The user would be able to go through the animation either by clicking on certain areas (e.g. buttons, overlays) or simply by scrolling.

Desktop

Mobile

Interaction points & animations on mobile are similar to desktop, where elements are revealed/animated when user scrolls down the page.

Landing Page Research

References for static layouts for respectively: Hero section, value proposition, and call to action (to join the waitlist)

References I sourced for similar page builder software’s product animations

CMS Design

No mobile design was created for the CMS, as we assumed most users would access the CMS via desktop.

I prototyped many variations of the UI with my client to design one that would be clean and intuitive, including actions such as: renaming pages, bulk actions, adding blocks and widgets, and being able to view all blocks at a glance.