Month: March 2017

Informal Portfolio Presentation

The process of gathering a body of work that best shows the work I have produced to date was a real exercise in culling. I pulled together all the work that I thought was good enough to pull into a shortlist so that I could critically asses it and get some external feedback and begin the process of narrowing it down into a final selection for a portfolio that I would be genuinely happy to show to an employer.

For this process we were given guidelines with which to asses our selections. These headings and my reasoning are listed below, along with the shortlist of work for the informal interview.

Aims

The aim of this exercise is to reduce my body of work to a portfolio that shows only the work that best represents me in ability, approach and personality. Removing from my portfolio any work that takes away from the highest standard I can present.

This final portfolio will be used to apply for work and should cover a broad range of both my work and interests while communication my personality and work ethic.

Format – Traditional/Online

I think it’s important to have a physical portfolio that can be presented and examined for a number of reasons. When looking at a body of work, there is only so much a visual representation can communicate, your work is always subject to the medium on which it’s being viewed and a poor quality display can take the impact from your work. Having a physical portfolio overcomes this issue while also giving people a chance to handle the work, ask questions and maybe even get them out of their seat to view it. Getting people out of their seat breaks the spell of the usual interview atmosphere giving you an opportunity to communicate in a more natural way.

That being said I will be focusing on creating a digital portfolio as much as a physical one. The modern digital age means you cannot rule out the large number of people who want to view or share your work digitally. You also need to be able to show that you are comfortable working digitally, to ignore the digital world is to take the chance of being over looked.

Breadth of Work

In my final portfolio I intend to show a representation of the full breadth of my work from both my time in college and from my work as a photographer before. My experience in the field of photography has without doubt influenced my design choices and I continue to use it as a tool to both create and inspire my current work.

I also want to show the areas in which I am interested in working, so from the photographic to branding, video and publication design etc.

Be Selective

I had initially compiled a body of work that covered everything I was eager to show, however, this included a lot of work that brought the overall standard down. I decided to remove the first layer of low level work narrowing it down to the selection in the post below. The body of work that was left will be culled once again to make my final portfolio.

Newness

Almost all of my work in the field of design has been created within the past 2 years, that being said I feel there is a big difference in the work from last year to the work done this year.

It’s goes without saying that my photographic work will be selected from the past 10 years or so but the design work such as poster or publication design etc will mostly be from the past 12-18 months.

Context for Work

On some of my portfolio work I will be attempting to place it in the context of either the brief or the project it was designed for. This will attempt to show how the work will be or has been used.

Order

I will be organising my portfolio according to the work that I am most passionate about. I feel this is putting my best foot forward in terms of both physical work and also in terms of my own personality and in how I communicate these qualities in an interview. I will however, most likely finish my portfolio with my photographic work as a way of emphasizing how it under pins and informs my design decisions.

Process – Case Studies

It is important to include at least 1 or 2 examples of how I put a piece of work together and will be including this in my portfolio. The process of how you come to your design decisions can inform an employer on how you approach most tasks.

Personal Projects

This will be a tough topic to communicate as I haven’t taken too much time for personal projects over the past 2 years. However, this may be just the way I am viewing things and there is sure to be work that I do as a form of playing that I didn’t previously consider to be work.

Below is the body of work I compiled for the informal interview and feedback session.

Portrait

 

 

Commercial

 

 

 

Poster

 

 

 

Branding

 

 

 

 

Publication

 

 

 

 

 

 

Typography

 

 

 

Motion Graphics

 

Packaging

 

 

 

 

Illustration

 

 

Personal Projects

Skerries 100

Curley Kale

MSS Recruitment & HR

Career Metrics

Dublin Fire Brigade

 

Advertisements

Interactive Media Web Authoring Part 3 of 3 (Responsive WordPress Site)

This is the final stage on the module Interactive Media Web Authoring  and charts the design of the website http://studio-gra.esy.es/

For this project I will be describing the process of designing & building a WordPress website. This website is to have at least 5 pages and include a gallery/slideshow of work from my portfolio. It will also become the primary presentation of my design work for potential employers.

Below I will lay out my research on other sites & some theory on design approaches such as colour theory & menu layout.

I will then show my early thoughts on layout design & features of the finished site and while they may not fully represent my completed site they will have informed my choices for each stage along the way.

