Alexander Brown – The Bearded Brew Project

The Event and Final Thoughts.

Alexander Brown / December 16, 2015 / Uncategorized

In the build up to the launch event, we managed to overcome some obstacles that would have originally set us back, however the event took place on Monday 7th December and we believe it was a great success. It started at 6pm and ran all the way through until 1am, with a continuous turn out of people throughout the evening. The doors were open to anyone and we managed to generate approximately 90 individuals to come and try ‘The Bearded Brew’ and check out our website. We were hoping to have a minimum of 50 people due to a potential venue charge, however we managed to avoid this from the venue exceeding their own profit targets set for the night. We also had the obstacle of the band cancelling last minute. However, after a long night of searching, we found 3 amazing acts to perform instead! Lewis Canner performed for an hour, Lauren Davidson performed a set, and the band Striped Sight went on at half 10. All in all it was a huge success, and we couldn’t have been happier with the outcome.

But the main purpose of the event was to showcase the website and get some feedback. We had a whole feedback wall that had some great feedback written on it by the end of the night. We have used this feedback to make improvements to the site, ready for the final hand in. The website is now finished. We are very happy with the work we have produced this term, and couldn’t have been happier with the outcome of the event.

But yes, here it is. We are proud to showcase:

www.thebeardedbrew.co.uk

The long spirally road of web development

Alexander Brown / November 27, 2015November 27, 2015 / Design Ideas, HTML & CSS, Web Development

So I haven’t posted many updates recently and the reason mainly has been there hasn’t been much to post. The last couple of weeks have consisted of trying to find the right tools to tackle the task at hand. I have experimented with quite a few different methods and softwares to try and get the parallax scrolling to work in a way that works for us.

This includes:

Using CSS alone to create a parallax effect <— http://keithclark.co.uk/articles/pure-css-parallax-websites/
Using a standalone parallax scrolling Javascript library <— e.g. Scrollr.
Adobe Dreamweaver
Adobe Edge Animate
Brackets
Adobe Muse <— What I decided on.

The only software I have previously used to develop websites on has been Dreamweaver. I experimented this time with using Brackets, which has the great feature of extracting CSS from a PSD file. This let me easily format all the elements on the page very quickly. I also far prefer the layout, finding it much simpler and more straightforward than Dreamweaver. However, I had a lot of trouble getting to grips with Parallax this way. I just found the process too complicated and fiddly to achieve the effect I wanted. This prompted me to search for software that would do some of the heavy lifting, leaving me to focus on the visual aspects of the site.

I experimented with Edge Animate, using the ‘EdgeCommons’ Javascript library to link the timeline to the user scrolling. Whilst this did work, it made it hard to synchronise the scrolling on different device widths. As I was working on solving this problem, I stumbled upon this video which I found very helpful.

This led me to experiment with Muse which I had never previously used. It was exactly what I had been looking for. It made the whole process of parallax far easier to achieve, letting me concentrate on other aspects of the site.

Here is my update on what the main page of the site currently looks like:

Whilst it still needs to be populated with content, I think the layout of it and design is nearly there.

What i’ve learned from all this experimenting is that I shouldn’t be afraid of new tools. If I had just stuck with Dreamweaver I don’t think the site would be anywhere near this stage. And whilst I understand that with Dreamweaver and Brackets you have far more power and control over your final site, if another tool offers everything that you want and is simpler, why shouldn’t you use it?

No beer now, only work.

– Alex

Website Mock-Up

Alexander Brown / November 13, 2015November 27, 2015 / Uncategorized, Web Development

So i’ve made another website mock-up based on Alice’s initial ideas.

The elements on the page will animate using parralax as the user scrolls down. There will also be menu’s linking each section together.

– Alex

Animation Update

Alexander Brown / November 11, 2015 / Animation Development

I have finally finished a first draft of the animation. It’s still a bit rough, and I want to play around with the colours and texture some more, but it hopefully gives a clear finished vision of what the story will look like.

– Alex

Animation update

Alexander Brown / November 3, 2015November 4, 2015 / Animation Development

So for the past while I’ve been working on getting the animation made in After Effects, so I thought I should update what I have so far onto the blog. I’ve done roughly 30 seconds of it so far, and hopefully it demonstrates the style i’m going for. Here it is:

I wanted to achieve a flat design looking animation, with very simple movements, that also shares the colour scheme to the beer itself. However, upon getting feedback from James, I’m going to look into experimenting with adding some texture to some aspects that look a little bland, like the sky. This is because the label for the beer itself isn’t totally flat design, so it may enhance the animation style. Maybe just adding some of the wiggly lines from the label may make the sky look more interesting.

After the basic animation is complete, which I hope it will be in the next few days, we’ll need to look into adding audio to it, including getting a narration for the story and adding ambient desert sounds. We can then work on how we’ll implement it into the site.

-Alex