portfolio

Brief: International Citizen

Chosen pathway = Photography.

Using the medium of the Options Module of your choice complete a set of three images/items/works as a response to the theme International Citizen. You may interpret this any way you like but you must justify your work with a complete body of back-up research and development.

Present your images as a portfolio of works AND ALSO set in a graphic design format, such as a page layout, brochure, C.D. case or whatever you deem appropriate. You are strongly advised to negotiate this with your tutors.

You are required to write a proposal for your own brief within ten days of receiving this.

As I received this project, I knew in an instant I wanted to take the pathway of photography. I would have liked to try out the illustrative side of this project however, but I feel I could play more with my strengths with photography especially for this project. I intend to explore what I can do with the idea of International Citizen and think of an idea that I can put together.

My initial thoughts and ideas are to come up with 3 beautiful pictures that I could put up on walls to frame, but I want to take this idea to the next level in overlapping images and giving all different perceptions. Conscious of the time I would have to complete this project, I will need to be clear of my idea and confident to what I can realistically achieve in a month, but it is a challenge I would like to face up to.

Advertisements

Letterheads, compliment slips and business card designs.

I decided to do some research on these 3 pieces considering I need to have them as part of my final product with the logo. It is clear to say that on the majority, there is limited design and the logo is mainly the only effect added onto the white paper. Personally, I think this makes the pieces look much more professional and all of them compliment each other with the themes.

I think that the designs vary on the logo design itself. Some of the business cards have a much more decorated background on one side, but the other side is just made of text; something that the other pieces do not have. Because a business card is something that people would hope customers would keep and use, it would need to stand out against the rest but still links with the rest of the theme, and I would like to see if my logo for both my own branding and Vivienne Westwood can create some sort of pattern or decoration in this style on one side, and the other side have simple, plain text for the information.

One business card that I feel completely inspired by, is Charlie Nash’s personal design for his business card. I love how he has kept his layout simple and that you can use it on a variety of other personal objects within his own self branding, seeing a clear link throughout. I would really like to take inspiration from his design and think of something similar but different with my own design.

Ref: http://dccstudio.com/sud-identity.html

http://www.anagrama.com/portafolio/141-tabarka-studio

https://creativemarket.com/LoransDesign/331486-Corporate-Identity-(Black)

http://www.charliewnash.com/self-promotion/

Feedback on my website.

Good points:

  • Nice and simple design
  • Easy to read and look

Improvements:

  • Consider using a more professional photo
  • Contact menu can have more links like Facebook etc.
  • Maybe on the portfolio page, the pictures could go in a slideshow to show more of them
  • Spell ‘Fotography’ correctly
  • Be careful on the slogan at the top – may look like I am limiting myself to just photography?

I took on board with these comments, and I changed my photo to a single one of myself and made sure the other person wasn’t showing.

The feedback about the contact, although it would be nice to do this, I would need to set up a Facebook profile link first. Because I don’t want to have my personal Facebook linked to my website, I think it would be better to make a Facebook ‘like’ page people can click on and write on.

The third comment I wanted to do for my homepage, however there was not a setting available for this unless I perhaps upgraded.

I put Fotography because it was almost like a mini saying for the page, however because I want to keep it professional I put in the correct spelling for now.

The slogan at the top I considered taking out, but I wanted to also keep it, because it was a mini saying that I think relates a lot to me. Although it may look like I am purely interested in photography, as you look through my work you will see that I do far more than just this.

Making my website.

Starting out my website portfolio, I began with the homepage. I got a template online for free and I will use that as a baseline to form my own website. By having this as the baseline for me to work on also, I can keep roughly to the compositions. I have also decided to use Helvetica throughout my website as well, as it is a simple font to use for a website design, which is also very clean and crisp to look at.

The menu bar I wanted to keep really simple and not attract too much attention. I thought about having the selected word highlighted and have a rigid line in the shape of an arrow underneath, so you can see what page you are on at a glance. On the header also, I added my logo and put it in the corner. By putting things in the header area, it will not move no matter what page you are on – like a master page, but in a selected area.

On the footer also, I decided to add a few social icons, so people can share my work if they like the look of it. By doing this, I can hopefully gain more publicity and more people will be interested in seeing my work.

I also had a go at adding little effects such as a dropdown menu, I found it really hard at first to work, but after a few tweaking and playing around I got the idea of it. I really liked this style, because I have a lot of categories I can develop on for my portfolio work, it can categorise everything neatly and keep it all really simple.

 

