Skip to main content

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 website, I often felt that the template needs a bit of customization which could not be arranged by Squarespace’s options. For the purpose, additional CSS had to be implemented using the Custom CSS Panel in the Design menu.

A number of site elements had to be modified including:




  1. Site title position for tablets and phones (or any devices with a screen width less than 768px)
  2. Hiding a section of the website initially which will be then displayed by an animation
  3. Changing the design of the icons in the timeline section of the website
  • Squarespace
Apart from learning the basics of Squarespace, during the experience at Bate Brand I had the chance to explore how to make the most of the platform’s functionality. In some instances the template was limiting me as a designer as I wanted to add features that were available on different templates (customized parallax scrolling, timeline, rearrangement of the header). Regardless, satisfying results were accomplished by enhancing the presentation of the website by importing an HTML timeline which is fully working despite not originally a Squarespace feature. Also, transition effects were incorporated to give the site a more dynamic look (pop-up animations on the homepage for the intro section, fade in animations for segments of the timeline). Overall I now have a good impression of Squarespace’s capabilities and see it as a good addition to my skillet.

  • Time Management
Ensuring that all tasks for the specific week are completed on time was crucial for the project. My inability to go to Bate Brand’s office more than once a week required being responsible that all content is in place for the next time I go there so that it can be reviewed by Bate Brand’s Graphic Designer. The team at Bate Brand is also really busy with other projects so I also had to make sure that if I had any questions, concerns or suggestions regarding the website I need to prepare them for Friday (the day I normally go to the office).

  • Creativity

After getting familiar with Squarespace’s main principles, I was asked to come up with an idea of how the homepage of Signature Printing can be laid out. I looked up some Photoshop site layout mockups and designed the following arrangement. This idea was discussed with Elliott (Graphic Designer at Bate Brand) in terms of how to implement those sections with Squarespace’s functionality. Subsequently, I tried recreating this mockup using the Bedford template as a start. However, I realized that parallax scrolling is missing in this template and was encouraged by Elliott to try another template which seemed more dynamic – Shift. The latter worked better and looked smoother as it enhanced the presentation of the website with a full screen introductory section, scroll down functionality and interactive navigation. 
In another situation, I had to amend the icons in the timeline section so that they match
 the information in the section they belong to. I looked into each topic that was mentioned in the timeline, highlighted the main subject that was talked about and tried to associate it with simple words that can be searched as icons – inks,printers,3d printing

Also, I was asked to amend Signature Printing’s existing logo in a way that the same structure is kept but there is a slight variation in the colours.

Based on the color I chose for the header, I decided that the letters need to be filled with a blue colour. Also, the dots below the logo use different shades of blue which I think brings more professionalism to the logo and speaks for the brand as a well established one.


  • Photoshop

Working on certain sections of the Signature Printing website required using Photoshop for editing graphics provided by Bate Brand. For the Case Studies section I had to come up with three images that represent best Bate’s work for the companies. I was given some PSD files and extracted visuals from them that best visualise what Bate Brand have created for three of their previous clients. 
  • Communication

Being part of a well established team with many successful projects behind their back was sometimes challenging for me in terms of getting my ideas across and being confident about the outcome of my work on the website. However, this was gradually improved as after each time of completing a task on the website, I sat with Bate Brand’s Graphic Designer and went through the steps I took as well as how I think they could be improved later on.  Another example of working on my communication skills was a point when I suggested that I can make the presentation of the website more dynamic using CSS transition effects. Elliott liked the idea and was pleased with the examples I provided.
  • SEO

During my work experience, I was invited to Basecamp, a platform that the team at Bate Brand uses extensively for managing projects by exchanging messages, files, making reminders about deadlines, etc. I had a conversation with Bate Brand’s CEO about making the website friendlier to search engines and learned about the importance of naming pages and content appropriately. Also, some tips were given about the management of the project in a way that putting real content (rather than dummy content or placeholding text) can shorten the length of work but still ensure that the content is appropriately placed.
Labels:

Comments

Post a Comment

Popular posts from this blog

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 ...
Post a Comment
Read more

Signature Printing Case Studies + Adding Final Touches

For the Case Studies section I was determined to find if it was possible to place a text block on top of an image – a functionality that I had not came across up to that point in Squarespace. I assumed that fading the background will put more focus on the text and make it stand out more. Initially, I looked into solutions that rely on custom CSS but none were relevant or worked nicely with the template. I told Elliott about the issue and he showed me another Squarespace trick which did exactly what I was aiming to accomplish but with no additional code. However, when typing the text I discovered that it is always displayed in the center of the image which can eventually make it less readable and not as functional for mobile devices A solution for that was opening the image on Photoshop and adding extra space where needed so that it does the text and the images do not blend and interfere. As more content was being added on the website or it was about to be added by Laura, I ...
Post a Comment
Read more

Skills Gap & Job Analysis

Another step that I took which helped me visualise the steps I need to take in order to get a job in the field I have chosen was to look into current web design vacancies. Understanding what skills employers seek from candidates would help me analyse my understanding of how prepared I am at the moment to get a job in web design and what I need to do to increase the chances of getting employed. For the purpose I spent some time researching web design job specifications and came across a wide range of skills that are primarily required for the job. Here is a list of the vacancies which the content below is based on: Creative Web Designer - Atlantic Group (advertised by Indeed)  - optional screenshot Graphic Designer / Web Designer - Hays Specialist (advertised by Reed)  - optional screenshot Junior Web Designer - Become (Advertised by The Guardian Jobs)  - optional screenshot Web Designer - Dixons Carphone (advertised by TotalJobs)  - optional sc...
Post a Comment
Read more