Petroglyph UI Web Design & Code Customization

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. Rapid iteration, easy comparison, this is a web design system that allows you to work in and deliver code first. Or, copy and paste from the Tailwind UI - we don't mind!

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 Petroglyph UI has the power to fundamentally change your relationship with your client. Delivering code in design meeting #1 and continuing to do so allows the client to evaluate their website with their own choices and opinions - instead of in the middle or the end of the design process. You get the ability to continue to develop new web design objectives as client's priorities change and mature with the process (happens 100% of the time, btw.) When using Figma/Photoshop - some specifics of your design can show up after finalFinal_v02.actualfinal.psd, the flexibility inherent in your Petroglyph UI code (and present in your starter components) will bypass normal procedural hangups (or the disintegration of the relationship) when out-of-turn feedback might normally send you flying backwards.

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. Fancy words -but how does this translate? You get the benefit of instantly reviewing your code in a browser just as it might look on production. This speeds up feature development a lot. There will be no waiting around for another phase of the project to check out how it works in mobile - or grows with a desktop page. Over as many iterations of this as you want, at some point you'll be finished - and the Petroglyph UI will minify and pipe your code right into your CMS project for you. You'll look good showing up with attentive revisions and minified, browserfy-d files.