Perma Design

Perma is a friendly web design, print design and photography studio based in Bristol, South-West UK. We create feature-rich, elegantly simple and surprisingly affordable websites, which are easy for you to manage and update.

[permadesign]

Perma Design's web development round-up, #6

Brace.io

Brace.io have been bought by Squarespace, though their tools for static sites will still be available for the forseeable future. Brace Forms is a simple and elegant way to implement forms on a simple server, (GitHub Pages for example) and Brace Tags is a solid static site generator.

Static websites & Node.js

Speaking of static site generators, keep your eyes peeled for our upcoming post about (mostly) node.js static site generators/simple web app frameworks. We're also co-organisers of Bristol NodeSchool, so sign up on our Meetup group if you'd like to learn all about node.js and meet plenty of other Bristol-based web developers!

Project-management Webapps

We've been using Stack for project task lists, and have found it really helps us to keep track of project progress, and their support is great. Vivify Scrum is a good free alternative.

Articles

Web design agency Hanno have released their process to the public, which we've found interesting and helpful. Also helpful and conversation-provoking is Eric Kennedy's two-part article, 7 rules for crating gorgeous UIs.

Free icons & a social tool

Twibble is a handy tool if you have clients who want to automatically tweet from their blog or their clients' blogs. Iconmelon offer hundreds of free SVG icons, which are easier to implement than you might expect. Lastly, here's a really nice set of free social icons, always handy.

Processing comes to JavaScript

P5.js is a port of Processing to JavaScript, which will be really interesting to watch. Processing is a development environment with an emphasis on visual arts. We first used it a decade ago, and have watched it grow into a thriving community of people building interesting and beautiful things, so it's exciting to see it come to the web.

And on the stereo...

...is Mr. Mitch's new album Parallel Memories, Alvvays' eponymous debut album, and Bristol-based doom/sludge band Blackflower.

[permadesign]

Perma Design's weekly design and web development round-up, #5

Meyerweb Colour Blender

It's a little thing, but we found this to be immensely useful on a recent website. Simply paste in two hex values to get a third value which is exactly in-between the two. Other great colour tools we use are Rainbow and uiGradients.

Oozled

An incredible resource for web developers and designers. This is a curated set of lists of podcasts, tools, software, tutorials and much more. We've found some exciting new content management systems through Oozled, and plenty of articles to read later.

October CMS

Still in open beta, this is a really exciting new CMS. Using the Laravel framework and modern PHP best practices, October is modular, with functionality able to be easily added when needed. The admin is simple and beautiful, and it's worth watching the ten-minute intro video to get an idea of what October can offer. October is open-source and free, as is Pagekit, which also looks promising.

E-mail Design Workflow

This is a priceless guide to a toolkit and workflow for building HTML e-mails. We've seen a lot of guides and tools for e-mails but nothing as streamlined as this.

Stop Endless Revisions

Creative Bloq's guide to working with clients, to ensure that their project doesn't get stuck in an endless loop of revision after revision. Taking the view that this cycle isn't good for either designer or client, this is a practical guide to managing projects well.

And on the stereo...

...is Alan Watt's Zen Bones & Tales, Xeno & Oaklander's 'Par Avion', and a blast from our past with Treble Charger's self-titled debut album.

[permadesign]

Perma Design's weekly design and web development round-up, #4

Cheetyr Cheat-Sheets

We've been loving these handy cheat-sheets for Photoshop, Illustrator, CSS, Git and Vim. It's always worth learning keyboard shortcuts to speed up your workflow, and a strange pride comes with remembering an obscure one (ctrl+alt+shift+s on Photoshop is a personal favourite).

Uncss

A great Github repository which removes unused CSS from your projects. Really handy when using frameworks, though keep a copy of the original CSS for future development.

Gridlover

Not a layout grid as the title suggests, but a free visual tool to establish a typographic system with modular scale and vertical rhythm. With an intuitive interface and an output of very usable code, this is one which went straight into our toolkit.

Paul Jarvis' guide to 'onboarding' clients

Unfortunately this one only went out to receivers of Paul Jarvis' newsletter, but it was full of helpful tips and we recommend signing up. Freelancers and small agencies/web-shops spend a huge amount of unbillable time speaking to clients each day, and Paul gives ideas for automating processes to make the developer's life easier as well as providing a better experience for the client.