I will explain my design choices both with a view to my own personal preferences, my target audience and also usability on mobile platforms.

Lastly I will conduct a critique of the website, stating issues I found with both the design of the finished site and also the usability of WordPress as a platform versus sites designed with HTML editors.

 

RESEARCH

I had a look at a number of sites that I thought best showed the style of design that I like best, namely, as clean & ordered as possible, almost minimalist. These include the following:

http://www.gregormcguckin.com/ This site is very WordPress in it’s appearance but is made using a HTML editor. It has a very stylish look due to both the muted colour palette used and also the limited amount of text & other elements used. It’s a very simple but very effective site.

site3site2site1

 

 

 

 

 

 

This site here has a lot of elements that are in the minimalist style which I have always liked. A lot of the effects are achieved using Javascript too which we covered in this module.

site4

 

site6

 

The work of the New York based photographer Satoshi has been a favorite of mine perhaps since I took up the study of photography and his website probably embodies everything I enjoy & aspire to in design. It mirrors his work in it’s simplicity and minimalism, it’s clean, easy to navigate and it only has some of his best work on display. His earlier works of minimalist still life images will probably remain in my list of favorite works of all. This site is just a straight forward display of his work both in style & content, a small Bio and contact details.

site5

As a portfolio site, I intend mine to have sufficient information for visitors to understand what services I am offering and explaining where I have come from, but in a way that keeps the design clean and well spaced and offers the information in small enough packets to be able to read quickly while on the move.

Unfortunately, as a designer, I do not yet feel I have the track record to be able to present a website like Satoshi above where he has a lot of history. He doesn’t need a lot of information about who he is or what he does, he is simply Satoshi. Ideally I would prefer to design such a minimal site but feel my brand has to be developed first.

 

Menu

When deciding on the menu, I decided to place it to the top right which is where the majority of users expect to find it. In my research have only found 1 or 2 instances of it being on the left. I also placed the Home link to the left of the menu & the Blog to the right. So the order being…

Home – About – Work With Us – Portfolio – Contact – Grá Blog

However, through my research I have found a number of discussions & studies suggesting that visitors to a site remember for longest those items on the left end & right end of a menu. This suggests placing the most important links, Home & Contact, on either end. (Unless of course I considered the Blog to be an important link). These studies can be found here.

http://uxpajournal.org/examining-the-order-effect-of-website-navigation-menus-with-eye-tracking/

menu-research-6menu-research-4

 

 

 

 

 

These studies aside, through my own observations I found that very few of the sites I visited either had these links on each end of their menu, or even had a menu at all. I did decide to change my menu to have the Contact link at the far right but it does highlight a change in trend towards a much more minimalist look where even on a full website the menu is reduced to an icon. Conversely there are a still a lot of sites out there that have a very confusing menu layout or even more than one menu, as I have shown in the images below.

Here are some of the sites I reviewed.

 

This slideshow requires JavaScript.

 

Deciding on the colour palette for my site was relatively easy as I had conducted a lot of research into colour theory & psychology for my dissertation and had already decided upon a colour palette for my Brand Identity Module. The predominant colours being Orange, Cyan & Black.

Orange, being close to red gives a sense of heightened awareness & energy, a sense of fun & enthusiasm. It’s not the Red of danger, warning or stop.

Cyan or Blue, gives a sense of loyalty, competence, friendliness, trustworthiness and calm.

Black give a sense of professionalism,  authority, class & exclusivity.

So in designing my pages I used a combination of the orange & cyan in both the panels, links & buttons. This also complimented the branding on my site.

Button design is something I also had a look at in terms of the colour used. Again there are a lot of opinions on this subject as to which colour CTA button will give you a boost in conversions etc. Here is an example of one of those studies. And here also.

DESIGN

Early Site Map
Early Site Map
Site wireframes

Site wireframes.

To begin, we created a WordPress.org account which we installed on our Hostinger site as set up in Part 2 of this module. After exploring the options for a choice of theme it was decided to use the Vantage theme, before customizing it’s style & layout features.

I chose a template for my homepage & removed most elements from it, leaving a title image, 2 colour panels with introductory text, and a section about who we are.

