More web design creativity in less time
Writing code that you have already written? and have high likelihood of needing to write again? We did that once - and now we use it again and again. While standards change quickly in web design, individual approaches to solving problems tend to take a turn on this carousel every so often. The more time we spend in this industry, the more repetitive task patterns become evident. At the same time, we prefer not to waste time, but to begin websites with fresh, trustworthy approaches to code that last as long as possible.
Skip right to the code
Furthermore, Aquarian Web Studio designs websites in code. Yes, it’s true - and to do this, it makes sense to provide the designer with the standard tools she needs - not the html5 spec, but a whole plain web page ready for styling, iterating, and building. One that updates via a local server every time the page is saved. One that takes “dev-ops” out of the equation. One that communicates back when it finds errors, not just breaks. One that can be set up in 15 minutes and ready to design on. New project excitement can be harnessed effectively and joyfully if the designer is able to explore it while it’s fresh - that is, without repetitive work or “reinventing the wheel.”
The Petroglyph UI does all of this - and it makes our websites better.
I have fond (well, sort-of) memories of the late 2000’s - when this wasn’t a problem because web designers went directly to Photoshop to make web designs. (My website carolinecblaker.com still reflects this style - don’t tell anyone.) The Photoshop approach allowed web designers to jump in and make images of websites that developers could then take and make into webpages. There was never enough information and lots of time got spent going back and forth before the client got their own review, which had the power to spin even the most streamlined builds into chaos. None of this ever made sense to me. It’s one of the reasons I pursued development first in my career. Marching orders to execute on - nothing subjective.
Building from the Petroglyph UI allows the same designer to jump into an HTML page and begin designing with custom colors and typefaces in the code, in the browser, exactly as it will look, feel, and behave in the finished website, absolutely no third parties or translations necessary. They can build a working prototype of their front-end website design from the inception point of the project with an absolute zero wait time. They can create rows, pages, UI elements, cards, and entire page layouts in one document, promoting harmony in the design and improving outcomes along the project timeline. At the very first checkpoint, the client can see and interact elements of their website that are already coded, and all manner of client feedback is relevant and can be addressed - from type spacing to design critique, not to mention those creative ideas that arise from seeing finished work- early and often! In this process, the client will never experience not being heard, and any redirected efforts will only have to be re-coded - no big deal! The client’s satisfaction potential skyrockets- just because you used the Petroglyph UI.
What’s included
The Petroglyph UI includes elements on a web page that are commonly found on many websites, providing a reliable starter code set from which to jump off with ones’ own design or other specific features.
- NPM Install installs Tailwind, Vue.JS, and Webpack.
- An HTML page
- Color palette Gradients
- Typeface Grid
- Blog / text with images
- Cards
- Form and UI Elements
- Off-page features
- Tailwind CSS & linked stylesheet
Tailwind CSS
Tailwind CSS is the design system for developers - allowing html classes to pull in hundreds of css properties with html insertions - no more jumping back and forth between HTML and CSS files. With Tailwind on the Petroglyph UI, you can access all Tailwind CSS features and create compound features of your own. Create your look and feel gradually, then lock it up as needed in your stylesheet - the process is all yours.
Vue.js
Oh you want to create more of an app website? Ok. Done. Vue.js is a huge topic - the Petroglyph UI brings you a working starter Vue.js sandbox where you can make anything. Our starter functions in here include the desktop navigation (from mobile-first) a drawer, and more is planned for development.
Webpack Development Server
This is the cool part where it all comes together. You can work with the code on your computer without any other fancy/nerdy/tricky set-up (unless NPM is fancy - maybe it is? You'll need that) With the webpack development server installed (when NPM install comes out clean,) some cool things happen.
npm run dev
This fires up a web server and serves you your page from a place of having already compiled it. No, the compiled files aren’t present, but that detail is omitted by design because you are not working on the compiled files. When you save your html document, your changes appear automatically on the screen in real time. Combining this with controlling css from the html document with Tailwind, your web design process can become lightning fast.
npm run build
This pipes out compiled files for all aspects - Vue.JS, tailwind, your HTML file - all connected, all ready to go. These files aren’t minimized and can be copied and distributed if doing so via repository isn’t an option.
npm run prod
Like npm build, but minimized for production. At Aquarian, we pipe these right into our live websites using the available settings in the webpack.config.js file in a directory linked as assets/webpack or UI, on this one: https://www.aquarianwebdesign.com/ui/
Piping of production files directly into the CMS prevents us from having these NPM libraries and processes go live on the production server while we make use of the Petroglyph UI locally. Once the changes are made in the UI doc, we run this command, and the changes are saved in a minimized, pruned, lightweight CSS (and sometimes JS) file(s) that are piped right into the website repository, ready to be used, without any of their Petroglyph UI ingredients. Secure, convenient, flexible, fast, streamlined, modern - this is the Petroglyph UI.
A living starter template for websites
The Petroglyph UI was designed in collaboration with Angie Herrera of Block81 in Portland OR. Angie was tasked with laying out elements on a page and is responsible for many of the designer-specific additions, especially the color palette and typeface table. This UI kit covered the initial redesign of [petroglyphcreative.com](http://petroglyphcreative.com) using Tailwind. Thanks, Angie! Without you we would still be using Foundation.
The color palette and font choices on the original design document are now the defaults on the Petroglyph UI. As we changed our brand and became Aquarian Web Studio, we changed our fonts and colors, as well as some layout options - but we wanted to see these choices and this work live on. We authored the code in-house and have added the mobile-first menu, the UI drawer, and have more improvements planned for the future as needed.
The Petroglyph UI is not your finished website design - it is a plain starter pack with modern speed and convenience built in and ready to go. It is built by website developers and and web designers for ourselves and each other. We invite you to consider it next time you’re faced with writing every div from scratch. Totally unnecessary! We use it on all newly-originated web design projects. It’s free for you to use, too. We appreciate attribution but don’t demand it. Already used the Petroglyph UI? We’d love to hear about it! Write us a note and drop us an email or leave it in the comments.