TheStocks

Whether you're helping a client to find some beautiful images or simply creating dummy content for a client who doesn't have any yet, you'll find plenty of great, completely free images to use here. There are also lots of free travel photos here.

And on the stereo...

...is The Grateful Dead's 'Workingman's Dead', Nas's Nastradamus, and Hawkwind's 'Levitation' (courtesy of Steamy Press).

[permadesign]

We've finished a website & photography for Bristol-based voice actor Andrew T. Collins!

We've recently finished a website and photography for Andrew T. Collins, a voice actor from Bristol with an impressive roster of clients.

The site was fairly light on content with an emphasis on encouraging clients to get in touch with Andrew, so we built a one-page website with smooth navigation scrolling, and the blog on a separate page. YouTube, Vimeo and Soundcloud embeds provide examples of his work and a cache system ensures that they don't weight the page down.

We visited Andrew to take photos of him and luckily enough it was raining, allowing us to take a photo which will perfectly suit the stereotypes that his American clients may hold of a British voice actor.

Visit andrewtcollins.co.uk

More case studies

[permadesign]

We've finished a website for Soho-based production company, Good Egg

We've just finished redesigning Good Egg's website. Good Egg are a great production company, and their directors have worked with an impressive roster of clients.

Good Egg were happy with the design of their old website, but they needed to be able to manage content themselves, as well as adding regularly to a blog. They also needed a strategy for improving their search engine ranking so both fans and potential clients could find them more easily. Their low search engine ranking was not reflective of the esteem in which they are held by their industry.

We took cues from their current site and moved to a single typeface throughout, (Calluna) making the site responsive and testing to ensure that users on all devices have a good experience. We added thumbnail images over the embedded video players to speed up loading times, and we made sure that mobile users can call or e-mail Good Egg with one touch, from all pages.

We will visit Good egg and train their staff in updating their site so that they can get their rich creative output to their audience, and we look forward to seeing their search ranking improve drastically over time.

If your site could do with a redesign or if you're starting a new business and need to reach a bigger audience, just get in touch to chat about how we can help you.

Visit Good Egg's website

More case studies

[permadesign]

We finished a website and photography for the Compasses Inn!

We recently finished a website and photography for The Compasses Inn, a beautiful boutique hotel near Salisbury, Wiltshire. The site is responsive, and we made sure that the user has plenty of opportunities to book a room or a table.

The site has been live for a while, and the owners of the hotel have already noticed an increase in the number of customers booking with them through their website.

Get in touch if you have a business that could benefit from a new website like this!

Visit the Compasses Inn's website

Back to Case Studies

[permadesign]

Perma Design's weekly design and web development round-up, #3

Foundation's New Grid

Foundation have released a teaser of their new grid system, as well as an invitation to the beta. We're fans of their existing grid system, and having tried out every single system we've been able to find, we like how versatile Foundation's is. The new grid looks like it's leaving legacy browsers behind and diving into Flexbox, allowing a more app-like functionality. It'll be interesting to see if the web picks up on this (and Node.js' server-side versatility) to create a modernised experience of the frames that were popular on the web 10 years ago.

Jessica Hische's Ultra Schedule

Jessica Hische wrote an excellent article this week, about juggling the demands of multiple clients and how difficult that can be when the schedules of friends and loved ones don't allow a web designer to work evenings and weekends. We gave her method a try and it really helped us to focus on one thing at a time. Well worth a read.

July's Best Typography Sites

This series of the web's best typography is always an inspiration. We particularly like Readymag's combination of Avenir and Nobel.

How to Customise the WP Admin

This is a handy guide to all the different ways to make the WordPress admin simpler and more client-friendly. There are links to handy admin themes as well. Simplifying the WordPress admin is often overlooked by web developers, even though it can be really important in encouraging clients to update their sites and improve their SEO.

Minimal Full-screen Form Interface

Codrops are at it again with a full-screen version of their single-line form. A great, free resource, this is sure to focus the user and make sure that their form-filling experience is as smooth as can be. Works great on mobile too.

