Cedeon Design

A couple of web design projects

Posted by Cedeon Design. Categories: Blog, Webdev.

A couple of people noticed that I had some web design skills after I finished the redesign of One Byte Too Many’s website so I was given the oportunity to do a few more.  Here they are:-

Phelps Communications -http://www.phelpscommunications.co.uk.

Fully responsive web site design, hand crafted css, zurb foundation and jekyll were used to make it

Fully responsive web site design, hand crafted css, zurb foundation and jekyll were used to make it

 

Phelps Communications is a rebrand of Accelerate Aerials and like the name suggests is an Aerial Installation, Satellite & CCTV installer specialist here in Burwell.   I was given a logo to work from but the rest was up to me.  It seems like everyone these days just slaps together a wordpress theme and pushes up a site but I wanted something a bit more bespoke.  I had great experiences with static site generators (I used pelican for One Byte Too Many

I had previous run-ins with Twitter’s Bootstrap in the past but I had never done a fully responsive site from scratch with a front end frame work.  I settled for Zurb Foundation in the end and I was glad I did.  For me it’s got a real intuitive class layout and I found it a joy to work with.   I also switched static site generator frameworks from Pelican to Jekyll despite my distaste of Ruby.  I’m hoping for a decent Javascript framework as something always grinds me about ruby’s syntax.

The New Europe Society Website – http://www.neweurope.org.uk

neweurope

I used a similar process here, again utilizing Zurb Foundation 5 and Jekyll.  I relied upon Grunt to do all the site generation and it was the first time I had used it to generate a fully minified site.

These sites rock with responsiveness and load in no time at all.  I will definitely be taking the lessons I learned making these sites and using them again for future projects.

If you like them too and want to give me some SEO love (linking to these sites) in return for a huge discount in web-design then please get in contact with me at bill@cedeon.co.uk or 07846 069979.  Thanks.

 

Cedeon Website 2012

I have been seeing a lot of Parallax websites lately.  Being a child of the 80’s growing up playing parallax based computer games was probably one of the largest contributors to my career, so when i saw other websites using this to emphasize depth to great effect i just had to have a go at it.  After all my whole business revolves around 3D so parallax should be a perfect fit.

The website:

I wanted something to feel very vertical and my original concept was for some dramatic 3 point perspective that was around 1000 x 5000 pixels.  I had a couple of mock-ups but they did not go at all well.  It turns out that for a dramatic feel you need a wide depth of field and that means that as the proverbial camera tilts down (web page scrolls) there is a lot of distortion.  This cannot be simulated with 3 images!!.

I had to change my tactic and go for a very narrow angle shot.  My final piece is almost orthographic… here’s a screen shot of how it looks in Google Sketchup.

Sketchup Model of Website House

Sketchup Model of Website House

 

The house:

I chose a house because my business marketing plan for this year is to bring 3D visuals to the residential market.  Too many studios seem to push the illusion that 3D visualisation is expensive.  This is NOT the case and i think its time that we bring photo-realistic visualisations in the Planning / design process.  Architecture needs to move with the times, im sick of seeing RIBA qualified Architects that cant even draw, let alone design in a 3D computer aided design environment.  Technology moves fast and leaves the idle behind.

Ray tracing Renderers:

Nowadays rendering engines produce results that are amazing.  Fresnel reflections and some heavy tweaking gave me my final result.  The hardest part was the light shade/light  mix.  Getting adequate light on the walls without blowing out the shade compltely turned out to be an absolute nightmare.  I should probably have done it in post production but instead i burned 9+ hours to get the result natively.   Speaking of Post Production.. very little was done.. just some minor cleaning of some low settings render artifacts and i was done.  Render time was about 1 hour for a 2100 x 3600 render.

 

Final Render Composite is here:

 

Composite Final Image for website done on Photoshop

Composite Final Image for website done on Photoshop. I used this as a basis to create the parallax website.