Petroglyph UI Web Design & Code Customization

Petroglyph UI Web Design & Code Customization Image

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.

Who is the Petroglyph UI for?

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.

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.

Petroglyph UI Web Design & Code Customization Image

Foundational Strength for Front-end Code

What can a website's front-end code do to make it more valuable? When a website needs fewer updates with growing needs, it costs less to update. When a website truly is built around the content and value of the brand, it costs less to update. When it's secure, stable, and scalable without needing to address these needs separately, it costs less immediately and over time. If a website's front-end code presents with strength, it requires less intervention over time to stay fresh. The Petroglyph UI developed by Aquarian Web Studio for your website is the ultimate starting point to your website lasting longer and looking better over time.

Petroglyph UI Web Design & Code Customization Image

Process-driven Web Design for all involved

We invite you to be happier with the entire web design process. Starting with the basics (fonts, colors, web page, simple components) and iterating over a series of meetings with stakeholders provides a transparent design process where clients are invited to be heard and provide feedback, keeping all team members happier than the classic process requiring major elbow grease from designers before feedback is even possible; then often turning around late. Presenting a living document, instead, allows the client to see design decisions in the proper context (web browser,) and interact, ask questions, and participate every step of the way.

Let us help:

The sooner you tell us we could be working together, the sooner we can get started honing your online presence:

Please enter your full name.
Please specify the URL that you are inquiring about
Please enter your email so we can get in touch.
Please enter your comments.

Benefits of Petroglyph UI Web Design & Code Customization: