EGRD3014: Independent Practice Portfolio Submission

INTRODUCTION

This portfolio is designed to display all of my independent work and development throughout the first semester of year 3 of the BA (Hons) Graphic Design course at the University for the Creative Arts, Epsom.

It is designed to flow naturally as a narrative throughout the duration of the semester and surrounding months, however there are many areas of overlap; particularly within my work about ‘That Design’ a large self-directed brief that is covered heavily within this portfolio. I aim to display my abilities as a designer through my own individual learning and self-direction with the context of my independent practice. I have always been the sort of person who is able to work well in all kinds of scenarios including individually as well as within a group, but I do feel that I am particularly strong in driving myself towards my own set goals and objectives. I’m very committed to design work and am constantly thinking about the way that things work or the way that they have been produced and displayed. Through reading this portfolio and viewing the work within, you should be able to obtain a clear picture of my characteristics as a graphic designer.

There are five main projects within this portfolio as detailed below:

Who Am I? - Presentation about my design beliefs and current work.Creativity with Precision - Dogme ‘95 video production about website coding.That Design - An online graphic design collective start-up.Sinéad Birmingham Online Portfolio - Website build and development to display her portfolio. Thinking Through Doing - The process of a cyclical action research method towards my independent work that eventually leads to a proposal for my final major project, next semester.

The projects listed above collectively lead towards my eventual proposal for my final major project next semester which is located at the end of this portfolio. I have also included an end evaluation as well as ongoing evaluation throughout each of the projects individually.

WHOAM I?

For the introductory presentation at the start of the First semester for the Third Year, I wanted to create a visual movement of imagery instead of creating a Keynote presentation with slides. I thought about the effect of creating a path of images that I would navigate around to show some principle of who I am and what I have been working on recently whilst narrating.

I tend to describe myself as a visual person, who notices the little details in life. Such as small fittings on objects, the way things work and how I always look up when walking into a room. I have a passion for grids and love to keep things aligned and see everything as a design opportunity. Particular angles that I like to see either naturally formed or personally positioned are 30º 45º and 90º as I think it shows a sense of uniform and clarity about itself.

This indicates the direction of the visual movement of imagery for my presentation.

In recent months, I have been getting to grips with HTML and CSS within web development. Over the summer I created thatdesign.co.uk and also worked in partnership with Sinéad Birmingham to create sineadbirmingham.com, both of which are featured within this portfolio. Web design is something that I have grown rather passionately towards and with each project I see myself working closer to becoming more of a web designer.

Upon graduating from University, I would like to work in a multidisciplinary design studio where I can learn about industry techniques and work across all sorts of media, including: print, web, digital, photography, video and animation.

“I tend to describe myself as a visual person”

From working within the industry, it would be a dream to someday open my own design studio using the knowledge that I have gained over previous years to work within design for some internationally renowned companies. It’s a dream that I’ve had for quite a while and I think I have quite a committed personality and believe that as long as I keep it within my focus then there’s more of a possibility that it could happen.

DOGME ‘95

VIDEOWhen tasked with creating a Dogme Video, I chose to work on displaying my independent practice that revolves around web design and development. I wanted to work on a video that would display the methods that I use to code websites and the environment that I choose to work within. I Knew that a 3 minute video just showing some code appearing on the screen would most likely lose the audience’s attention so I drew out some storyboards of ideas that would help to keep the curiosity of the audience at a high level. I was also conscious of the select Dogme rules and additional rules that had been laid out and worked closely within them to structure the short film.

To the right, I have listed the selected Dogme rules to limit myself to.

The Selected Dogme Rules

Filming must be done on location. Props and sets must not be brought in. If a particular prop is necessary for the story, a location must be chosen where this prop is to be found.

The sound must never be produced apart from the images or vice versa. Music must not be used unless it occurs within the scene being filmed, i.e., diegetic.

The camera must be a hand-held camera. Any movement or immobility attainable in the hand is permitted. The film must not take place where the camera is standing; filming must take place where the action takes place.

The film must be in colour. Special lighting is not acceptable (if there is too little light for exposure the scene must be cut or a single lamp be attached to the camera).

Optical work and filters are forbidden.

The film must not contain superficial action (murders, weapons, etc. must not occur.)

Temporal and geographical alienation are forbidden (that is to say that the film takes place here and now).

Genre movies are not acceptable.

Additional Rules

The video must be uploaded digitally to Vimeo or YouTube and then posted onto the blog.

The video must be exactly 3 minutes in length.

The work must have a title and communicate a coherent subject or concept.

Left: My initial ideas for a theme for the video.

Storyboarding

To the left is a scanned set of initial storyboard sketches that detail some of the shots and film techniques that I planned to use prior to filming. Film is not something that I have a great amount of experience with, but is definitely one of the biggest sources of my inspiration, however I do have quite a lot of experience within photography so I was interested to see how the two would compare side by side.

The scenes that I had produced in my storyboards were aimed to be quite fast paced with a fair amount of cuts to keep the audience engaged over the 3 minute duration. I wanted to make something that was quite stylistic in the way that it looked and the camera angles that I chose to work with. I’m a big fan of the work of Martin Scorsese, David Fincher and Quentin Tarantino for the way they compose their shots and in particular the stylistic approach that Scorsese has when switching camera angles in close-up pieces of film. The style of switching between very close to wide angle shots was an underlying factor to the style of video that I was looking to produce such as the switches between closely cropped facial shots to footage of the room.

It became apparent fairly early on that I would need to be in the video itself as the narrative displays the way in which I work to code websites. This meant that I would need to either recruit someone to help with the filming or break the third Dogme rule that states that the film must produced from a hand-held camera and use equipment such as a tripod to get footage.

“I’m a big fan of the work of Martin Scorsese, David Fincher and Quentin Tarantino”

Stills from Video Draft 1

The images to the left are screenshots of all the camera angles used throughout the duration of my first draft of the video that lasted the full 3 minutes. By allowing myself time to get a fully edited draft in place before making a fully finished piece, it made me realise what was and was not working about my chosen idea.

Firstly, due to the time of year, the film progressively gets darker throughout the duration as it was shot at around 6pm just as the sun began to set. To me this was clearly noticeable as it appeared to get dark very quickly within the 3 minutes (film time was about an hour and a half) and made for quite a dark looking style given the fact that the Dogme rules state that no additional lighting could be brought into the scene.

“it made me realise what was and was not working about my chosen idea”

I originally shot the film with music playing over the top from my speakers as a way of bypassing rule two; but when it came to editing it was easier to just add the music over the top. I wasn’t fully happy with how it sounded and didn’t feel as though the whole piece was actually mine. I found myself trying to fit the video to the music which was not the task at hand as the video itself was the main point of focus.

Overall, I felt as though the idea was only half working as it didn’t really seem to engage the audience (including myself) as well as I’d hoped. The way for me to improve it as a whole would be to get plenty more camera angles and have much faster cuts in between them, rather than the lengthy typing sequences. I also felt as though the close-ups of the face and hands were quite successful in showing the concentration needed for web development.

After the first draft, I went back to creating some storyboards to improve the flow and context of the film, I have displayed the newer ideas and notes on the following pages.

You can see the first draft video at the link below.

http://vimeo.com/33246519

Above: storyboard ideas for alternate narratives for my 3 minute film.

Revisions

Having completed the first draft of my video, I then felt that I needed to go back to my sketchbook in order to improve on my 3 minute submission. I looked into other narratives that I could film such as a piece based solely on items that are angled at 90º 45º and 30º and the way in which I interact with them. I wanted to have a style that would not be obvious at the start as to why I was filming these particular angles and then to reveal it as the movie progressed but I turned this idea down as I didn’t want to suggest that audience couldn’t work it out for themselves.

“I needed to go back to my sketchbook in order to improve”

I also thought about filming some of the closest items that I live and work with as a way of defining what my character is all about, such as my love of maps and geography but this idea would also be unsuccessful as it became too personal as a theme rather than about the essence of my independent practice work.

Below Left: extended storyboard ideas for my 3 minute film.Below: Shot list for the new version of the film.

I settled back on the narrative for my first draft with a video about the creation of a website. I took into account all the problems with the first draft and then set to improve it with differences such as: daylight rather than evening darkness, faster cuts at the end of words typed, no music and also showing a site being built rather than just a page with some information.

I made some more storyboards to help visualise the newer look that I was after, as well as a shot list to make sure that I captured everything that I wanted to show within the film. This definitely helped to make me use the time much more productively and I was able to generate much stronger ideas to work with.

“I loved the way the light refracted through the bubbles in the glass.”

REFILM

Stills from the Finished Video

Creativity with Precision

For the second attempt at filming and editing, I managed to get about 3 times as much footage and spent twice as long filming as I tried to make each shot as meaningful as the next. I decided that I would break the third Dogme rule and use a tripod rather than having someone’s assistance to film it hand-held. This meant that I could compose each shot exactly as I wished and set up the camera and focus perfectly.

“I definitely feel this version is a lot more complete”

In the end, I’m glad I chose to film this way as I feel that the video benefits greatly from the extra time I could spend perfecting each shot. Learning from quite a few points on the last attempt such as the time of day to film and the speed at which cuts needed to be made, I definitely feel this version is a lot more complete and well-

polished. I have also removed the music from this version as it didn’t seem to have a place in the overall feel of the video. In the previous video, I felt that the close-ups and more obscure camera angles were the most successful which is why I have included a lot more for this version. I think that the opening shot (inside the fridge) and the top-down view of the keyboard are the strongest looking visuals along with the pouring of the drink as I loved the way the light refracted through the bubbles in the glass.

You can see the final video with the link below.

http://vimeo.com/30831070

Technical Details

For the filming, I used a Canon EOS 60D that had a Canon TS E Tilt-shift 24mm f3.5L Lens mounted on it. The whole camera rig was attached to a Manfrotto 190XProB Tripod with Manfrotto Pan/Tilt head. The whole footage was imported and organised within Aperture 3 and then edited in Final Cut Express 4.

From the very beginning of May earlier this year, I started to learn the basics of web design with HTML and CSS. I had experience making websites using Adobe Flash at a basic-intermediate level but I had always wanted to learn how to properly code a website rather than make it using a visual based application such as Flash or Dreamweaver. After attending just one workshop on HTML and CSS methods, I was hooked. I only needed to know the basic principles and from there I could learn as I went along with building particular pages. I found that I learnt most from internet resources such as forums and tutorials after countless Google searches related to different elements within web development. This method of self-initiated learning has been extremely useful in my own personal development but can sometimes be very frustrating to not be able to get an answer from someone with me in the room for an issue at hand. Because of this, I have dedicated myself to consistently working with the web in order to learn as much as I can whilst I am still in education and whilst I have the time to work on my own projects. A few months ago, I would have shied away from web design as I didn’t feel I knew very much about the technicalities of it, but since then, I’ve developed like a storm and I am totally enthusiastic about web development playing a big part in my future career.

For a while I was a little reluctant to jump straight into the web side of design as I still wanted to focus mainly on the production of products for print. However, over the past few months I have begun embracing web design as a main part of my practice and will be putting a massive amount of effort into learning new technologies over the coming year. I’m not ruling out printed media altogether, I’m just focussing myself to one area of design as a means of developing my skills for my portfolio and to increase my employability for my future career.

“This method of self-initiated learning has been extremely useful”

The information graphics on the page to the right show a visualisation of two aspects towards my web development. The first shows how much I have adapted to web design between the months of May and December 2011, categorised into two areas; enthusiasm and knowledge. This is because I have always appreciated good web design even though I haven’t necessarily had the knowledge to be able to understand how it was built. I feel the two categories need to be listed to show how my passion has grown over such a small amount of time. From the very start, my knowledge was extremely basic but I can definitely say that I have been able to steadily improve this over the space of a few months.

The second graphic shows a timeline of how much I have learnt about a few different technologies used within the web. I have also included some

WEBDEV.

predictions of what I would like to learn next and when I think I will be able to dedicate some quality time towards improving my skills. I have rated my skills as either: basic, intermediate, confident or advanced. I am classing my skills as confident when I feel comfortable that I could work on a commissioned brief for a client using these particular skills. The other skill levels are pretty straight forwardly labelled.

HTML and CSS have been the most developed areas as they are the fundamental basics towards creating websites. The HTML allows me to add the content and the CSS is a way of styling how it will look. I have been staying up to date with CSS3, the latest version of CSS as I know that I will need to have a great understanding of this for my future career whether I am designing websites or designing for websites. JavaScript is a method of writing scripts that complete automated tasks for the end user. This can be a simple element such as an automatic smooth scrolling web page, or it may be a complex set of instructions that gather certain data about the viewer of the web page and then visualise it onscreen. I am hoping to start learning this in January and predict that I will be able to grasp onto the concept fairly easily based on my previous experiences with HTML and CSS but I know that it will take a lot longer to become advanced in skill.

By applying this method of self-initiated learning I should be able to show that I can be independent within my progression of skills and also increase my portfolio to better my chances of employment.

In April this year, I had the idea of creating a Graphic Design collective between Sinéad Birmingham, James Martin, Russell Beswick and Myself as a way of promoting ourselves as designers and setting us up for early exposure into the industry as well as using the website as a way of building up my web design skill set. I wanted to make something that would link us all together as a way of supporting each other with a large portfolio of work and also having a consistently updated blog at the core.

The main driving force behind my idea was that if four people were to contribute to and promote one location collectively, then it would end up more successful than if only one person was running it. I believe that having four people located at one main point of contact will eventually become a benefit to each of us individually as anyone who discovers one of us will subsequently discover all four of us. The others agreed on this strategy and so, That Design was born.

“I wanted to make something that would link us all together”

In the first few talks of creating a collective, the idea was received well and we were all excited to start something, but then talk died down and it was as if the project had failed before it had even started. In the beginning of July, I started to create some sketches and designs for the site before I made an initial start at building it using HTML and CSS. I’ve spent in total over 200 hours designing and developing the site over a period of 4-5 months including a redesign for the official launch on November 11.

The blogs are built using the WordPress MultiUser (WPMU) content management system and use a system of syndication between the four blogs to link up to one main blog. Each post that is published, automatically sends a tweet with a link to the blog post from the user account @thatdesign to our list of followers on Twitter.

I chose to work with WordPress over other blogging systems such as Tumblr or Blogger because of the greater amount of developmental control and the higher status of professionalism that it embodies as well as the great benefit of WordPress MultiUser which allows administration of multiple blogs from one account and one MySQL database. To the right are some initial sketches that I had for the layout of the website as a whole.

Later developments simplified to include more imagery and larger typography across each page in a uniform style.

Initial developments for the site included working with a dynamic grid that would change depending on the content.

This was the original design for the home page. I decided to include a rather large image as a way of not showing too much text on first encounter with the site in order to draw the reader in. I also decreased the size of the heading text that says “Hello, Everyone...” as I felt that it was too large when viewed on smaller screens with little space around the edges of the site.

Above: The original HTML file for the home page of That Design.Left: 128/435 lines of the main CSS file.

CODAI have been using the application Coda from Panic to handle everything from coding my websites to uploading the files to the server over FTP. It’s been extremely useful as a beginner but it is also well renowned as being one of the best syntax enabled all-round applications for web-development supporting a large amount of file types and web development methods.

The screenshots to the left show a basic view of how a CSS and HTML file look within the text editor of Coda. The syntax highlighting is hugely helpful in understanding each element of the code and also making sure that it is entered correctly to web standards.

Implementing PHP

Having fully set the site up in HTML, I then went back and recoded the whole website to include some PHP elements that I had learnt along the way to improve the ability to edit it at a later date. As you can see in the screenshots to the left, the amount of lines of code have been dramatically shortened on the portfolio pages by the addition of the following line of code: <? phpi include (“elements/thumbnails.php”)?> This enables certain elements on repeating pages to be automatically added to other similar pages meaning that if I were to edit the amount of thumbnails for example, I would only need to edit the one “thumbnails.php” page rather than every page that has thumbnails included.

“I was able to remove hundreds of lines of code”

I don’t often start fresh with a piece of work but by recoding the whole site using this method, I was able to remove hundreds of lines of code and it also allowed me to learn the HTML to a greater depth by the power of repeating the process over and over again. In the long run, it will save me a great amount of time when it comes to updating sections as a whole.

Top: Section of the original HTML file. Middle: Section of the new PHP file. Bottom: The small line of PHP code that enables the removal of multiple lines of code.

WPMUUsing WordPress MultiUser (WPMU) was a little bit different to using the regular installation of WordPress but it has definitely been a lot more useful and powerful for the needs I have with That Design. Mainly, it allows me to create multiple blogs from just one MySQL database and one installation of WordPress but still retaining a massive amount of admin control over each blog and user that is created. Having the MultiUser installation also allows me to network activate certain enhancements and plugins all in one go rather than having to perform the same process over a number of different blogs. It’s not too much hassle now if I was to do that, but in the future there may be a lot more users and contributors to That Design, so I feel it is definitely better to prepare for something that could potentially expand.

WordPress is such an amazing tool for building websites as it allows complete control over the design and function of the site, yet retains a full back-end content management system for posting and structuring the site as a whole. It is also updated fairly regularly meaning that I will always be using the latest version that conforms to today’s web standards and it is extremely reliable and stable as a platform.

Although the site had been up and running and had already gained quite a few blog posts, the decision was made that we should have an official launch to signify the completion of the site rather than continuing the gradual progression towards completion.

November 11, 2011 was chosen as the launch day for it’s significant number digitally as 111111, which within binary often means ‘on’ or ‘yes’.

“I found the creation of animation using code to be a tough but very rewarding experience”

I took the site offline and put a holding page in place, having previously converted the site to PHP in October, I wanted to have a slight redesign of the whole site to reflect my recently learnt skills within CSS and also to put them into practice. This included a slightly textured background and the introduction of CSS3 elements such as placing animation on pages without the use of Adobe Flash. This means that when the site is viewed on modern browsers and portable devices which don’t support Adobe Flash such as the iPad, iPhone and Android devices it will give a fluid animated design rather than a standardised static page.

This new style would hopefully appeal to other web developers as it shows a more sophisticated site design using newer CSS3 styles.

I found the creation of animation using code to be a tough but very rewarding experience as it was extremely mathematical and precise but it can be controlled to the most exact detail.

Included with the launch page is the ability to subscribe to That Design to be notified of future updates. I plan to create some HTML email newsletters that can be sent out at various times throughout the year. These could include updates to our portfolios, recent/popular blog posts and seasonal messages to send to our visitors. So far there are only 11 subscribers but that is only a starting point which can only grow to a larger number.

The launch page can still be viewed at the link below.

http://thatdesign.co.uk/launch

113

Launch Posters

To go with the launch, we each created a poster that would be displayed a few days before as a way of announcing that something was coming and also to present our own personal style of design towards the same brief. Above are the first sketches that I produced before heading to illustrator to produce something digital. I was initially working with the repeating idea of the 1s in 11.11.11 and fitting that into my own personal style. Such as displaying it as 11 to the power of 3, 113.

On the next spread, you will see some of the digital developments that I made using Illustrator mainly for the concept, Photoshop for the styling and InDesign for the typography layout.

eleventh/november/twenty-eleveneleventh/november/twenty-eleven

eleventh/november/twenty-eleveneleventh/november/twenty-eleven

eleventh/november/tw

enty-eleveneleventh/novem

ber/twenty-eleven

LAUNCHINGeleventh of november



LAUNCHINGeleventh of novembertwenty-eleven

launching soonnovember eleventh

My final poster design, shown left symbolises that the site is almost complete and that we’re almost ready to open up fully. I chose to visualise the message through the use of imagery that displays an old sliding puzzle game. The image on the puzzle is the ‘TD’ avatar that is used for the Twitter account and sometimes used as a logo when space is tight. When the site was complete and launched fully, I replaced the jumbled puzzle image with a completed puzzle on the home page.

The screenshot above shows the gallery page with all four of our posters available to view and download at high-resolution. You can see the gallery at the link below.

http://thatdesign.co.uk/launch/gallery.php

As mentioned previously, whilst the site was offline, I took the time to redesign the style of the site slightly. These screenshots show the newly updated style for all of the main pages. I think it definitely stands out more and feels a lot more contained than the original design which was very basic with a completely white background.

This first screenshot is the updated home page with the new ‘hero image’ which is a link to the launch posters gallery. The image is animated with CSS3 to scroll through all four of our designs.

The second screenshot shows the contributors page which has details about us individually such as a quick piece of background information as well as our interests and specialities within design.

Below each picture there is a contact icon that allows for a visitor to download a .vCard with our contact information to add to their address book. This has been added to create another method of gaining return visitors who may look through their address book at a later date and may wish to commission us for a piece of design work if they require.

You can take a look through the whole site at the link below.

http://thatdesign.co.uk

THATDESIGN

PROGRESSREVIEW

When I first started That Design, I wasn’t really sure how successful it would be. I didn’t know if anyone would want to join me in creating a collective and I wasn’t sure if I would ever find the time to dedicate myself to making the website fully. Yet, somehow I managed to get something going and from there it has all snowballed into something I am truly passionate about. Looking back now I remember having a distant vision of being able to collectively organise our work together and I had a vague idea of how the blogs may work but when I compare that to how I feel now, I know I am definitely in a much better position to look forward and plan new features and designs. The way it has all developed in the past month has made me realise that it could actually turn into something quite big. I’ve always thought of the website as a little side project to test out my web development, but now I look at it as my main focus with the way that I present myself to the industry as a graphic designer and as my main learning environment for web development.

“I feel that I have spent my time wisely and have made astronomical progression”

In terms of the skills that I have learnt and developed about web development, That Design has definitely been at the heart of it all. I feel that I have been able to learn as much as I have through having a working project, rather than something that is just conceptual and fantasy. By creating a whole website from the ground up, I have been able to work on every aspect of the process from domain name management to server configuration as well as the build process itself. I feel that I have spent my time wisely and have made astronomical progression given the fact that I have been learning by myself, mostly through trial and error and sheer persistence to want to learn more. Initially, I wanted to learn how to code so that I could redesign my own site in HTML rather than using Adobe Flash which I had previously found very frustrating to update and manage as a website. I honestly didn’t expect it to become one of the biggest parts of my own practice. It’s definitely something that I will be pushing very hard over the next year and I will be looking to implement my skills quite heavily in my Final Major Project, next semester.

MOREWEB

Above: The design for the portfolio pages.Right: The design for the main blog page.