And on the stereo...

...is Perfect Pussy's 'Say Yes to Love', Tim Hecker and Daniel Lopatin's 'Instrumental Tourist', and Le1f's 'Dark York'.

[permadesign]

Perma Design's weekly design and web development round-up, #2

This week, we've been intrigued by a new content management system called Prismic.io. Abstracting content from presentation and letting content writers focus on content only seems like it'll save work for designers and developers. Placing no constraints on technologies used in projects, this seems a very modern way to make a CMS.

Elma Studio have celebrated their 5th Birthday, and have also released a great new magazine theme for WordPress, called Zuki. Their themes are cleanly coded and adaptable, and the design is minimal done right..

Grilli Type have made a great typeface called GT Haptik, which you can try for free. You can see Haptik in use on Curator app's beautiful site.

Here's Francis Cortez's useful idea for a design sprint. It's always helpful to be able to see how other designers work, and process is something we're always refining.

More from Codrops; this time it's free custom select elements. It's amazing that Codrops give away so many free building blocks for designing websites.

Beyond Tellerand happened, and the videos are up for all to see. We enjoyed Chris Coyier's talk on SVG and Johnathan Snook's talk on naming conventions.

And on the stereo...

...is Substrata by Biosphere, anything by Haushka, and the Luxury Elite / Saint Pepsi split LP.

[permadesign]

Perma Design's weekly design and web development round-up, #1

Happy birthday, us!

Perma Design turned 1 last week. It's been a great year, and though starting out alone can be daunting, the satisfaction of working for ourselves has more than made up for any difficulties. We've worked with some really interesting clients, met plenty of inspiring people and learned a lot along the way. Here's to many more years of helping great small businesses to find success by building their identity and digital presence!

Special thanks goes out to Sammy Maine of Creative Bloq for egging us on when we've needed it the most!

Our first weekly round-up of design & web development tools and tips

Here's the first in our ongoing series of helpful/inspiring links for designers and web developers, as well as the music that's been raising our spirits. They may not all be completely brand new, but they're things we've seen in the past week and thought were brilliant.

1. Over the Tiny Hills

We've seen links to this website everywhere over the past few days. It's a great little promotional site for the new album by the Dead Pirates, and it reminds us of the thrill of holding an interactive CD-ROM adventure in our teenage mitts, fresh out of Our Price.

The website uses Three.js, WEBGL and API Web Audio. Particularly clever is the way the EQ of the audio changes depending on the user's position relative to the gramophone speaker.

2. The Best Typography-Based Sites of June 2014

A monthly feature which we've found to be immensely useful for typography inspiration. We particularly love FF Super Grotesk and Sofia, and Akkurat is an old favourite.

3. Codrops Collective #123

We keep coming back to the Codrops website, as their tutorials and free components are always exciting and useful. In addition to this, they keep pumping out a fantastic newsletter of new technologies and techniques. This issue has a free font called Anders, an Angular.js UI library, tutorials, talks and more.

4. Underscores WordPress Starter Theme

We're starting a new WordPress site this week (our first WordPress site in six months), and we'll be starting with this. Contributed to by some of the world's top developers and made to ensure as modern a website as possible, this looks like a fantastic place to start a new WordPress project. Lovely colour palette on the site too.

5. Shaping up with Angular.js

We've heard a lot about Angular.js of late, and ahead of Codehub's workshop tomorrow we thought we'd dig a little deeper. This is a fun and free primer for the JavaScript framework which will get you up to speed with the hows and the whys.

And on the stereo...

...is Kassem Mosse's NTS Radio show (one week only), Macintosh Plus' Floral Shoppe, and anything by Nils Frahm.

[permadesign]

Web design and development meet-ups in Bristol and the South-West

Have you ever felt like meeting people and sharing some of your hard-earned experience in the web design world? Have a look at what's happening in and around the west; it's a buzzing hive of activity filled with people keen to learn and share.

Here's a selection of inspiring groups in the area that meet regularly. Most meet-ups in the South-West center in and around the main hubs of Bristol and Bath. So if you're local you might find something that suits you right here!