I kept playing around with the homepage, because this will also show all of the images that I have produced so far. I decided on keeping my work in a neat grid format, making it easy to see and allow only the images to be the main focus. I want to keep to the theme of simplicity on my website, because I have found that simple websites appear to be the most effective.

For the pages of my portfolio, I wanted to keep the brief short and concise. I prefer having the text on the left, as the majority of people read from left to right. Keeping the image separate is also an important factor, because it doesn’t work too much against the design. I also thought about having buttons on my page such as a ‘next’ and a ‘back’, so you can go back to all of the images, or move onto the next one if you wish.

When I put it into a mobile view page, I noticed there were a few errors such as making sure that the type still fit etc, but this was an easy fix of adjusting the type slightly. I think that the layout works a lot better when everything is almost listed in the mobile site, making sure that nothing will overlap when you view it in this way.

When I look at some of my more personal pieces of work, I am unsure of what to write about them as I was not given a set brief to do this… instead, I have taken inspiration from Erik Johansson’s website in having a simple sentence to justify the picture. Because there was no particular reason in me making the image apart from to show what I am capable of, having a simple sentence is the entire page needs.

For my app page, I wanted to include the video tutorial I had used to navigate your way around so that the viewers saw the full potential of this app and to the extent I went for this project.

I also wanted to incorporate my blog into the Wix account, I wanted to keep my old blog separate to show the projects I do throughout my university course, but the blogs I will be posting on Wix are more like articles written related to more personal topics.

What to write in the portfolio page.

When writing about your work, you need to explain what the work is representing and the journey throughout. If you are designing someone else’s brand, you need to explain a brief history about it and what the brief is about.

What was the goal/point? What ideas did you get for it? What specific details did you include and why? What themes did you use?

If you included other features, be sure to explain why you introduced other features alongside with it that compliment what you have made. If the packaging were made into an animation, you would need to explain who helped you create it and what the idea behind it was about.

When you are talking about the piece of work, it has to stay precise and keep it simple. Personally, I prefer the way that Sagmeister & Walsh and Pearlfisher have described their work. What they have written is precise and to the point, only explaining the details which viewers only need to see.

Ref: http://www.pearlfisher.com/design/

http://www.sagmeisterwalsh.com/work/project/frooti/

Coding practicing.

Sites:

http://www.w3schools.com/html/default.asp

http://www.codeavengers.com

Because I had never tried coding before, I had a little look online for some free tutorials to get some relative basic understanding. Code Avengers is an excellent tutorial that takes you through the steps of coding to set up your own app. I thought this was a good site to experiment with, as it is showing how you use computer software’s to link to an app design. It also helps you to be able to use all different forms of multi media also, adding in sounds and images.

I thought I would spend an hour or so having a look at some online tutorials to help me get an understanding of the basic of using HTML in coding and setting a page up. Although I had only spent this much time doing so, I had learnt all of this and was able to understand these FEW basic codes:

<br> = break sentences

<p> = paragraph

<!doctype html> = tells the compuer you are using the latest html

<title> = this is the text that will appear on the web browser tab

<h1> = main heading 1

<h2/3/4> = subheadings etc

<sup> makes square roots of numbers (e.g.) appear small up top

<sub> similar, but at the bottom

<strong> makes the text bold

<link> links HTML documents to a CSS style sheet

HTML:

A HTML always needs a ‘!doctype title’ and ‘title’

Also, when you place an end tag, it has a / at the beginning such as </tag>

What are attributes?What are attributes? Attributes provide more information about something. For example rel = relation: this specifies the type of file it is linked to. The href = hypertext reference: this sets the file it is linked to by anchor/link tags.

I also had a look at w3Schools, which is another great example of learning coding and getting the basic understanding for your own development. I copied and pasted the coding I had used in the other site onto a practice sheet here, and everything apart from the theme came up.

This was because I needed to go on the CSS site, meaning only the colours and theme would change. I went onto a CSS site and tried it, but it didn’t work due to the file now being saved in a local file. I then experimented with the styles and colours instead on here. I changed some of the settings, but it didn’t recognise the ‘dark’ word before a colour… but it worked when I set it to a normal colour, which I found interesting. It worked on the heading colour however.

Although I could see myself spending hours playing around on both of these websites, coding is something that could take years to master. Although it does interest me to learn more, I would rather practice when I have more spare time than to make a whole website in 3 weeks from scratch.

