Learning HTML & CSS

One assignment during my Second year of Graphic Design study, we were required to code our own portfolio websites using HTML and CSS. Previously, I had completed a bit of training on using HTML and CSS during my summer Internship at Toast Design in 2016.

I had used Code Academy which has a number of lessons and exercises to complete which helps you to learn how to construct the code for a webpage and how to use tags. It gives you a summary of all the key information at the end of each section which I found very helpful for developing my understanding.

screen-shot-2017-01-17-at-10-34-35screen-shot-2017-01-17-at-10-35-12screen-shot-2017-01-17-at-10-35-40

To visit the Code Academy website follow this link:

https://www.codecademy.com/

This summer, I have been attempting to develop my skills in HTML and CSS further.I began reading “HTML and CSS – Design and Build Websites” written by Jon Duckett which helped me to understand the tags and different ways of adding features to a website. It was really easy to follow and understand so I was able to apply things that I had learnt and progress through the book comfortably.

I decided that I wanted to make my website responsive so that it would format to the correct dimensions for the particular screen size it was displaying onto. To apply this, I looked at the session on Code Academy which took you through step by step how you can make text and image proportional.

The main thing I took away from this lesson, was to use em’s and rem’s for text sizing and percentages for images/ media.

Learning from a Graphic Design Internship

IMG_3771IMG_3773IMG_3770IMG_3774

Over this summer, I have been interning at a design agency called Toast Design for a few weeks. During my time here, I have been working on a number of different tasks including:

  • Layouts for documents – converting documents to agency branding style
  • Website concept designs
  • Creating logo mood boards for client
  • Designing logo concepts – sketching and on Illustrator
  • Designing website banners for a range of clients (Call-to-actions)

At Toast Design, I have been working on a variety of different projects, some based on web design and others print based. Over the last year, I have been developing my skills in HTML and CSS through designing and coding my own portfolio website and am enjoying learning a new skill which I believe to be valuable as a Graphic Designer. I think that it is important to try out lots of different branches of Graphic Design as there are so many different aspects and types of project that you could work on and it is so exciting to be able to work on different projects in your day to day job.

I have been working in the web section of the agency and completed designs for banners to go on their clients sites. This helped me with ensuring that styling is relevant and suitable for the existing branding of the company in order to be consistent.

I have also been designing website concepts to be sent off to the client for approval/ choice of their favourite to progress with. I really enjoyed coming up with different variations using the companies styling and colour systems. The client fed back their favourite and one of my design concepts was chosen to progress with.

One of my favourite areas of Graphic Design is layout and Editorial design. I was able to put these skills into practice during my internship when I was given a number of documents to convert into the Toast Design styling to be provided to their clients. I enjoyed being able to take content and replace and experiment with different layouts to be visually interesting and engaging to read.

Overall, during this experience, I have learnt more about the process of a project and the different stages in terms of feeding back progress to the client. When getting an idea for what style of logo or similar design a client is looking for, I saw how you create a collection of between 30-40 inspiration images to show to the client. Giving them a wide choice allows you to get a better idea of their initial “vision” for their design. Then you are able to narrow down and design something that the client is looking for.

I think that working on projects based around websites has given me more of an interest in web design and encourages me to work harder to progress my skills and understanding in this area.

Building a Portfolio Website

When looking at how other people have laid out their portfolio websites, I saw that lots of the ones that I liked and thought were most effective were the simplistic clean designs that put the focus on the work on the website rather than distracting the user with lots of colour and features. Therefore, I would like to look at creating a website design that is simple, clean looking to reflect the type of design that I like.

In terms of colour schemes, I think that using dark greys and white would work best as it would match with any colour that it is paired with and would work for showing different projects all on one page as otherwise, having too much colour could make the website look cluttered and unprofessional. The design of the website will also create an impression of your design skills as well as the projects that you wish to share so what you are conveying with your web design should also be well considered.

screen-shot-2017-01-18-at-22-01-29

For inspiration I looked at Salad’s website, who I visited earlier in the academic year to receive an industry brief. I was particularly looking at how they have organised their “work” section. I like how they have organised their projects into different sections such as “Branding” which allows their audience to narrow down their search and find content that is relevant to them.