This week saw us attend a really good workshop by Github's Andrew Nesbitt in Bristol, hosted by the folks over at Codehub. Codehub is a positive and friendly group for people to delve into the coding world, share experience and learn in a relaxed and unintimidating way. The meet-ups run once a month, hop over to codehub.org.uk to find about the next event.

For those with more specific interests, or who are looking into something new, Bath Ruby User Group organise informal gatherings for everyone. If you are a novice who's interested in the language or a veteran of many years, the group likes to make sure everybody is catered for. It's worth noting that there is also a Bristol version of this group if that's closer to you.

Our last entry is BristolDevNet. This is a user group with talks and events aimed mainly at .NET developers. It to be a hub for Bristol's thriving software developer community to exchange ideas and stay up to date with all the latest shifts in software development. This group is open to developers of all backgrounds and levels of experience. 

So why not get out there and meet some new people, deepen your understanding of a chosen area of web development and have some fun too? See you there!

[permadesign]

We've finished designing a website for Bristol-based Chandos Fish Bar!

We've recently finished photography and a website for a new fish bar in Redland, Bristol.

We visited Chandos Fish Bar to photograph their new premises and get a feel for what they're about. The site took three days to build and we trained the client in updating it themselves. We used Mapbox to deliver a custom, responsive map.

If you're a start-up business or know a friend who has one and needs a website, feel free to get in touch with us or leave a comment below to find out how we can help you.

Visit Chandos Fish Bar

[permadesign]

Give coding a go for Computer Science Week!

Hi, I'm Sammy Maine. I write for a design website focusing on inspiration, tips and tutorials for established designers, as well as those simply interested in the world of graphic design.

I work with a team of coders, and seeing the difference coding can make to the website itself is often unfathomable. In the current working environment, I think it's extremely important to 'move with the times' and gain as much experience of noteworthy and sought-after skills as possible. I say this not just because it will improve your personal CV, but because (especilly working on a website as I do) it will allow you to better understand what goes on behind-the-scenes and then be able to contribute to group discussions.  

I was never a whizz with computers at school, so the thought of blindly approaching coding does fill me with dread. This week marks this year's 'Computer Science Education Week', which encourages people with no experience of coding whatsoever (such as myself) to take-part in a free, hour long tutorial to learn some of the basics.

Processing is a programming language, development environment, and online community initially set up to promote software literacy within the visual arts, and visual literacy within technology. It's a free and accessible program designed to help people learn to program, and today there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, production and fun.

Landing on the Hello Processing! website, the tutorial begins almost immediately, and you're faced with an excited teacher giving you the low-down on what you'll be learning in the next hour. Over the course of 60 minutes, I learnt how to draw shapes; how to colour shapes; how to move shapes and how to use the mouse to initiate interaction within the images I had created, all by simply typing in a few simple lines of code.

It was a really simple process, with the introductory video to each section proving easy to follow and often entertaining. The teacher was clear and thorough and I found it really easy to complete each task that he asked of me. The tasks will take you an hour if you use his example coding text but if - like me - you'd like to experiment a little on your own, be prepared to be sucked in for a little longer.

I'd really recommend this tutorial if you've never had any experience with coding before. It's suitable for any age and your coding is even saved afterwards, so you can go back and continue to experiment. For those that might find working with code a little pedantic, this hour-long tutorial moves quickly and kept me interested throughout. Hopefully I'll be a coding wizard before I know it!

Try the Hello Processing! tutorial

[permadesign]

Monument Valley has our head in a spin

Released earlier this month, Monument Valley is an isometric platform game with a spellbinding atmosphere, helped in no small part by UX Designers Ustwo's mesmerising design approach. After playing the game, we were left both bewildered and in awe of its impossible architecture. Think navigating your way out of an artwork by M. C. Escher, while marvelling at the simple, soothing colour pallete around you. Interested? We were.

The player leads a character - Princess Ida - through some ten levels, by rotating the scenery to interact with it. Players of the excellent Fez will understand how this seemingly simple mechanic can manipulate your sense of depth and leave you feeling bewildered at the impossibility of it all.  