I recently worked with Sinéad Birmingham to develop and build her own personal online portfolio and blog to showcase her design work and log her inspirations and works in progress. It was the first site I had created for someone else since learning about HTML and CSS through building That Design; but there were still areas of learning involved as I worked out a much simpler way of organising files for the site so that it would be easier for Sinéad to update the site herself just by following a filename structure. For example, each piece of work is labelled as the project number followed by the image number which is also representative within the URL such as 01-03.jpg and 01-03.html. Therefore, as long as each file is labelled correctly and uploaded into the right place, then Sinéad will be able to continue to add new work to the portfolio section as she releases them publicly. It also means that she’ll be able to get rid of old work when it is no longer required.

Just like That Design, I embedded a version of WordPress to the server for Sinéad to manage her blogs. From the knowledge I gained with developing for WordPress previously, I was able to design and style this blog to fit the rest of the site much faster than I had done with That Design. The site can be viewed at the link below.

http://sineadbirmingham.com

At the start of the action research planning section of this semester, I seemed to be fixated on a plan to work on one particular project over the duration of the 6 weeks. I made notes of all of the briefs that I had worked on over the last few years from University and College as well as my own independently set briefs, then I recorded what I enjoyed most and what I felt was the most successful area that I had been working within. I wanted to be completely honest with myself and make sure that I found out what I liked and didn’t like.

Throughout University, I have enjoyed working with bookmaking/binding, video/film/animation, layout design, typographic styling, print processes and font design. Within College, I really enjoyed working on briefs within branding, print-based advertising, book making, typography, magazine layouts, idents and print-processes. For my independent work I have enjoyed working with digital photography (mainly landscape, photojournalistic and portrait), web development, self promotional poster-style designs and blogging through use of WordPress.

“I wanted to be completely honest with myself”

I’ve also discovered that I don’t like things such as; meaningless work that gains an artistic meaning through the process of an after thought rather than through the developmental stages as well as breaking rules or limitations for the sake of it or just to be difficult. I prefer to only remove limitations if it is paramount to the success of a particular project. I like my work to have an end piece; something that can summarise the whole process at a first look rather than a collection of unfinished ideas and processes. This often means that I like to have my work end as a physical item, whether it is a print or a book etc. depends on the project itself.

As you can see from the scans, I use my sketchbook very informally as a type of notebook with written ideas down. Please ignore the Bristolian wording.

THINKINGTHROUGH

DOING

Action Planning

From my previous notes, I came to the conclusion that I wanted to work within branding over the next few weeks as it covered so many aspects of Graphic Design such as: printed media, advertising, corporate identity, promotional work, editorial, copywriting as well as web-related work to name just a few. I felt that I would be able to create a whole package that is uniformly designed and can work together as a complete collection of work.

I thought that I could use this time to create a brand identity for myself as I currently lack any sort of continuous theme in the way that I promote myself online and when talking with other designers and potential clients. I created a simple action plan to work towards and highlighted the key points that I was looking to work within.

“I created a simple action plan to work towards”

I was looking to create a new identity with a complete stationery set, a new online portfolio website, a printed portfolio of work in the form of a book and also some promotional posters of a particular theme that would display my skills as a designer.

I had previously created a logo for myself but I soon didn’t like it as it fell into a category of clichés and copycat design styles which is why I had become so desperate to create a new identity for myself that I would be proud to display.

This would then translate well into my Final Major Project as one of my initial ideas was to create a complete identity package for That Design that could run parallel to the online media that has been produced.

JAJA

&

JOE ALLAM JOE ALLAMjoe allam

joeallam.co.uk

joeallam

JOE ALLAMJA

JAJAJAJA

JA JAJA

JA JAJA

Logo Design

I started the process of branding myself by replacing the existing logo that I had. I always start my ideas on paper in my sketchbook and then take them into Illustrator to visualise further. The scans to the left show my initial sketches on paper and above is the layout pasted directly from Illustrator that shows my development path of new ideas spawning to the side and below existing ideas.

SETBACK

#1Once I had started to produce some logo designs and presented my strategy of branding myself, I fell into quite a few holes. Mainly, I ended up asking the questions “Am I a branding designer?” (Considering the fact that I would be branding myself in order to lead into a self-set branding brief next semester) “How can I brand myself as a branding designer if my latest work would only include brand work based on myself?” It all seemed to flow round in a cyclical progression of dysfunction. It made me realise that I wasn’t necessarily after a brand image for myself, but I was mostly just looking for a way to build myself a brand new online portfolio and put my latest web development skills into practice.

“How can I brand myself as a branding designer if my latest work would only include brand work based on myself?”

Without realising, I had just completed a full process of the action research method. I’d reflected upon my existing ‘identity’, then chosen to investigate into the identity. I created a plan of action to work to and followed it by experimenting with some design ideas, then came the big evaluation of myself within branding which has led me to reflect on everything as a whole.

I still need to create an image for myself as an individual designer, but I have realised that this part of the semester should really be spent building up my individual skills within Graphic Design in a more external position rather than personal.

NEWPATHWAYSAfter evaluating my independent practice to date, I decided that I should embrace web development as my main area of focus rather than keeping it as a bit of a side project. I felt that I should focus more on That Design as a means of building up my skills within HTML CSS PHP and WordPress. By working with That Design and creating an official launch to show the completion of the site, it made me realise that my FMP should probably be mainly web based.

“I should embrace web development”

This made me think more about my current practice in light of how I could create a project for myself to cover the duration of the next semester predominantly in a web environment.

SANDBOX

In order to learn certain aspects of both web design and development, I have created a section on my own personal website called ‘Sandbox’. It’s my sort of web play-area for developing ideas and experimenting with different pieces of code. A lot of the things I want to include on the web pages that I make, are the result of some initial testing made in my sandbox.

“It’s my sort of web play-area for developing ideas”

During a few weeks of this semester I have been working with a few pieces of code, mainly targeted towards CSS3 animations. I feel that in order to create some big web experiments, I need to nail the basics first. Without knowing what HTML and CSS can do, I can’t start to look at JavaScript or JQuery for example.

I am continuing to add to the list of experiments which you can see at the link below.

http://sandbox.joeallam.co.uk

<div id="container">

<div id="navigation">

<span class="nav">

<ul>

<li><a href="#">Hello</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Store</a></li>

</ul>

</span>

<span class="drop-down" id="nav-1">

<ul>

<li><a href="#">Hello</a></li>

<li><a href="#">Sub-heading 2</

a></li>


a></li>


a></li>


a></li>

</ul>

</span>


<ul>

<li><a href="#">About</a></li>


a></li>


a></li>


a></li>


a></li>

</ul>

</span>


<ul>

<li><a href="#">Contact</a></li>


a></li>


a></li>

</ul>

</span>


<ul>

<li><a href="#">Blog</a></li>


a></li>

</ul>

</span>


<ul>

<li><a href="#">Store</a></li>


a></li>


a></li>


a></li>


a></li>

</ul>

</span>

</div>

</div>

Drop-Down Menu

An experiment with creating drop down menus using just CSS for the styling and animation. The process is actually a little more complex than it first looks with hidden content and timed animations applied to each hover on the menu items.

body{

background: #FFE894;

font-family: ‘Helvetica’, ‘Arial’, Sans-serif;

color: #3A3A3A;

}

#container{

width:900px;

height:auto;

position: relative;

top:50px;

margin:0 auto;

}

a {

text-decoration: none;

color: #EFEFEF;

padding:6px;

line-height: 30px;

text-align: center;

}

a:hover{

color:#FFFFFF;

}

#navigation{

width:741px;

height:30px;

background: #3A3A3A;

position: relative;

margin:0 auto;

top:0px;

text-align: center;

}

.nav ul{

list-style-type: none;

display: inline;

}

.nav li{

float: left;

margin:0px 55px 0px 50px;

}

.nav li:first-child{


}

.nav li:last-child{


}