They then describe the problem, their solution, how they did it and the impact on their clients business. This is very informative for the audience and shows a good structure. This gives a good impression to their potential clients who might be considering using them and shows that they are methodical and seem enjoyable to work with.

This style of showing the work would be an effective one to take inspiration from for my own portfolio website as it shows organisation and structure while also being very detailed and informing your audience of all the details they need to know.

Development

I started by drawing out layout plans for my pages in order to organise my content and decide on some of the features of each of the screens e.g. homepage.

I liked the use of a 3 column grid and preferred using different sized boxes to create variation so that the layout was less structured and repetitive as this could look more boring.

layouts-11layouts-21

I then began to plan how I would display my project descriptions below my main image. I wanted to separate the information into sections and create a clear hierarchy, using features like weight, colour and layout to make certain information stand out. I wanted to ensure that each of my pages followed the same structure to be clear and consistent. Therefore, the website user would be more likely to be able to navigate the information and locate the content they are searching for.

screen-shot-2017-01-29-at-20-42-22

I ensured that I measured out the dimensions in order to save my artwork the correct size and to fit neatly on the page.

about-dimensions

I organised the layout so that the project would always begin with a large image which shows the final solution from the project and match this with my thumbnails on my homepage to create consistency between each navigation point. Using a large image would create a focal point and draw attention to the content higher up in the hierarchy.

screen-shot-2017-01-27-at-09-46-37

I began by adding project titles and descriptions below my thumbnails to give the user an insight into the project before they click into it to ensure that it is something they are interested in viewing. However, I felt that this could be more interactive and engaging through the use of rollover buttons which would provide the content only when the user requires/ wants to view it.

first-project-page

I added rollover images to my thumbnails with a title and short description to be to the point and quick to digest keeping the image behind to link text with the visual outcome.

screen-shot-2017-01-29-at-21-22-33

I then organised and spaced out each of my thumbnail images and used different shapes to create a more dynamic selection. Making use of the three column grid was able to give some structure and order to give the website a professional and neat feel.

screen-shot-2017-02-02-at-16-02-21

screen-shot-2017-01-31-at-20-43-20first-clean-streets-page

I began by implementing my content into a template just using a simple organisation with title-image-description, however, I wanted to reorganise this to bring the text together and make the image the first thing to view.

screen-shot-2017-02-01-at-10-38-00

I adjusted my text layout into separate columns and split up the different sections of text to be easily found and clear to read.

Final Website Screenshots

Screen Shot 2017-07-26 at 21.42.18.png

screen-shot-2017-01-29-at-20-56-24

I decided to make use of one main colour on my website which follows my personal branding in order to create consistency between different elements of my work. I believed that the red/pink would stand out and be bold to grab attention. I then paired this with greys and white as I didn’t want to overload the site with too many components or too much colour as I would want the focus to be placed on the work.

Screen Shot 2017-06-26 at 16.14.57.png

Within my about page, I chose to add some details from my personal branding scheme to add more colour and personality to a black and white image.

I would like to develop my website further by making it responsive, adding film features to be more interactive and engaging and to also continue developing my knowledge of HTML and CSS by reading up and putting more coding into practice.

I believe that as a Graphic Designer it is important to be well rounded/ multi skilled and try out many different types of design practices (e.g. film, editorial, branding etc.) to apply different approaches to your design process and learn new ways to tackle problems in order to find a solution in a creative way. I believe that learning to code is a valuable skill as a Graphic Designer and I hope to continue putting the new skills I am learning to good use.

To visit my live website, follow the link below:

eilidh.design

Creative Conscience Awards

cc_logo

I submitted my anti bullying film to the Creative Conscience Awards 2017, who aim to:

inspire designers to apply their talents to socially valuable projects, promoting sustainability, freedom, social health and well-being.

I attended the Creative Conscience awards evening on the 5th July 2017 at the IBM Client Centre. The evening was made up of a number of inspiring talks from IBM and the Creative Conscience team. There was also a great opportunity for networking with other student award winners, members of the design industry and the Creative Conscience team.