Things may appear to be three-dimensional, but you cannot trust your eyes. If a piece of your surroundings is connected to another piece, even if it seems like it should be impossible in 3D terms, the pieces are considered connected. The game is navigated through these puzzles and at times they can seem like a distraction from the exquisite stylising and craftsmanship on offer. But this game is designed to be all about the experience. Monument Valley is a soothing play, an almost hypnotically calming world where soft colour tones and ambient soundscapes submerge the player and gently threaten to take away your entire afternoon.

The design and concept illustrations are, to us, an aesthetic which we hope will begin to proliferate more and more in web design. A few years ago, 'flat design' brought usability, readability and white-space (which hadn't often survived the leap from graphic design to the web) to the fore. Looking forward, we hope that subtle use of JavaScript, a rethinking of gifs and the proposed noise property in a future spec of CSS will allow for clean and minimal designs to retain a little character without sacrificing usability.

Designed originally with the intention that it would IOS exclusive, developers Ustwo stated that with consumer interest, the game could reach other platforms too. In the three or so weeks since the title was released it  has enjoyed an excellent critical reception from both the gaming and design community, garnering a whopping 89/100 score from the popular aggregator website Metacritic. So any of you who use the other device's operating system think that this game will be out of reach, may be pleased to hear that an Android version is coming soon. Give it a little of your precious time, and it'll stay with you like a dream you never want to forget.

[permadesign]

SowHow know how to make minimalism look tasty

SowHow, from our home town of Bristol, have unveiled a wonderfully fresh new identity.

They offer a range of quality seeds, in colourful and minimal packaging with bold text and clean illustrations. In particular we love how effective the grow guides are, and they perfectly showcase how a lot of white space and a guided experience can make infographics very easy to use.

We're pretty sure that they've used Twitter Bootstrap as the foundation for their site, which is a great example of how good a site can look without making many changes from Bootstrap's standard set-up.

Great work guys, and it's heartening to see other Bristolians putting good design at the forefront of their business. We spent a back-breaking day in the garden of our workspace yesterday and we've been getting big into juicing, so it may be time to place an order with SowHow!

[permadesign]

We finished a website for Bristol Chan Group!

We helped Bristol Chan Group to plan their new web presence. We created a simple and spacious identity, and made a user-friendly website which they can update themselves.

Bristol Chan Group plan on blogging a lot in the future to help improve their search ranking, which will help new people to find and join the group. They also hope to take new pictures, and we trained them in adding new galleries by themselves.

Visit Bristol Chan Meditation Group.

[permadesign]

We're building a site for a beautiful New Forest inn

The Compasses Inn is a boutique hotel in the beautiful village of Damerham. Surrounded by stunning views, they're situated in a great spot for hunting, trout fishing and New Forest walks. Their Michelin-trained chef serves great food, and they have local ales and a selection of whiskies. The decor is fantastic, the owners are lovely and we're happy to be building a website for them!

We travelled down from Bristol a month ago to photograph the building and had a great time making waves on flooded roads on the way there. We've made this holding site for the pub, which we deployed in minutes with our favourite new CMS, Cloudcannon. We're working on the full site and it'll be ready in the next couple of weeks

[permadesign]

Metalsmith looks like a handy CMS for web developers

Metalsmith is a new static site generator, which is currently available for free on Github.

Static websites tend to load more quickly than dynamic sites, and they can be more secure as there's no database for a hacker to access. What sets Metalsmith apart from other static site generators like Jekyll is that is can be used like Grunt to do things like:

Convert Sass files to CSS.

Concatenate CSS files.

Minify the CSS file.

Compress images files.

Sprite images in a certain folder.

Write files to a public directory.

Read files from a source directory.

Convert Markdown files to HTML.

Build a navigation from the tree.

Render each file with a template.

Write HTML to the static directory.

It also looks like it's modular, so that effectively a web designer/developer can use it to create their own custom content management system. This certainly doesn't look like a tool for somebody who is new to web design, and those particular clients who struggle with computers would baulk at it, but for the hardened web developer his could be a great solution. We're looking forward to seeing the community help to build this, and we'll link to tutorials as and when they appear. We'll look forward to chatting to other web developers about this at tonight's web design meet-up in Bristol (come along if you can!).

Stay tuned for our upcoming and exhaustive guide to alternative content management systems which we're working on at the moment.

http://www.metalsmith.io/