I removed most of the extra padding around the top menu panel as it was very clunky lookin, I added my logo to it which left just it on the left & the main menu on the right.

I removed the standard footer content from the pages also and replaced it with 4 elements. Blog post list, Social media links, a pages list & a simple quote. There is a trend of placing a companies contact details in the footer rather than in the top menu but I decided against this & kept with a traditional contact page.

I then added the list of pages to my menu & made a list for each one of the elements & text I would need to populate them. This made it easier for me to pull together the content I needed to gather & found it a simple matter to construct each page from this plan.

I added a blog to the site as I find this a much more convenient way to post content on social media. When you can only post 75 odd characters on the likes of Twitter and Facebook isn’t my preferred medium, it is much easier to compose a blog post with exactly what you want to say and include images & other rich content and post a link to that on what ever social media channel you like. It also drives people to the website.

The contact page was customised from a template and has a map, contact information & link, and also a plugin contact form from Live Site This is a cute little plugin that collects contact form information and collates it in a dashboard setup. It also allows you to place a floating call to action button on the full & mobile site which will allow people to ask for a call back or even begin an instant chat. However, when I tested this on a mobile device it took up quite a bit of space & attention and took away from the clean look I was aiming for with the site so I disabled this option.

 

Through further research I was able to find the method for adding a Parallax effect into my site. I used this on both the Home page and the Work With Us page. I feel it adds an extra dynamic to a site though I will probably remove one of them as I don’t like to over use an effect. I found the information Here.

 

DESIGN ISSUES

I wanted to create a uniform look across the website, however, with all the options available to you in each widget, tabs, master page layouts etc, it was easy to get confused and perhaps miss a section that utilised a different font family than the rest of the website. Through some research I managed to find a string of code that would let you define a global font choice. I placed this code in the custom CSS panel & was able to choose the font I wanted to run throughout the whole website. I found the code here.

I found it very frustrating that unlike building a website through CSS & HTML it wasn’t easy at all to make simple changes by using code. For example, on some of the widgets if I wanted to float an element to the center of the box I would have normally used a small piece of code but with WordPress I was unable to find an intuitive solution. I tried placing a widget which allowed me to justify the text to the left but this forced me to use a separate widget to place the icons on. While this looked great on the pc, when I tested them on a mobile device the icons were ordered together & the text separate. So on the phone you would see 3 icons on top of each other followed by 3 paragraphs, then another 3 icons followed by 3 paragraphs. I decided to go back to the original design where the text was center justified, it’s not a huge amount of text so should not be too difficult to read.

 

CRITICAL REVIEW

Overall I am reasonably pleased by the look and flow of the site. The blog integrates nicely with the website and because the theme is the same it gives a unified feel.

I feel there are some areas that could have been improved by using a platform that allows more use of HTML & CSS. For instance, the ability to justify text is really easy in some widgets but impossible in others.

 

 

 

Interactive Media Web Authoring Part 2 of 3 (Mobile App)

Part two of this module looks at taking the mini website created in part 1 of this module and using it as a basis for creating a Mobile Portfolio App for use on Android devices. This App will be designed to display some of my work & will include a call to action button leading to the final portfolio site built using WordPress in part 3, image gallery & links to social media.

This application was initially designed using Notepad++ with html & Javascript to create the responsive layout & gallery. Then with the help of the Adobe PhoneGap and using a combination of Node.js & other programs the code for the site was converted into a platform for the web app.

RESEARCH

I found more information on some of the software here, https://nodejs.org/en/ Node.js is an incredibly sophisticated & complicated software but enables you to build multiple platforms upon which modern mobile app’s are based.

I also had a look at some of the more common applications that we use to asses design trends. riseWhat I found was pretty obvious in that the most user friendly app’s were the ones that kept the design uncomplicated & easy to use. Here are some examples. Dribble   and Alarm Clock or the screenshot of Rise shown here.

 

In developing the app I was much more aware of the need to have all the elements positioned correctly so they would collapse in the correct order, and also highly aware of having content optomised correctly for ease of viewing & loading. For instance, app1all images were sized at 250px square for each of the thumbnail images otherwise they would push the grid layout of the gallery out of sequence, an each of the larger images were sized so they would all measure 900px on the longest edge so when viewed in the slideshow all of the images would be visible & the slideshow would have a consistent look. The low file size also kept the response time down to a minimum.

 

 