Over the evening I spoke to a number of other students and it was great to be able to chat to other designers in other design disciplines about their studies and their projects. There were some really amazing and innovative projects which was really inspiring to see.

I was so delighted to have been invited to the evening and have received a Gold award in the Film and Photography category. Completing this project and attending the awards evening has really shown me the power that design can have in making a change in the world for the better.

Award 1AcceptingCameraScreen

Project Credits:

Poem written by: Shane Koyczan

http://www.shanekoyczan.com/

Voice over by: Danny Annear

Research & About

More than one out of every five (20.8%) students report being bullied (National Center for Educational Statistics, 2016).

64% of children who were bullied did not report it; only 36% reported the bullying (Petrosina, Guckenburg, DeVoe, & Hanson, 2010).

Being a victim of bullying increases the risk of being depressed later in life by more than half. Bullying others increases the risk of becoming depressed by 30%.

There were 4,507 cases of cyberbullying in 2012-13, up from 2,410 in 2011-12.

“The issues facing children today are very different from those that faced us as children.”  (BBC News, 2017) Our changing society in terms of the rise of the use of technology is making cyber bullying more accessible allowing bullies to hide behind a screen.

I think it is important to understand how privatised and “invisible” this type of bullying can be and how parents and other people close to the victim could be unaware of what is happening. Being able to encourage people to think about the power of the things they do and say. It has been shown that may people “suffer in silence” and do not open up about what they are doing through which can be even more damaging if they are bottling up this hurt.

“Stranger danger, for example, rarely comes up in contacts to ChildLine but depression, self-harm, online bullying and even suicide contacts are increasing exponentially.”

Students have a unique power to prevent bullying. More than half of bullying situations (57 percent) stop when a peer intervenes on behalf of the student being bullied.  (Hawkins, Pepler, & Craig, 2001)

I believe that this is where other people have great power in being able to use positive actions to help other people. I saw great opportunity to be able to focus on how other people can help and to try and help the problem by starting at the root of how people think and interact with others.

My Aim

Bullying has a detrimental impact on the victim, leaving them with problems with self-esteem and mental health. Anyone has the potential to be bullied and others should consider their actions and words that they say to someone before they do as it can leave a permanent imprint on the victims’ mental image of who they are and their self-esteem.

The film aims to make the teenage audience consider the marks that they leave on others and the lasting impact that their words and actions can have. It makes use of marks left on surfaces using ink spreading to represent the control and power of the bully and the influence they can have. It aims to disconnect the victim as someone belonging to a particular group e.g. age, gender, race etc. in order to relate to a larger group of people. It tries to enable individuals to relate the film and interpret from their own experiences.

Personal Story/ Experience

While growing up, I was and still am a quiet person. Going through secondary school, I think people saw weakness in this and were not always kind. However, I think everyone at some point goes through some kind of mistreatment. Some more severely than others, so some people become more mentally affected by it and the damage from it can last longer and be more permanent.

Talking to other people was able to help me understand how it affected/ affects other people and draw upon more than just one interpretation. One person I had spoken to said “everyone you meet has experienced some form of bullying”. “I think I was able to get through it by having something that I really enjoy doing, a passion. I don’t think I would be in the place I am today without that”.

My research showed that bullying plays a massive part in someones life and how they think about others and themselves. I believed that it was a very worthy issue to address and to try and encourage people to think about how they can make a difference in the world by being kind.

Process

I started by choosing a poem which I had remembered to be really powerful and emotive and I saw a potential to use this to create visuals to form a new perspective. I analysed the words in the poem and started visualising ideas by sketching, listening to the poem multiple times, listening to the pace, intonation and volume change etc.

I began brainstorming themes within the problem of bullying and experimented with the following themes:

  • The juxtaposition of Love and Hate
  • Acts of Kindness
  • Social Media and Video Games
  • Power and Control

I chose to continue exploring the imbalance of power between the bully and victim and investigated different ways to visualise and tell the poets story.

I experimented with different types of mark making using art materials and different surfaces as a way to illustrate a mark left on the victim to present the permanent damage caused.

