Emma Power

Case Study: Emma Power
Website: www.emmapower.com

– Design
– Development
– Deployment
– Seo Setup
– Optimisation

Performance Score for Emma Powers website by GT Metrix. Pagespeed Score 98%. YSlow Score = 93%
There was a lot of tweaking of the server with this website. I hadn’t used siteground as a host before nor the YooTheme framework. It resulted in a number of caching compatibility issues that had to be ironed out.

A minimal design for the amazing Emma Power.

Emma requested a website after seeing sunnycopy.com and fell in love with the simplicity and focus on words. Herself being a speaker, writer and teacher she too needed a website where the copy was crucial.

Who doesn’t love a one line brief?

“simple and easy to navigate”

With her one line brief “simple and easy to navigate” I had a fair amount of breathing space in terms of direction. This kind of freedom can easily be a curse if you don’t take a direction early on and stick to it.

Sunny Copy was a static html website and Emma needed the ability to blog. So I needed a cms and wordpress is my goto for that. Seeing as I’d only been back developing for a short period I’d been reviewing basically every CSS framework under the sun. I wanted a framework that had some bells and whistles but wasn’t bloated. I would hopefully choose the right one and be able to use it for more projects. Then I came across Uikit; it was modular, so it could be lightweight and powerful.

But here’s where I went wrong. The mob behind Uikit also have made a wordpress page builder (yoothemes) for throwing pages together fast. I played around with it, it worked really well. So I decided to use it to build the site. The problem with these kinds of page builders though, is you really paint yourself into the corner. They’re great, until you want to do something outside of the tool-set they built-in for you to use. Being a dev of course I was going to run into this little problem, time, time and time again…

Dev headaches aside; it took longer than necessary to build. However the design took shape quickly.

text and elements fading in for subtle effect on Emma Powers homepage
Subtle animations to the text help bring it to life.

With a focus on the website copy I opted for minimal elements, using animation to bring the text to life.

Animated text on Emma Powers wesbite
Text animates into place as you scroll down the page.

These small touches allowed me to incorporate less images and focus on the words.

To round things up I’d have to say I was pretty happy with the outcome.

It’s beautiful, and I can see how every detail has been so well thought through. – Emma

Emma was happy and she had a professional looking website that communicated her words in a way that represented her honestly.

Tech jargon:
- wordpress cms
- yootheme pro framework
- uikit3 css framework
- acf
- autoptimize & cache enabler
- cf7
- the-seo-framework

What I can do for you

Digital: I’ll weave your narrative around the digital. Designing for web and user experience are my forte, but I wield a double edged sword as I can build what I design.

Branding: Branding is not just a pretty logo. If you want to connect with your audience, your story starts here. I can give you the best possible start. Your brand needs to flow and connect through everything you do.

Consulting: I’m a walking talking swiss army knife. What I can do for you is bring a wealth of knowledge to your next project.

“A journey of a thousand miles begins with a single step.” -Confucius

Hello world!

Yes, the title is the same as the default first post created by a fresh wordpress installation, and yes I’m sticking with it. It’s fitting. I’m returning to design and web after a long hiatus. It’s the beginning, a clean slate, a fresh install. Hello world! I’m Back.

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

When you question everything you work towards, it takes a bit of soul searching to find out who you are. That journey takes you many places. Somehow I’ve come full circle to where I was, but this time round there is a very different person at the keyboard.

I’ve decided this website can be more than just a pretty portfolio. More than a window for shiny finished products. I want to use it as an example of what I’ve come to believe is one of the most important aspects in my line of work. That is to tell the story, the narrative. Not just the good parts, the bad parts too.

I want to use this blog to show how things change, that means no erasing content. Typical pages will be in a post format. eg. my ‘about’ page will be a blog post instead. When the time comes to rewrite it with new information, I’ll keep the original and create a new ‘about’ and add some sort version system to the title (v1, v2). Very programmer of me, I know. Everything can be re-written or designed for improvement indefinitely. To then only show the latest incarnation is not telling the whole story; evolution takes time. I want the whole story told, not just the best version.

Hopefully by preserving versions my writing style, design preferences, subjects of interest that change over time. Those changes can become apparent and paint a better picture. No cherry picking of what ‘looks best’ from a marketing perspective.

I want to impress on others that imperfection is to be embraced, nothing is perfect. Every step along your path becomes a part of your map. The map tells you where you have been and how you got there. You don’t want to get to a point and turn, only to find you’ve been erasing your map every step of the way. That’s a good way to get lost. I want more things to be ‘real’. After all it’s taken me a long time after accepting these things to be able to put them into practice.

Sunny Copy

Performance Score for the sunnycopy website by GT Metrix. Pagespeed Score 100%. YSlow Score = 90%
Optimising a website can be quite an enjoyable process. If you liken it to working on a motor or tuning an instrument.

For me this is the website that got me back into web after a long hiatus. Sunny Copy is the brainchild of Jenna Meade; a copywriting freelancer targeting other creatives.

Words being the emphasise, simple design was a must. Small touches of animation and colour help bring to life the words she so beautifully ties together.

Homepage animations drawing the audience into the text.
Technical details:
- static html
- css/less
- js for animations
- font-awesome icons