.drop-down ul{

height:30px;

overflow:hidden;


display: inline;

float: left;

clear: none;

position: relative;

margin:0px;


top:-30px;

-webkit-transition: all linear 0.2s;

}

.drop-down li{

padding-left:-50px;

margin-left: -25px;

margin-right:15px;

}

.drop-down li:last-child{

margin-right:15px;

}

.drop-down ul:hover{

height:160px;

background: #009DDC;

}

.drop-down#nav-3 ul:hover{

height:100px;

}

.drop-down#nav-4 ul:hover{

height:70px;

}

.drop-down#nav-5 li{

width:123px;

}

(Above) Navigation Animation

A collection of navigation menus that could be used on new web projects or maybe distributed to other developers if they would like to use them.

All of these menus feature animations only available in the latest CSS3 compliant browsers.

(Right) CSS3 Expanding Containers with Fluid Motion

Using the CSS3 styling of transitions, I was able to create an element that could animate softly when interacted with. This is just a simple use for it, but the basic principle is the effect of a ‘before’, ‘after’ and ‘what happens in between’ animation that used to be reserved only for applications like Adobe Flash.

<div id=”container”>

<span class=”nav” id=”nav-1”>

<ul>

<li><a href=”#”>Hello</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

<li><a href=”#”>Blog</a></li>

<li><a href=”#”>Store</a></li>

</ul>

</span>


<ul>






</ul>

</span>


<ul>






</ul>

</span>


<ul>






</ul>

</span>

<div class=”shape”>


<ul>






</ul>

</span>

</div>

</div>

body{



color: #3A3A3A;

}

#container{

width:600px;

height:auto;

position: relative;

left:50%;

margin-left: -300px;

top:30px;

}

a{

color: #EFEFEF;


}

.nav ul{

text-align:left;


position: relative;

width:auto;

margin-left: -40px;

clear: left;

}

.nav li{

padding:3px 6px 3px 6px;


width:auto;

height:auto;

display: inline;

float:left;

}

.nav li:hover{

background:#009DDC;

}

.nav#nav-1 li{

clear: both;

-webkit-transition: padding ease-in-out 0.3s, back-

ground ease-in-out 0.5s;


}

.nav#nav-1 li:hover{

padding-left: 25px;

}

.nav#nav-2 ul{

clear: left;

top:50px;

}

.nav#nav-2 li{



}



}

.nav#nav-3 ul{

clear: both;

top:100px;

}

.nav#nav-3 li{



}



}

.nav#nav-4 ul{

clear: both;

top:150px;

}

.nav#nav-4 li{

-webkit-transition: padding ease-in-out 0.3s, border-

radius ease-in-out 0.3s, background ease-in-out 0.5s;

}



border-radius: 0px 0px 7px 7px;

}

<!DOCTYPE html>

<html>

<head>

<style type=”text/css”></style>

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8” />

<link rel=”stylesheet” type=”text/css” href=”css/expanding-

containers.css”/>

<title>sandbox.joeallam.co.uk | Testing Ground and Web Develop-

ment for Joe Allam | Expanding Containers</title>

</head>

<body>


<div id=”main-content”>

<div class=”grow” id=”01”>Hover over each of the rectangles</

div>

<div class=”grow” id=”02”></div>

<div class=”grow” id=”03”></div>

</div>

</div>

</body>

</html>

@charset “UTF-8”;

body{



color: #3A3A3A;

}

#container{

width:900px;

position: relative;

left:50%;


top:30px;

}

#main-content{

width:600px;

height: auto;

position: relative;

left:50%;


}

.grow{

width:570px;

height: 200px;

padding:15px;

background:#EFEFEF;

margin-bottom: 15px;

border: 1px Solid #999999;

-webkit-transition: all ease-in-out 0.7s;

-moz-transition: all ease-in-out 0.7s;

-o-transition: all ease-in-out 0.7s;

transition: all ease-in-out 0.7s;

}

.grow:hover{

width:570px;

height: 400px;

padding: 15px;

position: relative;

background:#EFEFEF;

box-shadow: 0px 0px 5px #999999;

z-index:1;

}


<div class=”block-element” id=”1”></div><div class=”vertical-

wrapper”></div>


wrapper”></div>


wrapper”></div>

<div class=”block-element” id=”4”></div>


wrapper”></div>


wrapper”></div>


wrapper”></div>



wrapper”></div>


wrapper”></div>


wrapper”></div>


</div>

body{


font-family: 'Helvetica', 'Arial', Sans-serif;

color: #3A3A3A;

}

/*structural elements*/

#container{

width:95%;

max-width:1000px;

height:auto;

margin:0 auto;

position: relative;

top:30px;

}

.block-element{

width:21%;

max-width:210px;

height:100px;

margin-bottom:50px;

position: relative;

float:left;

}

.vertical-wrapper{

width:5%;

max-width:50px;

height:1px;

float: left;

}

/*Media styling*/

@media screen and (max-width:660px){

.block-element{width:32.8%; max-width: 328px;}

.vertical-wrapper{width:3%; max-width: 30px;}

}

/*cosmetic styles - colours etc*/

#container{

background: #EFEFEF;

}

.block-element{


border: 1px solid #3A3A3A;

box-shadow: 0 0 5px #999999;

}

/*Typography styling*/

a{

color: #EFEFEF;


}

(Above) Media-Queries

Designing webpages that dynamically change depending on the screen size and resolution is quite a tricky process. There are a number of ways to accomplish this, you could either design a completely separate site for mobile and tablet devices, you could link a different CSS file on the detection of a particular browsing device or you can use media queries. This is quite a mathematical process by which sizes of elements are determined by percentages and attributes such as max/min-width within CSS.

I have been trying to understand the best possible way of implementing media-queries into my web development, but it is proving quite difficult at the moment. On my sandbox, there is a partially working version of some media-queries but I will be revisiting it to perfect the process for the future.

You can test how it works by resizing the browser window to notice how the elements adjust size and rearrange in a grid.

(Right) CSS3 Image Swap

Using just CSS and no flash or JavaScript, I wanted to create an animating element that would have a scrolling image and links that would fade in and out as the image moved along. I didn’t want to use Flash, as I wanted it to be compatible on mobile browser such as the iPhone and iPad which do not support Adobe Flash.

The code is extremely long for something that appears so simple as each transition needs to be timed and perfected across all different web browsers as each will read certain CSS3 elements differently.

I would like to add to this to have control buttons that allow the user to manually progress the scrolling forwards or backwards as I feel it may be a little confusing to some people with the automatic transitions.

55% {opacity:0; visibility: hidden;}


}

@-moz-keyframes swap-link-2-FadeIn{



25% {opacity:1; visibility: visible;}




}

@-o-keyframes swap-link-2-FadeIn{







}

@-webkit-keyframes swap-link-3-FadeIn{







}








}








}

.image-swap{

width:820px;

height:400px;

background:url(../images/hello-sprite.jpg) 0 0 no-

repeat;

position: relative;

top:0px;

margin-bottom: 15px;

border:1px solid #FFFFFF;

-webkit-animation-name: ImageSwap;

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-duration:30s;

-webkit-animation-iteration-count: infinite;

-moz-animation-name: ImageSwap;

-moz-animation-timing-function: ease-in-out;

-moz-animation-duration:30s;

-moz-animation-iteration-count: infinite;

-o-animation-name: ImageSwap;

-o-animation-timing-function: ease-in-out;

-o-animation-duration:30s;

-o-animation-iteration-count: infinite;

}