A few examples of my experimentation are shown below:

Fineliner blog 3Mark making happiness exp 1Scribble close upPinned up experiments blogimg_3131img_3245img_3271

I decided to film moving ink in order to represent the damage to the victim and to encourage people to think about the impact that they have on others and to leave a positive mark on others.

Presenting my film for University Critique

img_83981

Final Film: Leaving Your Mark

Why did you enter the Creative Conscience awards?

I began my project looking at a poem and had not specifically planned and based my project around the Creative Conscience Awards. I knew that I wanted to create something that was meaningful, powerful and able to make a change in some way. I believe that it is important to be able to use your design skills to change people’s perceptions, and inspire change for the better.

What did it feel like to win an award and come to the awards night?

I felt so proud to be among some really talented designers who had some really interesting and inspiring projects. It showed me the importance of using design skills for positive change and how powerful design is for making a difference to issues going on in the world. I think each person making even a small amount of difference goes a long way. Taking part in this competition has really made me think about and more aware of problems going on in the world.

Would you recommend it to others?

I would definitely recommend entering the Creative Conscience Awards. It is so rewarding and fulfilling to be able to see how design can help a social, ethical or sustainable cause. If you are really passionate about an issue happening in the world or something you feel needs to be changed then it is a great way to be able to connect with other people who have the same vision and mindset as you who can advise you or help you to develop further. Winning an award gives you great connections to the industry and the Creative Conscience Awards gives you support through your journey trying to make projects real and getting yourself out there into the design world.

Finishing thought

It was really motivating to work on a project driven by social change, as something that could make a difference to a problem that affects many people during their lifetime. I believe that designers have a very important and powerful role in creating positive changes, as they have the ability to influence people’s emotions or help to see ideas from a different angle. I feel very proud to have received an award in this area of design.

References:

BBC News. (2017). Cyberbullying ‘on rise’ – ChildLine – BBC News. [online] Available at: http://www.bbc.co.uk/news/education-25639839

Bullying Alliance (2017). [online] Available at: http://www.anti-bullyingalliance.org.uk/media/29570/abw_campaign_pack_2015.pdf

Pacer.org. (2017). Bullying Facts. [online] Available at: http://www.pacer.org/bullying/resources/facts.asp

How much of a threat is Artificial Intelligence to Graphic Design?

“The trend of anthropomorphizing robots is nothing more than a historical cliche – and should be avoided. “Why do we need to anthropomorphize these kinds of machines?” he asked. “Why do we need to replicate human interactions or emotions?”

– Yves Béhar

He believes that designing systems that humans can use to compliment their design work and help make their lives easier is the way to go instead of making a system that “replicates” the abilities of a human being.

In terms of design, there is no one solution to a problem. There are many different options and directions to take to come to a solution and there is no one right answer.

Artificial Intelligence systems don’t necessarily have the best solution. Human creativity is a very unique and powerful asset as the “human touch” cannot be replicated by an AI system.

There are now artificial intelligent systems that are being implemented into the world of design in the form of logo designers and web design such as The Grid or LogoJoy. They are able to take preferences set by the user by choosing images and creating a template/ design which is similar but with your content.

I found an interesting post on Creative review (link provided below) where the author tested the difference in outcomes between the AI logo program (LogoJoy) and their own human designers in-house.

Unknown-1
Designed by LogoJoy
Unknown-2
Designed by human designer, James Greenfield

 

To see the article follow the link below:

https://www.creativereview.co.uk/can-ai-design-a-better-logo-than-you/

In comparison, I would say that the top design seems quite generic and similar to lots of other logo designs that you might see. The bottom design appears much cleaner and the simplicity of it makes it look like a more professional and quality company/brand. It also comes across as having more personality and is quirky. The clever use of the lettering to create an image within the text is something that an automated/ Artificial Intelligence design program would not be able to produce on its own.

Overall, human designers are able to apply their experience and contextual knowledge to design solutions which sets designs apart from content designed from an AI system. As many AI systems work from pre-made templates, this could result in a lot of similarity between designs and subsequently designing may become less original.

