Meeting with Bate Brand

My first meeting with Bate Brand was in their office in Ryde (Isle of Wight) . I presented my portfolio and explained to the team what I aim to achieve for the company on a voluntary basis. Mr. Bates gave me a description of what Bate Brand deals with and introduced me to a service called “Signature Printing” which provides print consultancy and advice to interested clients. I was shown the existing website and was offered to work on creating a modernised version of it. I accepted the offer and got to know the other members of the team as well – Elliott (Graphic Designer) and Rachael (Sales and Marketing).

For most of my meetings with Bate Brand I got to work more with Elliott who showed me the principles of Squarespace – a content management system for building and publishing websites. It did not take me too long to get used to it as I had worked with similar online builder before. I was also given a task by Elliott which aimed to include HTML code into a Squarespace that is also using the twenty/twenty plugin - http://www.massexod.us/blog/how-to-create-before-and-after-images-for-squarespace .

Another piece of code Elliott asked me to implement was relying more on CSS and Javascript and it adds animations to content blocks of the page in a way that it looks more dynamic and fun - https://www.droverrideshare.com/blog/2016/7/25/css-animations-and-squarespace .

Both were completed successfully as Elliott seemed impressed and suggested that we should use them for the new Signature Printing website. At the end of the session Elliott asked me if I can come up with a demo concept for the new Signature Printing website and look into some similar websites’ design choices.

Comments

Signature Printing: Next Steps

During my next few meetings at the Bate Brand office Elliott asked me if I can start working on the footer section of Signature Printing as at that point we pretty much had most of the content for the homepage. All images were in place, the layout was approved and the animation that I had implemented was working well. Where text content was needed, I put placeholder text which would later on be changed by Bate Brand’s copywriter – Laura. For the footer I attempted adding a contact form, subscribe button and a small text box that contains address details and contact number. Mark then joined in and showed me how to customize the fields in the contact form and how to display a response message. Up to that point I and the rest of the team were pleased with the homepage. Subsequently, we decided that it was time to think about the rest of the sections in the main menu. I looked into other printing and print consultancy related websites’ navigation ideas more extensively and came up w...

Implemening a Squarespace CSS Timeline

I showed Elliott the outcome of my attempts to incorporate a timeline that runs smoothly on Squarespace. I also did a lot of testing for tablet and phone mode (one of Squarespace’s features) and see how the platform responds to the code. Some of the codes did not perform as expected due to CSS segments that Squarespace does not support. However, I ended up choosing a timeline that had a modern look and a few options for customization – changing the icons and the background. Elliott was impressed with my progress as I also added more transition effects. Original CSS Code Customized CSS Code within Squarespace After doing a bit more testing I discovered that the icons don't show in an appropriate manner on mobile devices or any devices with smaller resolutions. As a result I decided to remove the icons but bring more contrast to the timeline items which joined by the animation effects would really make the content stand out Final Timeline Result Implemented ...

Work Experience Outcomes

The following post will concentrate on my experience with Bate Brand and how it affected my work ethic and existing interpersonal and professional skills. Teamwork When I was introduced to Squarespace, I often had to reach to Bate Brand’s Graphic Designer to show me how certain tasks such as modifying the layout of a page, incorporating custom CSS or changing the template can be done. An example of that was creating a blog page for the Signature Printing website. I had difficulties showing a summary of the categories of the blog and Elliott demonstrated how this can be done with inserting a new content block under the Summary section In another situation, putting text content on the website had to be synchronized with Bate Brand’s copywriter who notified me whenever any changes to the information on the website had to be applied (making text short, adding new sections that were missing before) CSS When working on specific elements of the Signature Printing ...

Georgi's Blog

Search This Blog