I really liked how you have to be really specific with everything in coding. I thought by using coding it was a great sense of achievement to see what the outcome was, and that the smallest mistake could change the whole appearance of the page. With coding, you can be precise with where and how you want everything, including also sound recordings and animations, and putting them in the specific places on the page you want them to go on.

Screen Shot 2015-05-01 at 13.32.34

Screen Shot 2015-05-01 at 13.32.51Even when putting my images up on WordPress here has a title, and when you save it, the title will come up if you click on the image. The alternative text shown here is what will be shown when the image is not displayed.

Inspirational portfolio websites.

Websites nowadays have dominated paper-based portfolios. Almost every designer today has their own website, which shows off their work as well as sharing what is going on around them on one page. Even journalism has spiraled in the past few years, encouraging aspiring designers (and anyone else) to document their work and present the journey to how they came about from it, consistently developing their knowledge and skills as they show people all across the globe. I took a look at a few websites of well-known designers, as well as those still developing to look at their styles.

Screen Shot 2015-04-28 at 17.02.17

Screen Shot 2015-04-28 at 17.02.44Pentagram:

One example I looked at was Pentagram, one of the biggest design industries in the world. They are an inspiration to the majority of aspiring companies who want to develop, as well as being one of their clients, such as the New York Times and TIME magazine. The homepage is laid out entirely with a list of their work in picture format, with filters above.

Because the company has produced so much work, presenting the pieces in a neat file in certain orders of your desired choice keeps everything neat and organized. I like how they have allowed minimal colour and design on the page, allowing the work to show what they are capable of instead, keeping everything very professional.

They even have other links such as articles from/about them such as Alan Kitching’s A-Z in Creative Review and being featured in The Guardian. I really like how they have kept everything professional looking, but also interacts with the clients and viewers.

Spin:

Another example I had looked at is Spin. Spin’s own website involves a lot more colour and creativity to the design of the website itself, however it retains the neutral theme of only using gray scale colours. I noticed throughout looking that they produce on the majority prints and digital based work such as working with the identities of University of Creative Arts and Channel 4.

I noticed also, that all of the work is finalized on a digital base, which tells me again that digital is what they specialize in. it also helps to give the final product a crisp finish. The site as a whole is quite easy to navigate through, as they have fewer categories of what they do, but I especially like how they have isolated only the final image of one part of the product on the list of items, as well as showing how that product was made; whether it be print or motion based.

I liked how this site interacts with us with a journal of what they do throughout the year on the site. They stick with the theme in including photography images as the main highlight on the list with a rollover button to give more information about it, showing us what they are doing as well as designing.

Another website that reminds me of this design is: www.gavinambrose.co.uk

Ligalux:

Ligalux is a German design site that works on (the majority) prints. Although I am unsure about the background design, I feel that the idea of the pictures changing on the rollover is interesting. It is clear that they want the pictures to show the audience what work they specialize in, such as books, posters and leaflets.

Personally, I feel that as well as the background design; the font and colour scheme could have been worked on a little bit more carefully. Although they show the correct intentions, such as showing their work on the homepage and having the menu bar at the top etc. it doesn’t stand out like a portfolio website should. The pictures for example, are black and white, matching the background colour. This does not make your work stand out, it in fact is making them blend into the background and not showing its full outcome to us unless we hover over it. The images look beautiful when you hover over them, and it would work better having a plain background and coloured images, perhaps even when you hover over the image it turns into another piece of work from that project?

I like how they have set up a blog site on the website, which keeps you in the loop of what is happening currently at that time, and what they may be actively doing also, which helps to gain recognition to others.

Other examples of sites that are simple are: www.whynotassociates.com and http://www.miltonglaser.com/the-work/

Studio Cuculic:

This is one of my personal favourites in the design layout. A Croatian design company who use perspectives of their work to draw you in when you enter the website of their best/newest pieces. The pages are laid out in a very simple layout, with the menu going down to the side, with the estimated ratio of photos to writing of 80:20.

Looking at the page, they specialize in a lot of different things relating to design, whether it be digital or drawing, but I love how they put a bit of everything at the front to give you a taster of what you would be expecting if you were to use them. The characteristics of the website is very professional but it is also interactive, as they show of proudly their work. Although they have no blog on their site, you are still able to communicate them through a shown link on Facebook.

They would be able to build better communications with people however if they were to set up a journal or a blog of their journeys, inspiring people around the world of their creative talents. It is clear that the site is only used for portfolio purposes only, and to show clients what they are capable of.

Another good example of work that is more to the point is: www.nbstudio.co.uk

Design Gruppe:

Design Gruppe is another German based company. Immediately the site invited you with awards and the latest news going on around, giving the customer/client the impression that they are actively involved in projects and interacting with people around them. The pages that show their work do not appear to exaggerate anything. What is meant by this, is that the images for example are not the primary focus when you click on the button to view the project, which does not imply to the viewer that they are ultimately proud of their work, and feel that they have to explain a lot first.

It is obvious that they have built a lot of solid relationships with the awards that they have been presented and shown on the homepage, which is encouraging for the clients who are thinking of working with them, however the overall structure and design seems dated. The brown border on the sides make the website not feel like a portfolio, but a site of information instead.

A way to make this website appear much more outstanding, would possibly be to have the work presented on the very first page or at least the categories, and have the awards separate on another page, and have it as a title on the menu instead, because viewers and clients are more interested to see what they can do, instead of what awards they have won.

Segura:

This is another example of a website that has a lot of information stored on one website. It is clear that the company is a big company and that viewers and/or clients would want to see all the information at once when they first look at the homepage. The website shows a lot of work that they have done, as well as showing the relationships they have built through their news and blog pages.

I really like how they have made sure that everyone is involved in their site, and included more personal posts that would appear less relevant to design in itself, but helpful to general people. What I am finding challenging is the design layout and understanding in some cases of where I am on the page. I feel that the page almost needs to be stripped to about a quarter of the information that it includes on every page.

Because there in so much information on the page, it could look a little bit overwhelming when you want to look through what they have done. This could potentially lose customers; despite they may be a very well known company. It has been shown that minimal designs appear to be more effective, especially in design.

Another example of a website that is very informative is: www.jaketilson.com

Johnson Banks:

A great example to use type as a way of interaction. This website shows how blank space on a page is an effective way to use colour in other parts to make them stand out against anything else. Johnson banks have worked with major companies such as Virgin Atlantic, More Than and the Science Museum. The idea of breaking down the categories of their work in a paragraph on the homepage is a different way of presenting, showing a more informal design of their work.

I’m not sure if I would use the structure of the website however, because being able to only click on the words selected can get confusing, with not menu bar either. Having the page split seems like a good idea on the homepage also, but as you go through their work, it appears to be crammed into one side of the page, which could put someone off wanting to go through the whole lot. I think having pictures and text separate on a page is a better approach to take, as you would be leaving space for the person to read, but also examine the picture separately, instead of always being distracted and trying to do both.

I like how clean the website appears when you glance at it however. The font is easy to read and is not harsh to look at when you try to read it. Looking at this website, I feel that it is not a professional portfolio from a big company because of how informal and scattered certain parts are on the page. By limiting more on the homepage and having a menu bar, as well as separating more the image and text, it could give out a much more crisp look.

Other examples similar to this website are: http://www.saedmeshki.com/main.php and http://www.barnbrook.net/index.html

Pearl Fisher:

Pearl Fisher shows a lot of interaction on the homepage, which drives you straight in when you look at it from first glance. Having all of the images in the grid change in a slideshow makes you intrigued to what one is about. Working with companies such as Starbucks, Waitrose and Absolut, they neatly boast their design work in all different categories to really break down what they do.

The website itself is incredibly easy to navigate, and I love how it has broken everything down into very specific categories. The images themselves are either photography or digital based with a white background if necessary. All of the pictures also are filled with colour, bringing out the designs against the plain template of the website design. I really like how they have structured the whole theme of the website, as it also would make it easy to navigate if you were to look at it through a phone or tablet with the grid structure.

Being such a big company set in two major cities, they have a lot of events and interactivities going on constantly. They separate well all the different categories such as exhibitions and shows, articles, interviews and awards.

An example of a website that also showed good interaction is: www.hat-trickdesign.co.uk

Screen Shot 2015-04-29 at 10.31.12

Screen Shot 2015-04-29 at 10.37.40

Big Fish:

Big Fish is another UK design company that also stands out with its interaction with people, including customers mainly into keeping in touch and up to date with what they are doing. The topics on the menu are precise and direct, which makes it a lot easier to find where you would like to go and search without browsing too much of the web.

The informality of the website makes it appear a lot more fun to go through and read up on what they do. When looking at their work, they lay out the text mainly on the left and have a slideshow or a selection of images neatly presented on the right with a background that suits the object/scene, still giving it that professional look to it.

It is clear that the company targets people who appear quite light-hearted and prefer to actively get involved with them. I really like how clear and precise this site is, and that I can relate quite closely to this website with its informal but professional character to the website.