.swap-link-background{

width:820px;

height:75px;

position:absolute;

top:325px;

background: -webkit-linear-gradient(top, #232323,

#3A3A3A);

background: -moz-linear-gradient(top, #232323,

#3A3A3A);

opacity:0.7;

border: 1px solid #FFFFFF;

z-index: 1;

body{



color: #3A3A3A;

}

#container{

width:820px;

height:400px;

padding:15px;

position: relative;

top:50px;

margin:0 auto;


padding:15px;

border-radius: 5px;


box-shadow: 0px 0px 5px #999999;

}

#content{

width:820px;

height:auto;

position: relative;

margin: 0 auto;

}

@-webkit-keyframes ImageSwap{

0% {background-position: 0px 0px;}


25% {background-position: -835px 0px;}





}

@-moz-keyframes ImageSwap{








}

@-o-keyframes ImageSwap{








}


0% {opacity:0;}

5% {opacity:1;}

18% {opacity:1;}



}


0% {opacity:0;}

5% {opacity:1;}

18% {opacity:1;}



}


0% {opacity:0;}

5% {opacity:1;}

18% {opacity:1;}



}






}

.swap-link {

position: absolute;

width:810px;

top:340px;

z-index: 2;

font-family: ‘Helvetica’ Sans-serif;

font-size: 1.5em;


text-shadow: 0px 1px 1px #D1D1D1, 0px -1px 1px

#3A3A3A;

color:#FFFFFF;

text-align: right;

}

.swap-link:hover {



#3A3A3A;

color:#D1D1D1;

}

#link-1.swap-link{

-webkit-animation-name: swap-link-1-FadeIn;




-moz-animation-name: swap-link-1-FadeIn;




-o-animation-name: swap-link-1-FadeIn;




}

#link-2.swap-link{













}

#link-3.swap-link{













}

.swap-text{

position: absolute;

width:810px;

top:370px;

z-index: 2;

font-family: ‘Helvetica’ Sans-serif;

font-size: 0.8em;

font-weight: 100;



#3A3A3A;

color:#FFFFFF;

text-align: right;

}

.swap-text:hover {


<!DOCTYPE html>

<html>

<head>

<style type=”text/css”></style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />

<link rel=”stylesheet” type=”text/css” href=”css/debossed-text.css”/>

<title>sandbox.joeallam.co.uk | Testing Ground and Web Development for Joe

Allam | Debossed Text</title>

</head>

<body>


<div id=”whole”>

<h1>Page Title</h1>

<h2>Here is a Sub-Heading</h2>

<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus

fermentum sapien a aliquet. Donec malesuada velit quis risus ultricies sit amet

mollis elit congue. Nunc ut viverra tortor. Morbi adipiscing, neque dignissim ul-

lamcorper scelerisque, mauris nibh tempor urna, et lacinia enim lectus et nunc.

Aenean pretium augue at eros accumsan dapibus fringilla a diam. Vivamus non

arcu dui. Pellentesque non ipsum erat, a egestas magna. Proin velit nisi, dignis-

sim sit amet ultricies sed, interdum semper justo. Praesent pulvinar leo ac sem

placerat tempus. Maecenas quis nibh eget magna faucibus consequat. Mauris

tincidunt luctus euismod. Nam at tempus purus.

<br /><br />

In hac habitasse platea dictumst. Nullam non ipsum nec leo porttitor pharetra

vel vitae nulla. Donec molestie scelerisque placerat. Duis lectus urna, pulvinar

vel semper nec, accumsan non leo. Suspendisse potenti. Proin in ligula vitae

mauris consequat euismod quis ut ante. Curabitur sed bibendum arcu. Ut

sapien ligula, tempus placerat congue a, dignissim quis eros.

<br /><br />

Sed quis sapien sit amet enim eleifend laoreet. Etiam neque turpis, feugiat sit

amet bibendum vel, facilisis id turpis. Phasellus adipiscing, augue eu rutrum

ornare, sem nunc imperdiet neque, ut hendrerit nisi neque eget justo. Sed arcu

velit, molestie eget condimentum ac, consectetur non risus. Quisque suscipit

adipiscing nisl, ac facilisis urna tristique et. Maecenas elit libero, euismod

in tincidunt ac, egestas at diam. Phasellus eu nisi convallis odio adipiscing

vehicula.</h3>

</div>

</div>

</body>

</html>

@charset “UTF-8”;

body{



color: #3A3A3A;

}

#container{

width:900px;

height:auto;

position: relative;

top:50px;

margin:0 auto;

}

#whole{

width:600px;

height:auto;

position: relative;

margin:0 auto;


padding:15px;

border-radius: 5px;


box-shadow:inset 0px 0px 5px #999999;

}

h1{

font-weight: 600;

font-size: 7em;

text-align: left;

line-height: 0.9em;

margin: 0px;

text-shadow: 0px 2px 1px #FFFFFF, 0px -1px 1px

#000000;

}

h2{

font-weight: 600;

font-size: 2.7em;

text-align: left;

text-shadow: 0px 2px 1px #FFFFFF;

}

h3{

font-weight: 300;

font-size: 0.9em;

line-height: 1.8em;

text-align: left;

text-shadow: 0px 2px 3px #FFFFFF;

color: #455A61;

}

Debossed Text

Stylising elements for the web is quite different than designing for print as you are limited with the amount of pixels that are visible when designing for the screen in comparison to the many different print resolutions that are available.

In order to make a piece of text appear to be debossed into the screen, you will need to use the ‘text-shadow’ attribute within CSS3 and then apply a shadow that is only 1 pixel in thickness, 1 pixel lower than the type; as the above example shows. The shadow, depending on whether it is dark text on a light background or vice versa will need to be a particular shade of colour similar to the text to give the illusion of it being debossed. Although, gradients and drop shadows are generally seen as a tacky practice within print design, they are very well regarded within design for the screen when executed well due to their limitations with the amount of pixels available and the flatness in brightness of the screen itself.

IDEAS&

SETBACK

#2

From my continued work within my online sandbox, I was trying to find direction for my final major project for next semester. Considering my approach towards web development and design, I had the idea of creating a site that would showcase a series of creative uses within the web. A sort of portfolio of skills displayed in an interesting and encapsulating way. In order to create a website for my FMP, I would need to generate content from somewhere; whether that was content that I would create such as a collection of work on a particular theme (nature photography for example), or content gathered from existing areas such as a syndication based site for collecting articles on the web from existing design blogs etc. By having a website whereby the content would be a portfolio display of my skills to an advanced level in small ‘projects’, it would be more appealing for existing web developers to see and appreciate.

“it would be a major risk to rely on learning these skills for my FMP whilst I was working on FMP”

However, although this idea would be perfect to display my skills as a web developer and designer, I don’t feel as though my skills are good enough or outstanding enough to show in an online portfolio. I don’t feel as though I know enough in terms of creating a creative piece of code that is interactive or visually stimulating in terms of web development. Although I plan to learn JavaScript and PHP to a higher level, I feel as though it would be a major risk to rely on learning these skills for my FMP whilst I was working on FMP. There is always the chance that I may not be able to learn them as fast as I have learnt HTML and CSS. It’s just one more cycle of the process to find a proposal for my FMP that has form, content and meaning.

FMPIDEAS

Throughout the ‘Thinking Through Doing’ section of this semester, I have been driving towards creating an idea for my FMP next semester. Having what I originally thought as two strong ideas followed by two major setbacks has really made me try to find something within web development that has the essence of inspiring creativity, is productively engaging and is also large enough to fit within the three month time-span that I have to work on it as well as fitting within my skill set as a web developer.

I’ve been re-evaluating my existing work within That Design, my sandbox and my previous FMP ideas to find out exactly what I want to work within for the next semester.

“it’s pushed me to turning my idea into something that can be shared with other people”

