Skip to main content

Posts

Showing posts from January, 2018

Creating an online portfolio

Another crucial element of assembling an online personality behind a brand is creating an accessible portfolio (or e-portfolio) which demonstrates skills and previous experience in a specific field. For that purpose I developed my own online portfolio using Bootstrap. But before I dive into the process, here is an example of my previous attempt of creating a live website concentrating on my ambition to become a web designer   The prototype was designer in Adobe Muse but was never published online. It was mainly built for one of my university units during the first year of my studies. My career goals and ambitions were still a bit vague and needed more clarification (which came eventually by looking further into the industry and acquiring work experience). The presentation mainly relies on using dark visuals which in some cases might be considered as a trademark for one's creative work (e.g. photography or filmography). However, for a web designer, creating content wh...

Creating a CV

Having a professional looking CV tailored to a specific industry significantly increases the chances of getting noticed and invited for an interview when applying for a job. Creating a Curriculum Vitae that aims to target web and graphic design agencies was accomplished via several crucial steps Format Instead of trying the traditional approach of developing a traditional looking Word document that relies mainly on text information rather than a visual element, I looked into Creative CVs examples built with Adobe Photoshop and Adobe Illustrator Using iconography, sans serif fonts and experimenting with colours was a challenge that I was willing to take in order to produce a visually impressive CV that stands out and grabs the eye of employers Layout There are numerous options for defining the structure of a CV. In many ways, Graphic and Web designers aim to create a brand for themselves and then assemble CV and Portfolio around it. A lot of examples that I stumb...

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

The importance of a (live) Portfolio

During my first visit at Bate Brand’s studio I encountered a situation that made me feel quite nervous initially. After summarizing the idea of doing work experience, I was asked by Mr. Bate to show the team a representation of my work. I assumed that Mr. Bate wanted to see a live portfolio with excerpts that I have created – a necessity for any designer that works with web technologies and graphics. For the time being I did not have a portfolio that was available online. I had researched hosting options but did not go any further than that. This made me feel quite insecure and I felt almost ashamed that I had not proceeded with the task before.  I explained to Mr. Bate that at the present time I was not able to showcase my previous work in a remotely accessed format. I also mentioned that I had looked into domain availability and pricing plans and explained that at the time I could not afford them. However, I remembered that when approaching Bate Brand for a first time by an ...

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

Squarespace & Mapbox

During one of my following meetings with Bate Brand, I was asked by Elliott if I had worked with Mapbox – a mapping platform that supports customization and has a mobile friendly interface. I had a go with Mapbox Studio and attempted customizing the colours of elements of the map such as main roads, water,street name formatting, etc. Elliott then offered me that if I felt comfortable with the platform I could come up with a customized map that shows the location of Signature Printing’s office and makes it more appealing than using a simple Google maps plugin At home I had more chance to explore the capabilities of the software. I tried some of the pre-made styles for the map and came up with some ideas on how to slightly amend them. I used different shades for the water colour and main road colour.  Where static units were used in the code for any element’s width I changed them to relative which ensures that the content is responsive and displayed appropriately on a b...

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