Stefan Sagmeister:

Sagmeisters’ website is a website which everyone would take inspiration from. His homepage shows what appears to be a constant video of the studio and live footage of what they are all doing at this current moment in time that shows still images every minute. His menu bar is discreet but drops down to the categories that you may wish to look for. The logo is placed in the top left, allowing you to return to the homepage by clicking on it also.

The homepage is especially interesting, and looks as if they had stuck down the ‘buttons’ on their actual floor, and adjusted the settings so that when your mouse hovers over that area, it will direct you to that place labeled, which is also clever because objects overlay it and you do not needs to constantly edit one photo to get this effect, making it much more interesting to look at.

The neutral layout of the website makes it really easy to navigate, with precise links without revealing too much detailed information. The portfolio side of their work is also laid out in a grid form, allowing you to look at the images and decide what one may relate to you or the client to see what they do. I really like the slideshow they produce also, revealing only a few images of what they have done from that project.

To make a website always this interactive with viewers, it takes a lot of time and commitment, which is reflected from this. The whole layout and idea of this website showing what they are doing is an extremely clever idea to keep the viewer coming back and seeing where they are or what they could be up to next. It is obvious that this website is for clients and customers to view, and is very open to opinions and answers. Looking through you can see blogs they have written, and extended work that they have volunteered to do and work with inspiring designers such as Erik Johansson, which shows they are willing to work with people outside of the studio.

Another example of a fun interactive blog is http://odedezer.com/portfolio-category/work/ and one to give you some inspirational thoughts, http://erikjohanssonphoto.com

Charlotte Tang:

Charlotte’s website is a website that I have found some inspiration from in the past with her thoughts and layout of her website. Her website represents a much more personal portfolio based website, but still has the same general understanding with the concept and layout of the majority of portfolios that I have seen. Her homepage is the page of her work laid out in grids but in the shapes of circles instead of boxes. Her limited use of colour also makes her portfolio quite interesting, showing the colour of her work as you hover over the image before you click on the link.

Her portfolio is precise and easy to view. Her blog is very personal and includes stories that are not just all about design, but about her lifestyle also, which invites people in to view her lifestyle and interact with what she does outside of purely designing also.

The issue with her blog is it is hard to get back to her portfolio website as there is no direct link, which would put people off wanting to keep looking if they cannot redirect where they were originally.

Another website portfolio I have found to be quite personal also is http://elupton.com/designer/

Ben Hulse:

Ben Hulse’s website is an excellent example of a personal portfolio that purely shows what he is capable of doing. Looking through what he has got there are only a few categories to separate what he does for people to see, which makes it a lot easier to navigate. Having a website with not a huge amount of extended information, he has kept everything concise and clean.

Ben’s portfolio I feel I can relate the most to when I think of my website. Because I will not have a huge amount on there to start with, I would need my website to be crisp and simple, as well as to the point. Ben has successfully put his website together to show exactly this to viewers and clients, so they can see purely what he does as design work. I have noticed in the majority of portfolio blogs that the description is also concise, and works better having the text separate from the image, allowing you to focus on reading or looking at the attention to detail.

Another website that I find inspiring with their portfolio, but shows a lot of work that is ‘played’ with. Gerren Lamson’s work shows a much more professional approach to his work, showing pieces that he has produced outside of work hours to help inspire us. I really like how he has made his work look professional, but have an informal atmosphere to his work by the way that he writes about his work; as if he was telling us the journey throughout than just what the final product is about.


The main designers’ websites that have inspired me the most personally are Studio Cuculic, Pearl Fisher, Sagmeister and Ben Hulse. All of their styles of websites are clean, neutral and precise, enhancing colour only in the grid of the portfolio work. All of their websites compliment the target audience they are aiming for, inspiring and generating fresh ideas to clients and viewers.

I think having a blog on the website is also a good way to allow people see the details of your work and the thought processes throughout. I could also write articles to put on my blog also to show what I am interested in outside the design world. Their websites contain relevant information on every page that is necessary for people to see, keeping everything the same in the category you are looking at. The themes for all of the websites involve simple fonts, an easy logo and a menu bar that is subtle. I have also noticed that the description of the work is detailed but precise. I think that having a brief description of the journey you came to making the final piece, depending on how extensive the project was and what was included within it.

What I noticed that appeared to be missing in a lot of these websites was a button that someone was able to click if they were hard from hearing or visually impaired. Although it may be difficult to be able to create this, I would like to look more into detail about the best possible solutions to resolve this with my design.