Skip to main content

Proceeding with the prototype for Signature Printing


After taking into account the comments about my mockup design, I proceeded with implementing it onto the template. Elliott and I discussed the nature of the visuals that I needed in order to create a functional and realistic prototype. He suggested that for the time being I can use Adobe Stock images after showing me how to browse and download them. For the homepage, I used two images from Adobe and one from a free stock gallery website. For the Case Studies section I explained that it would be best to put images that represent Signature Printing’s work for three of their clients. Elliott gave me access to Bate Brand’s Client Work database which contained high quality PSDs of magazines/catalogues in the right format. I exported them to Photoshop and created a web compatible version of the visuals which I assumed would look presentable on the webpage.

For the purpose of making the homepage more dynamic, I went back to the tutorial that Elliott showed me about CSS animations in one of our first meetings. I decided to test their functionality with the recently updated template Then, as Elliott was going through my progress so far, he suggested that an announcement bar can be placed on the top of the page so that users can have access to Signature Printing’s contact details throughout the whole browsing experience. He demonstrated me how this can be done and I customized the font and the colours of the bar. 


Comments

Popular posts from this blog

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...

Looking for work experience

Acquiring work experience before graduating and getting a feel of what working with professionals feels like are objectives I consider as highly important. This led me to applying on a voluntary basis for several companies on Isle of Wight as a Web Design intern, hoping to produce some original work and make contacts that would help me if I decided to take a placement year. In October 2016 I approached several companies by email and phone. I attached my best pieces of work that match the quality of the projects I had seen in the portfolios of the businesses. A lot of them however were small web design agencies that that could not accommodate a student due to lack of space. Eventually I received a message from a company called Bate Brand that seemed interested in my work. I was invited to their office for an informal chat that would help me and Mark (Bate Brand’s director) see how I can be useful for the company. On October 21st I met Mark and his team in their office in Ryde. ...

Creating a mockup for Signature Printing

For my next meetin with Bate Brand I researched some of the features that sites identical to Signature Printing incorporate. Subsequently, I created a PSD mockup that included a carousel slideshow, fixed menu at the top of the page and parallax scrolling I presented the mockup to Elliott and justified my choice for the sections and dynamic functionality (where available). He seemed pleased with it and said him and Mark would go through it more extensively. Also, Elliott gave me access to Bate Brand’s Squarespace account so I could explore it a bit more and attempt adding content blocks, check the available templates and see how the mock I had created can be best represented with a Squarespace template. I decided to use the Bedford template as a start. I had no difficulties placing content blocks or rearranging them. However, after analyzing the settings options and doing additional research online, I found out that the template does not support parallax scrolling o...