Once the design of the app was complete it was uploaded to the Adobe PhoneGap server phonegapwhere it was converted to an app. Adobe PhoneGap utilises Node.js as well as other scripts to create the platform recognisable by the Android & Apple platforms.

Once generated I was able to download the app & install it on my phone to test the various links & pages. I was also looking to make sure that all the elements loaded without delay & that everything was as responsive as designed.

With some further research we were able to discover ways of naming the app & replacing the generic icon on my home screen with my own branded icon. This was achieved through the use of a couple of different bits of code. Firstly, I uploaded a Config file containing the app name and by uploading icons sized for 4 different devices. These were saved in the root folder of the app that was reloaded to Adobe PhoneGap, the result was an app with my own naming & branding that could be downloaded directly from my website or if I had a key to use Googles developer tools it could be made available on the Google Play.

I did try uploading the App to a post or page on my WordPress site and also Behance, but the .Apk format was not allowed by these sites.  Here is some useful information on releasing an app through the Android Studio page.

Here is some information on Signing your app for the Google Play Store.

 

 

 

Interactive Media Web Authoring Part 1 of 3 (Simple Website)

This is the first of 3 posts charting my progress through the module Interactive Media Web Authoring and will focus on the development of a basic website using NotePad++ to construct the site.

RESEARCH

In planning this site I looked at a number of collections of portfolio sites. Of them all I probably found the most useful information on what makes a good basic portfolio site here. Some of the most common advice includes being visually well designed, only a selection of the designers work and have contact information easily available.

This website from a former student caught my attention for it’s simplicity & it’s style. It’s a great looking site that looks like it was made with WordPress, however while it seems to have a lot of the same styling it does not use WordPress. Great site though. http://www.gregormcguckin.com/

This site here has a lot of elements that are in the minamilist style which I have always liked. A lot of the effects are achieved using Javascript too which we covered in this module.

The work of the New York based photographer Satoshi has been a favorite of mine perhaps since I took up the study of photography and his website probably embodies everything I enjoy & aspire to in design. It mirrors his work in it’s simplicity and minimalism, it’s clean & bright, easy to navigate and it only has some of his best work on display. His earlier works of minimalist still life images will probably remain in my list of favorite works of all.

Part one of this module is to create a simple portfolio website to showcase my work online. We basic-html-1used a basic template and created the html code to lay each page out as desired. The first look at html dealt with laying out page structure into boxes in which we placed our content be it text or image.

These boxes of content are designed with the ability to float or respond in a manor specified by the html code. basic-html-1b

 

For instance, when the page is viewed on different devices the content will respond accordingly. So on a pc, the page would look as above in example 1, but when viewed on a mobile device all the content will resize & even stack on top of each other as specified by the html and look like the example 1b.

 

Next we looked at Java script & it’s uses within the website. Javascript can change the state or style of an element or even change the function of html as described in here in W3Schools

We used java script for a number of uses but started basic-html-2off by changing the size of text (Example right) , then by introducing a message box when arriving at the page before revealing the full page (Example Below) basic-html-3.

 

 

 

We then used javascript to construct a slideshow to showcase some of our work and placed it on basic-html-7a page within the new website. It enabled me to construct a gallery in a grid style that would enlarge when cliched on. Within the slideshow you can move from image to image with each one displaying an image name.

Here are some other examples of good uses of Javascript. This one is probably my favourite…by a mile.

I was able to style the website with my own branding, colour palette & Logo marks which were developed in the Advanced Typographic Design module. I used a minimum amount of branding as is recommended in my brand guidelines ( gra-brand-guidelines-march-2017) but did place a logo mark in the bottom right of each page & also a Favicon in the tab of each page.

This slideshow requires JavaScript.

Some of the issues I encountered along the way included getting the social media buttons to place where I wanted them. I wanted to float them to the right hand side of the footer but they insisted on sitting more to the centre. Also, when I tested the site on a mobile device they did not stack up evenly. Also, my brand mark which floated to the left was not sitting flush with the social media icons which gave the footer a very uneven & messy look. I managed to get it all good in the end though. The site was uploaded to Hostinger where I was able to set up a free hosting account and the website can now be found here.