I’ve had the idea for a considerable amount of time to turn my own personal domain joeallam.co.uk into a site that collects some of my most popular internet ‘channels’ of inspiration and activity such as Flickr, Vimeo, YouTube and Twitter. I want to create something that is flowing with activity such as my favourites/likes and uploads from the aforementioned web services in one localised place. Rather than having to visit each of the sites to reacquaint myself with my latest inspirations, I would be able to just go to one site and

see them all in a chronological order. This idea has been on my mind for quite a while, but it wouldn’t work as an FMP because it’s just too personal to me and no one else. However, from the work with That Design and the integration with WordPress that I have learnt, it’s pushed me to turning my idea into something that can be shared with other people or better yet, the ability for people to create their own sites with their own inspiration channels listed.

BuddyPress

The creators of WordPress have made a ‘social network-in-a-box’ system called BuddyPress, which has the same customisability and flexibility of WordPress including the ability to design and style every piece of the site, but handles all of the heavy database management such as users, registration and content management. It is essentially a by-product of WordPress MultiUser but with more control given to its users in terms of who can and can’t have a section on the site.

“There is an enormous amount of control over what seems like an enormous amount of features”

I spent some time researching into the capabilities of BuddyPress and have discovered that it fits well within my idea of creating a site that can syndicate content from our web inspirations and activities as well as having the ability for other people to sign up and create their own profile within the site and display their own visual grid of recent inspirations. It also has the ability for users to connect with each other and display their activity with everyone else’s. There is an enormous amount of control over what seems like an enormous amount of features.

The great feature for me within BuddyPress is that I wouldn’t have to worry about all the background processing needed to maintain such a large site, yet I would be in total control of the design and build of the site and also the user experience and interaction.

I have made some initial sketches of my ideas for a visual network that would display all of the activity in a grid based layout. I want to make sure that it is fully accessible to users of all devices such as smartphones, tablets and many desktop displays, by coding it with media-queries to adjust the site’s size and layout automatically depending on the screen resolution. In order to do this, I will need to work a lot further in my sandbox with my existing media-query experimentation.

visual network search

43 minutes ago 6 comments

1 hour 26 minutes ago 12 comments

19 minutes ago No comments yet...

2 hours 12 minutes ago 3 comments

LOGIN

REGISTER

3 days ago 12 comments

EVERYONE

YOU

FRIENDS

GROUPS

RANDOM USER

TWITTER FEED @usernameMENTIONS

FAVOURITES

REQUESTS

2

6

1

STREAM FRIENDS FAVOURITES GROUPS PROFILE ACCOUNTFORUMACTIVITY 9

MENTIONS

al netw TES

2

9visuaal networkMENTIONS

STREAM ACTIVITY FRIENDS FAVOURIT S GROUPS FORUM PROFILE ACCOUNT search LOGIN

REGISTER

T6

1

FAVOURITES

REQUESTS

TWITTER FEED @username

EVERYONE

YOU

FRIENDS

GROUPS

RANDOM USER

643 minutes ago 6 comments

N19 minutes ago No comments yet...

11 hour 26 minutes ago 12 comments

313 days ago 12 comments 2 hours 12 minutes ago 3 comments

Visual Network

To help visualise my idea for a grid-like stream of content, I have mocked-up a basic architecture for the site. My initial vision is that people would be able to sign up for an account, login with their respective credentials for particular sites they’d like to stream and then find their friends and other people to follow all of their recent activities. The main reason for the creation of the site is to allow people to follow the activity of multiple online services in one place rather than having to visit each site individually. I would also like to build in other features such as a like/dislike element that could adjust content based on the popularity of each post.

“I feel that the grid based style to it will give a much greater visual impact”

Overall, I envisage a very visual looking site with a great deal of media content full of video and stills etc. Think of it as a social network for social networks.

As you can see from the design to the left, I have been working to a very strict grid which I have left in place for the purpose of demonstration. I feel that the grid based style to it will give a much greater visual impact than that of a list based layout more typical of a blog. I also feel that it will help with the transitional styling across multiple screen sizes and devices.

BUDDYPRESS

I created a local installation of BuddyPress within my sandbox development area to test out what features are available to me and how I may be able to implement them as a way of preparing for my future progression within the next semester. As you can see from the screenshots, there is already an adequately made interface in place by default, however I will be looking to completely gut this and create a whole new user experience and design to fit my vision of creating a visual based network of activity. There are plenty of elements that will need multiple amounts of hours to design and build but I look to this as a great project to set myself over the course of the 3 months for my FMP.

As a bit of a side project, I had a look into Xcode, the software used to make Applications for both Mac OS X and iOS devices. It was a very brief look into the software as a way of just seeing the interface and how it handles projects and the development process. It appears to be very similar to web development in the way that files are handled and referenced as well as the structure for the coding. From resources that I have read previously, I am under the impression that learning Xcode by reading the documentation that comes with it is very simple and easily done.

If I am able to learn some aspects of creating apps, in particular iOS apps then I could look into making one for the visual network that I will be producing next semester as a way of people being able to upload their content directly through the one app.

XCODE

APIsIn order to link up various existing social networks into one main website, I will need to use APIs (Application Programming Interface) from the various services such as Flickr, Vimeo, Youtube and Twitter. These are all publicly available as long as you sign up as a developer to each of the services to register the selected website or application. I have signed up as a Twitter Developer so far, as a way of experimenting with each of the API queries such as the ability to post remotely to Twitter accounts or to display a live search feed from a particular Twitter search query like a #hashtag. Once I begin to build the visual network, I will need to register as a developer for the remaining services in order to activate each of the syndication feeds that I require in order to build up the visual grid.

FMPPROPOSAL

Above: My initial predicted time plan for my final major project, next semester.

Throughout the semester, I have gravitated towards web design and development to the extent that it has become my most featured skill of the past few months. I have been independently learning different methods of building websites from HTML and CSS to using PHP and a heavy amount of WordPress development. From the success of That Design as an online portfolio and as a WordPress MultiUser blog, I have decided that I wish to work further within the web as the main focus for my final major project, next semester.

There are three main areas towards the work that I make for the web; form, content and meaning. I feel very confident in my skills for designing for the web and producing an elegant website design with intuitive user interfaces and a captivating user experience. The content however, differs from project to project. Throughout the length of the semester, I have been unsure about what content I would be displaying on a website. Would it be content that I would create? Would it be content syndicated from existing sources? Or would it be content that a user would add over time? The meaning for the site would be completely dependent on what content was being displayed and how I would be displaying it.

“There are three main areas towards the work that I make for the web; form, content and meaning”

Having spent a large amount of time thinking through doing, I have come to the starting points of a self-directed brief for my final major project, next semester. I will be working towards creating an online ‘visual network of activity’ that will allow users to create an account and have their most recent visual activity from services such as Vimeo, Flickr, YouTube and Twitter displayed beautifully within a grid-based structure. The website will allow people to either see their own activity or a collection of other peoples activity through the use of ‘follow requests’ and groups of users.

The main reason behind creating such a network is to remove the need for people to have to search for each user individually on each particular service. It will allow people to see all of their activity on one page with a great amount of visual impact. It will also allow people to find similar users collected into groups rather than just individually. I hope the site will help to inspire people with their own practices as other people post their own inspirations and pieces of work.

The site will be built using WordPress’s BuddyPress (a back-end content management system described as a social network-in-a-box). This is because it will cover the majority of the administration for such a site, including but not limited to: user registration, user groups, account connections, comment systems, friend requests and forums. I will be in complete control of the user interface design and responsible for the user experience throughout the whole of the site. I will be looking to make the site completely front-facing, meaning that the WordPress dashboard isn’t needed for users to post content and authorise the external services.

“I will be in complete control of the user interface design and responsible for the user experience”