As non professional designers are now able to paste their own content into a template, making logo design more accessible for the non-designer at a cheaper and quicker price. This method takes away the designer from the process and allows the customer to be able to make their own logo from an automated, generative design which uses features based on your likes of shape, colour and typeface and allows you to make the changes on screen.

One difference between the process for the client would be that they would be able to see the progress of their logo throughout all the stages which means they are more involved and feel as though they are more in control. However, it would seem that the system produces more of a generic outcome and there is less flexibility and creativity than if your logo was being created by a designer. Although the process might be longer, it could be argued that you get a more personal and carefully considered design that fits perfectly with your company and has more of a human touch.

Logojoy says that “Using artificial intelligence and advanced learning algorithms, our logo maker is able to produce designs just like a designer would. Whether you’re starting a blog or re-branding your business, our online logo design tool will make it easy for you to get a great logo.”

I decided to go through the process of creating a logo using the Logojoy website seeing how the system is able to create an outcome and how good this outcome is.

screen-shot-2017-02-16-at-13-36-20

Logojoy first asks you to choose from a selection of logo designs to identify what style you like to gain inspiration, which is fairly similar to how a designer might start. Designers begin by looking at competitors designs and inspiration for logo designs as well as looking at the creative brief from your client.

screen-shot-2017-02-16-at-13-36-36screen-shot-2017-02-16-at-13-36-50

Next, it prompted me to choose a variety of colours. In this colour selection, it also tells the user about colour theory and what connotations each colour might have, allowing them to help the user in identifying what colour they should use to convey a certain message.

screen-shot-2017-02-16-at-13-37-06

It then asks for the text content on your logo by asking for company name and slogan to create 2 different text sections using different typefaces.

screen-shot-2017-02-16-at-13-39-47

The user is then provided with the option to type in shapes or icons that they might want to feature to customise their design. When you press search it finds relevant icons which are sourced from NounProject. You are able to choose which you like best.

screen-shot-2017-02-16-at-13-43-07

You are then provided with a selection of logos that they have produced based on your preferences. They then give you the ability to click and favourite any of them. It creates mock ups on different items such as a phone or packaging to give the user an idea of how their logo would look in real life.

screen-shot-2017-02-16-at-13-44-21screen-shot-2017-02-16-at-13-44-31screen-shot-2017-02-16-at-13-44-51screen-shot-2017-02-16-at-13-44-39

If you want to make any changes to your design such as letter spacing, font size, colour or a number of other variables as shown below:

screen-shot-2017-02-16-at-13-56-22

With this service, you can create your logo for free, however to download versions of your logo in high resolution and in different formats you need to make a purchase of $65 or you can buy a basic low resolution version for $20.

 

I think that design is an area that could be more safe from Artificial Intelligence than other professions as design uses something that computer systems are not able to replicate: originality of creative flair. From the comparison between a human designed logo and logo designed by a system there was a clear difference. I believe that AI will probably have a place in design of some sort and non professional designer could make use of this as a shortcut. However, I think that to maintain the quality, originality and new approaches to design. I feel to develop and progress in design, it is important to have human designers who are able to use context and life experience.

References:

Co.Design. (2017). 10 Principles For Design In The Age Of AI. [online] Available at: https://www.fastcodesign.com/3067632/10-principles-for-design-in-the-age-of-

aiLogojoy.com. (2017). Logojoy – A logo maker for simple, beautiful logos.. [online] Available at: https://logojoy.com/

Clean Streets Process

hotel-main

The challenge

Design a series of city landscapes using a flat design style of particular locations including: a hotel, office and recycling centre for Westminster City Councils’ Clean Streets. My designs then went on to be made into an animation which was uploaded onto their YouTube channel to inform and advertise their service to their consumers.

This project was completed during my Internship at Toast Design, in 2015. I have spent 8 weeks over 2 summers working at Toast Design.

For this particular project, I was working for another designer within the agency who took my visuals and made them into an animation.

I began visualising by looking for images of existing features of hotel and office buildings to reference. Therefore, I could add features to help the audience identify the building easily.

280px-waldorf_hotel_2download

 

 

 

 

 

 

