Petroglyph UI Web Design & Code Customization

Part of: Our Process

  1. Step 1: Stabilize and Secure
  2. Step 2: Enhance and Study
  3. Step 3: Scale
  4. Niche Services

Can We Take A Look?

Please specify the URL that you are inquiring about

Please enter your email so we can get in touch.

Screen-bound design elements, abstracted

We design websites in code providing an immersive, client-driven design experience

The Petroglyph UI is for web developers and web design teams (and dabblers!) who:

  • Need a strong foundational head start with coding a design. Go ahead - it's free to use and download!
  • Are interested in opening up the design process to their clients getting incremental feedback iteration after iteration, and not all at once (at the end, past the deadline, etc).
  • Want to deliver the best front-end code to their clients without all the catch-up work of learning it.

Our in-house authored & maintained front-end code pack, the Petroglyph UI, is built in industry-leading front-end libraries for industry-leading content management systems (Craft CMS, ExpressionEngine) - for other website agencies, for our clients, for our friends. It is free to use and download. More than that, we trust our own work to this library. Your design, or ours?

What's different?

The Petroglyph UI allows for websites to be designed in code and to be shared, improved, and grown in a setting that prioritizes client input.

Our in-house authored & maintained front-end code pack, the Petroglyph UI, is built in industry-leading front-end libraries for industry-leading content management systems (Craft CMS, ExpressionEngine) - for other website agencies, for our clients, for our friends. It is free to use and download. More than that, we trust our own work to this library. Your design, or ours?

What is the Petroglyph UI?

The Petroglyph UI is made of a design authored with our friends Block 81 that was written for our previous website for Petroglyph Creative. We needed a design-centric starter document that treated the nitty-gritty of web design (fonts, colors - and a few basic compound components - responsive, of course, accessible - yes!) with the up-front spotlight and proof of concept that we felt was the foundation of any extraordinary web design. We wanted to show our clients font and color choices permeating an entire website document that would gradually take shape to look like their future website. Our experience now shows that our Petroglyph UI process produces visually complete website concepts with extremely satisfied clients.

The Petroglyph UI comprises Tailwind CSS 2 and Vue.js 2 (to be updated in due time to latest versions,) all bundled up with a WebPack development server that performs live updates on the design as you work and save your code. This simplifies the process of trial and error in local development all the while providing the client something they can stretch and click and evaluate in the context of a website rather than an image of a website. Furthermore, the flexible Webpack config allows for additional JS libraries and add-ons to be evaluated and bundled in at the discretion of the developer, which means it's ready to work as a web app as well.

What does the Petroglyph UI offer for Web Design?

When you design with the Petroglyph UI, you can start with color and font choices that permeate an entire long web document- allowing your client to see your choices in-context, interactive and responsive, even in the absence of choices made about any content. This allows for very objective feedback, and for action to be taken between meetings to address feedback and build more for review. Your content-forward, appy, long-process design projects will shine.

Additionally, we also like that without a lot of drama, we can add pages to the Petroglyph UI. We can try things out. Everything is presented to the client as an interactive component and not a close but non-interactive abstraction, so there is no feedback at the point of development, because it's developed first! We comb out display, responsive, and design issues in the same go.

Why develop my design on the Petroglyph UI?

The best reason is the free ability to continue to develop your web design as client priorities change and mature with the process (happens 100% of the time, btw.) If some specifics of your design show up after finalFinal_v02.actualfinal.psd, the flexibility inherent in your code (and present in your starter components) will break you out of procedural hangups when out-of-turn feedback could send you flying backwards in other web design processes.

Not to mention that you have the chance to work with Tailwind and Vue, pre-bundled together, without needing to know a whole lot of command line. The Petroglyph UI uses a self-contained development environment that produces CSS and JS files minified and ready for integration with any web project. You'll look good showing up with attentive revisions and minified, browserfy-d files.