Over the course of the next semester I will need to dedicate time to the identity and visual method of communicating the whole concept, the build of the site itself including the design and styling of each element, configuration of the relevant APIs from each external service, development for multiple devices such as tablet and smartphones, promotional material such as video resources that introduce users on how to get the best out of each feature of the site. I will also be dedicating a large amount of time to user testing (initially very small scale and then building up to having more active users). As a way of gaining ongoing feedback from users, I will be able to develop the concept a lot faster and make the user experience much richer.

I will be mainly keeping the website as a closed concept based network, however if it becomes successful, I may be able to make it a fully public service to continue when I graduate from University. As more and more people are connecting with each other online through various social networks, it also become much wider in terms of where people are able to access each others content and activity. My network that I propose to make will help to close that wideness and allow people to collect their activity together in one place but to retain an element of individuality about themselves.

From my previous experimentations with my sandbox web environment, I feel confident that I will be able to focus myself to creating this visual network within the time-frame available of the next semester.

SEMESTEREVALUATION

Over the past few months, I have developed a great amount of skill for my own independent practice through my own individual learning, autonomously. Working mainly within web design and development, I feel I have taught myself a great life skill in terms of my graphic design practice and have set myself up to continue to learn and improve as the standards of web design shift. From the very beginning, I had no idea just how much I would be able to teach myself, yet I have developed methods of learning through the use of the internet, in particular forum posts and connections on Twitter. I have always wanted to learn more in terms of coding, but have never had that initial kick up until now. I think it shows a great deal about my commitment to learning a particular skill individually. I’ve always been an extremely focused person with everything that I do and have always had a passion for technology and embracing the newer things in life. This has definitely been at the focal point for my progression as I am fascinated by the future and the way that we will communicate and publish our ideas over the next generation.

“I’ve always been an extremely focused person with everything that I do”

Over the next year, I plan to continue to increase my knowledge of web development. I think that I will need to work on big projects for a few months at a time in order to fully progress as I have done previously with That Design. I understand that I have learnt a lot faster when there is a particular end goal or process that needs to be achieved. I’ve also found that I benefit from making something, remaking it and then remaking it again from the ground up. Within coding this has majorly improved my discipline within the web standards and I will try this method to all other aspects of my design practice to experiment whether it can be applicable to everything that I do.

With regards to That Design, I am absolutely thrilled as to how it has turned out. I really wasn’t sure whether it would end up being something recognisable yet I now believe it to be one of the most recognisable aspects to my design portfolio. When I set my mind towards developing for That Design, everything seems to step up a notch to the point of it actually feeling like a professional company. As time goes on, I want to continue to make it the centre of my design lifestyle online. It’s completely altered my own perception of everything that I do, as I now realise that I can take on a large brief for myself and continue to set myself goals in a dedicated manner. I hope that it shows a lot of self-initiative within my career as a designer when networking with existing designers and agencies.

There are still aspects of my practice that I need to spend more time on and would like to develop further. Such as my illustration skills. I know that I am not an illustrator and don’t have the natural flair with my hand drawing skills, yet I would still like to improve on them for my own personal benefit. I think I will be able to find a fair mix between my illustration skills with my digital skills. I definitely plan to work on some collaborations with some illustrators as I love how a mixed media approach to design work is often the strongest kind. I would also like to improve my knowledge within commercial design processes, such as setting up artwork for multiple kinds of print processes, in particular within editorial design and packaging.

This semester has definitely been more focused in terms of design outcomes in relation to the previous semesters which appear to only have been directed by the process and thought, not the application. I have enjoyed how it has progressed as I am a designer who likes to work on something throughout the whole process to an end item rather than everything being left out in the open. I’m not limiting myself to only having closed endings to each brief as I understand that some things need to have some sort of continuity, but I do appreciate that a lot of this semester has had ‘end outcomes’ outlaid from the start, such as the Dogme ‘95 brief.

“There were times when I was panicking about not finding something that I was 100% passionate about”

With the thought of the Final Major Project always looming near, I know that I have not been able to settle particularly well with a proposal and creative idea that I am able to achieve. However, I feel as though the whole process of working towards a proposal has eventually left me feeling confident with setting myself a long-term brief to work on. There were times when I was panicking about not finding something that I was 100% passionate about or not being able to find something that I was capable of working to based on either skills or the time frame available, but I am glad to be at a stage of confidence within my current proposal; which I expect will adapt considerably as the time draws nearer.

BIBLIOGRAPHY

I stay up to date with a lot of design companies and blogs online through many bookmarks and also with Twitter, Google+ and other social networking sites. The items listed below are notable for having a significant impact on my independent practice work with inspiration, design news, tutorials and blog posts.

Designers and Studios

2XELLIOTT - http://2xelliott.comA+B - http://aplusbstudio.comCreative Review - http://creativereview.co.ukDesign Milk - http://design-milk.comilovedust - http://ilovedust.comIt’s Nice That - http://itsnicethat.comJelly - http://jellylondon.comNick Felton - http://feltron.comOlly Moss - http://ollymoss.comPaul Neave - http://neave.comShiny Binary - http://shinybinary.comSignalnoise - http://signalnoise.comSwiss Miss - http://swiss-miss.comTurner Duckworth - http://turnerduckworth.comTYPO International Design Talks - http://typotalks.comTYPOLondon - http://typolondon.comUnder Consideration - http://underconsideration.com

Web Design and Development

24 Ways - http://24ways.orgBrowserStack - http://broswerstack.comBuddyPress - http://buddypress.orgCeaser - http://matthewlein.com/ceaserCSS Design Essentials - Future PublishingCSS-Tricks - http://css-tricks.comDribbble - http://dribbble.comThe FWA - http://thefwa.comGitHub - http://github.comGoogle Analytics - http://google.com/analyticsGoogle Apps - http://google.com/aGoogle Code University - http://code.google.com/eduGoogle Webfonts - http://google.com/webfontsMobiletuts+ - http://mobile.tutsplus.comNettuts+ - http://net.tutsplus.comPlacehold.it - http://placehold.itTwitter Developers - http://dev.twitter.comW3 Schools - http://w3schools.comWebdesigntuts+ - http://webdesign.tutsplus.comWordPress - http://wordpress.orgWordPress MU - http://mu.wordpress.orgWptuts+ - http://wp.tutsplus.com

Other Visual Resources

Behance - http://behance.netCOLOURLovers - http://colourlovers.comFlickr - http://flickr.comThe Grid System - http://thegridsystem.orgVimeo - http://vimeo.comYouTube - http://youtube.com

Exhibitions and Events

‘Kenneth Grange: Making Britain Modern’ The Design Museum, July 20 - October 30

‘Postmodernism: Style and Subversion 1970 - 1990’ V&A Museum, September 24 - January 15 2012

‘Imaginary Menagerie’ Text/Gallery, October 20 - November 19

‘Type Directors Club Exhibition - Typographic Circle’ JWT Building, October 20

‘TYPOLondon 2011 Places’ University of London, October 20-22

‘Typographic Circle - Rian Hughes’ JWT Building, November 24

Workshops Attended

‘Typographic Workshop: Revisiting Grids’ November 1‘Intermediate HTML/CSS’ November 16‘Intermediate-Advanced HTML/CSS’ December 7

Personal Connections

http://behance.net/joeallamhttp://dribbble.com/joeallamhttp://flickr.com/joeallamhttps://plus.google.com/114646778076160296297http://joeallam.co.ukhttp://www.linkedin.com/profile/view?id=122135642http://sandbox.joeallam.co.ukhttp://thatdesign.co.ukhttp://twitter.com/joeallamhttp://twitter.com/thatdesignhttp://vimeo.com/joeallam

Date post:	27-Mar-2016
Category:	Documents
Upload:	joe-allam
View:	215 times
Download:	0 times

EGRD3014: Independent Practice Portfolio Submission

Documents