office-mainrecycling-main

I really enjoyed my experience at Toast Design and believe that it was a very valuable experience for understanding more about the processes used for real life briefs and the constraints that you need to work to to keep on brand. I was also able to learn new skills along the way such as beginning to learn to code HTML and CSS as I started to produce a portfolio website.

The final video that was produced using my visuals is shown below:

Developing Silver & Green Project

silver-and-green-rectangle-grey

Over the summer, I have decided to go through my projects and make improvements or develop upon a few. One of these is the packaging and digital solution short industry brief we completed in the beginning of second year. We were given a couple of weeks for this project and I feel as though this project could be expanded or changed to be more relevant/ successful.

Therefore, I began by thinking about what elements of the project I liked and thought were the strongest. I then chose to develop from here and think about which sort of styles would be appropriate for the existing brand. The logo and other packaging designs for their olives use a watercolour and handmade sort of style and I felt that this could be experimented with further.

Therefore, I completed some drawings and watercolours of some of the ingredients for each of the olive flavours as I felt that this could put the attention on the product and the quality of the product.

Chilli and Garlic drawingsLine drawingsLeaves drawings

Chilli and Garlic watercolour copyBasil watercolour drawings copy

Lemon watercolour

Experimentation

screen-shot-2017-02-01-at-22-42-28screen-shot-2017-02-01-at-22-42-17

I first started sketching out some ideas using the leaf shape and square box and then developed some of these ideas. During my research, I found that being able to see the product was an influential factor for enticing the consumer to purchase or consume. Therefore, I think the packaging should retain our initial idea of using windows to see into the packaging. I looked at how cut out windows could be added to the outer packaging in the shapes of the ingredients.

Silver & Green logo ideas

 

Silver & Green packaging top designs 2-01

 

Silver & Green packaging top designs 3-01

I think the opening and closing mechanism was a strong part of our packaging concept to feel more organic and special to make the product seem more treasurable.

I experimented with packaging designs using the square shaped box. Part way through, a lot of focus was put on the watercolour designs and seeing through to the olives inside became lost so I began to experiment with how this could be brought into the designs again.

New packaging designs-08New packaging designs-07New packaging designs-06New packaging designs-01

For the final packaging concept, I decided to discard the opening mechanism idea for the square box and decided to simplify the usability to be similar to existing products on the market. Therefore, I designed a wrap around sleeve to cover the round olive pot. This would also allow the potential consumer to see inside to the product which I felt was an important aspect to entice and put the focus on the fresh ingredients and quality.

Chilli sleeve design front

Chilli sleeve design back

Garlic sleeve design front

Garlic sleeve design back

Lemon sleeve design front

Lemon sleeve design back

 

Website Design

We saw that the web design for Silver & Green was not as strong and engaging as it could be so I decided to develop upon our initial website designs and implement the new styling and packaging designs to the homepage.

I decided to add bold colour to the backgrounds of the screens in halves to give the pages impact and to create a professional and high quality feel. I also felt that as the olive flavours used colour systems, it could highlight these flavours and give that “fresh” feel.

In some areas, I wanted to add contrasting colours to give a statement look and to use Silver & Green’s photography of their produce to relate back to the freshness and quality of their products.

The nav bar would remain on the top of the screen to allow users to be able to easily navigate around the site without having to scroll back up. The use of the colour underlining on the nav bar menu would help the user to be sure which page they are currently on, which would overall help with their navigation around the site.

Options are kept minimal as it needs to be a simple site where potential customers would be searching and retaining the information they need. It is not a site where people are able to buy the product.

Sketching Concepts

Nav bar sketchesTop page sketchesConcept 1 sketchConcept 2 sketch

Homepage Concepts Illustrator

Screen Shot 2017-07-26 at 21.25.09Screen Shot 2017-07-26 at 21.26.01

Footer Designs

Screen Shot 2017-07-26 at 21.26.44Screen Shot 2017-07-26 at 21.26.51Screen Shot 2017-07-26 at 21.26.59

s-g-Homes-g-Abouts-g-About-2s-g-Productss-g-Products-olivess-g-Olive-types-g-Contact