DEMO FOR DESIGN STUDIOS
From a public website to a pitch in the client's own brand
Give us the address of a public website and we capture what it is built from - its colors, its type and the way it uses them. That is enough to show a prospective customer new work in their own brand - an added feature, a website refresh, an app - using only publicly available information. Below is one example: a visit app for Parklife Communications, Brian Castle's firm, whose expertise and direction is marketing and branding strategy. It was proposed from Parklife's public pages alone and is shown here with Parklife's permission.
What a Studio Does with This
- Pitch a prospective customer for additional work before the first meeting, in their own colors and type.
- Show the added feature or the website refresh as screens, not as a proposal.
- Start from nothing but the public site: no logins, no files, no brand guide.
The App in Three Themes
Studio is a dark room. Daylight is a gallery wall. Signal is a poster.
The page above uses our three public themes; the screens below use the studio's own colors, type, spacing and square corners, and their own switch.
The type is Poppins, the face on the studio's own buttons. Its main text face is a paid font, so it is not used here.
Phone at 390px
Openings this week
Come In.
Make time for yourselfA first conversation about what you want to make next.
Photo: Marvin Meyer, Unsplash
Openings this week
Openings.
Make time for yourselfNinety minutes, in the studio.
Photo: Marvin Meyer, Unsplash
Your visit
10:00
Make time for yourselfThursday. Ninety minutes in the studio. You leave knowing the next step.
Photo: Marvin Meyer, Unsplash
Times are samples.
Web at 1440px
Openings this week
Come In.
Make time for yourselfA first conversation about what you want to make next.
Photo: Marvin Meyer, Unsplash
Openings this week
Openings.
Make time for yourselfNinety minutes, in the studio.
Photo: Marvin Meyer, Unsplash
Your visit
10:00
Make time for yourselfThursday. Ninety minutes in the studio. You leave knowing the next step.
Photo: Marvin Meyer, Unsplash
Times are samples.
See the information gleaned from the public site
Color
Ground
#262626
The dark field behind the page and its header.
Type on dark
#ffffff
The type that sits on that field.
Call to action
#333399
The filled button on the public page. Studio and Daylight carry it into their calls to action.
Logo red
#cc3333
Sampled from the logo. A mark, not type.
Logo teal
#33ffcc
Sampled from the logo. Signal uses it for its call to action.
Logo blue
#0066cc
Sampled from the logo. A mark, not type.
Logo orange
#ff6633
Sampled from the logo. A mark, not type.
Type
Poppins
Let's talk.
The nearest free stand-in for the face on the public site, used here for display and for body. The studio's own face stays licensed to the studio.
Spacing
8
14
26
The gaps on the public page, brought to a whole-pixel rhythm of 8, 14 and 26.
Corners
0
Every corner measured on the page was square.
Home: the invitation, the next opening, and the one action.
Openings: a short list of sample times. In a pitch, the studio's own times go here.
Visit: one opening, and the same action again.
Beside the Source
In a pitch, the prospective customer sees their live site beside the new screens at the same width. The live site is at parklifecomm.com; the three differences we measured are below.
Proposed Visit App (390px)
Openings this week
Come In.
Make time for yourselfA first conversation about what you want to make next.
Photo: Marvin Meyer, Unsplash
Openings this week
Openings.
Make time for yourselfNinety minutes, in the studio.
Photo: Marvin Meyer, Unsplash
Your visit
10:00
Make time for yourselfThursday. Ninety minutes in the studio. You leave knowing the next step.
Photo: Marvin Meyer, Unsplash
Times are samples.
- Layout: a marketing homepage versus a visit home, a list of openings, and one visit.
- Navigation: the site menu versus three words, Home, Openings and Visit, with a clear mark for the current screen.
- Imagery: our own licensed copy of the desk photo, shown as a hero or a framed print.
Proposed Visit App (1440px)
Openings this week
Come In.
Make time for yourselfA first conversation about what you want to make next.
Photo: Marvin Meyer, Unsplash
Openings this week
Openings.
Make time for yourselfNinety minutes, in the studio.
Photo: Marvin Meyer, Unsplash
Your visit
10:00
Make time for yourselfThursday. Ninety minutes in the studio. You leave knowing the next step.
Photo: Marvin Meyer, Unsplash
Times are samples.
How It Was Made
- A read of one public page of parklifecomm.com: the style of every element on it, 576 in all, and one picture of the page.
- The palette taken from that read, with four logo colors sampled by hand.
- Three themes built from that palette and the site's own type, spacing and square corners.
- Screens for a visit app the studio could hand a client: a home, a list of openings, and one visit, with the public site's own call to action.
- We measured contrast, tested for overflow and compared the screens with the real site at the same width.
- A person read it before it went up.
Built from public pages only. Nothing was logged into. The read keeps a private record of the page's styles and one picture of it. The studio did not commission this demo; it gave permission to be named.
If you recognize your own studio and want this page changed or removed, write to jack@clevelsalesguy.com and it is done the same day.
You can find the source for each sentence in the page’s HTML.