Juli Edlin

Some light reading

Building up to the last weeks before final submission deadline for university, I took the liberty of doing a little light reading on some things which I’ve heard of but never took the opportunity to fully understand.

One such thing is SASS - Syntactically Awesome Stylesheets!

Having a nosey through the website… sass-lang.com

I’ve also been playing with some php and mySQL databases to develop my major project membership. Head First php and mySQL book is leading me in the right direction.

Final semester

Hajimaru de masu yo!

I have successfully changed my hosting over to bigwetfish and obtained the domain name Katagami.org. I had wanted .com, but some advertising page had taken it already, which really really ticked me off. Getting .org is almost as good though.

I am working through a tutorial of how to create a basic membership using PHP and MySQL, but it is pretty slow work, I am still trying to get a hang of everything. I know I need to step up the pace and ascend this learning curve quickly!

Hopefully the PHP6 and MySQL6 Bible I took out from the library will help.

The site, Tiny Fluid Grid by the group ‘Girlfriend’ (hehe pretty fun name choice) has helped me with developing the layout of the site and I am in the middle of creating full visual compositions so I have a better idea the direction I’m progressing. I have decided on the site avatar and have started drawing and creating the back-story and logo. Once I get the layout for the site built, everything else will hopefully fall into place.

Listen to the Good Kitty

Week 12

#brazillianwax

This was the Final Week of Semester 1.

Unfortunately I missed all my classes Thursday onward due to a horribly timed wisdom tooth problem.

Live Project

Re-building

I wasn’t happy with the site I produced for last week’s critique, so I got to re-styling and re-building Garvan’s site based on the mock-up I created last week. The design I made is based completely on square-shapes, so the best way for me to build the layout was through 960 grid system.

I started with the 12 column grid system, which Krissy recommended, and she helped me through the basics of push and pull etc. I created some wireframes from the idea.

Wireframes - 12 Grid

Since the website I plan to build has a static layout throughout the entire site, the site only has a single page wireframe; this means it’s so important that the layout acts the way it’s meant to! Otherwise it will ruin the whole site.

But the size looked too small, there was far too much white space, more than I intended. I decided to change to the 16-grid instead so that the content filled the space how I wanted.

Wireframes - 16 Grid

This is the re-size with the grid 16 system. You can see that the images have more room to be seen. It doesn’t do too much for the navigation or text content but it allows more space for the logo as it is in line with the slider.

I changed my mind about the single image layout when I started the build, because of the small amount of photos for certain pages, most specifically Film & Corporate.

The following are wireframes for the pages which need a bit of tweaking; I felt the #text_content needed more space so I increased the width to prevent overflow of text leading to scrolling.

Mozaic Images

When I was looking for pretty ways to display images using jQuery, I found a really cool plugin called ‘Mozaic’. With the coin-slider taking up the top of the page with constant transition of images, I want the front page images not to be static. There is six of them, which is the same as the number of pages on the site, so I thought it would be nice to include an image of each page and have transitional links to the other pages.

New Site Build

I included the navigation for the slider since Chris said that users like being able to scroll back to an image they like rather than waiting for it to transition through. I chose to have square navigation to match the layout.

The logo has been replaced by the new one.

I have the grid layout working and it’s looking almost identical to the mock-up I made in Photoshop. But I’m having trouble getting lightbox to work with my jquery slider. As my design is completely focused around the images in the centre with the idea of being able to click on them and open up a larger lightbox image, it is important for me to get lightbox to work!

Looking for help on google, I found a site which explained the reason lightbox doesn’t work with my coin-slider. It appears that jquery uses the $() function by default, and Lightbox 2 being based on Prototype also requires the use of $() function as well which prevents them from working together.

I tried changing the functions being called by using the code from this website:

http://www.titan21.co.uk/using-jquery-with-other-libraries

But I still ran into troubles - maybe I was doing something wrong. So I looked for a different alternative.

jQuery Slider with Lightbox?

I did some searching online and found that other people have also had the problem with lightbox not working with their slider. I did however manage to find one which works - Nivo-light with Pretty Photo.

Using this new slider I had to completely strip out my coin-slider javascript and css files and re-style the new slider so that it fitted in where the original went. Once the layout was fixed, it was a matter of changing all the images and text for the different pages. This took longer than I imagined, but it was nice when each page had a finished look.

Finished Website

Home Page

I opted to have no text content on the front page, as it is the same content that is in the other pages. I kept the central image a text piece which if you scroll over, shows the logo I created for Garvan.

About

One of the images of Garvan working on a ring, I was going to include in the area where the quote is, but it is also featured in the large slider across the top and I dislike having repeating images showing, so I opted to tone it down and place Garvan’s quote on top of it, which adds interest to the page.

Commissions

Engagement & Wedding

This is quite a simple page with not too much text content, but quite a few photos. I kept the focus on the rings, and when you click on the photos, it shows all of them, as I included the links in the slider as well so that nothing was left out.

Film & Corporate

Since there were only 2 photos for this page, I had to improvise with them to create enough images to fit all of the image boxes. It would have looked silly if I disregarded my layout just on this page. So I took Chris’s advice and had zoom-in and crops of each photo.

I used the dark red from the colour palette in this page as an accent in the typography to match the red in the film images.

Workshops

This was a difficult page to plan, the photos are not exactly matching, but I think I managed to make them work by strategic cropping.

Exhibitions

I used the blue in the text on the exhibitions page to match the colours given in the images. I think it adds a little more to the grey-scale page.

Photos enlarged

I altered the theme for the prettyphoto lightbox, moving things around so that it worked with the content. I kept the theme of grey scale with square shapes throughout the site.

Major Project Proposal

With all the weeks leading up to this, I have started on my Major Project Proposal hand-in. I looked at Gantt charts and started thinking about the content break down of my project.

Game Programming

So, this week has been pretty hectic. With working on DES and Games Programming module at the same time, I have been pretty busy. At last though I managed to get my game finished, complete with loading screen, controls, prologue and three short levels.

I’m quite happy with the result - there are many flaws that I would like to change, and if I could I’d love to lengthen the story to include everything I wanted in the original idea, but that will have to wait until I get some free time.

The finished game is meant to have certain sounds, but I removed some of them so that I could upload here. You can play the game for yourself.

DROID-01 [the beginning]

DISCLAIMER - This is a work of fiction. The names and places used in the game have no connection to any real-life people or places; any similarities are purely coincidental.

Week 11

#thecritique

This week we managed to get some feedback on our current designs for the Live Project. The overall feedback though left us with the impression that we had not really taken in what Garvan’s likes and dislikes really were.

Learning to Listen

Re-iterating the things which Garvan likes: Kraftwerk, minimalism, electronic music, modernist, Dieter Rams asymmetry, ICON magazine.

What is the typographic personality of Garvan’s site?

It was shown over an over as we went through the different sites that serif fonts were not suitable in representing the typographic personality of Garvan - even though they would be what a typical jeweler might use.

Interpreting Needs

Serif or Sanserif?

One of the things I made sure to learn in second year was the difference between serif, sanserif and script. But for a long time I understood it as serif being the fonts with the shaped edges, sanserif the more minimal fonts with straight edges and script fonts looking like fancy handwriting - which is a very simple way of understanding it. I decided to do some research into it and I found a website which gave me lot of information about type.

“When text was written using ink and a brush a stroke would often end with a blob or drip of ink as the brush was lifted from the paper.”^[1]

- Matt Ottewill

This was integrated into writing styles and the Serif type was developed as a formal style of ending a stroke. So Serif implies “craftsmanship”, which gives a fancy, formal or traditional ‘tone-of-voice’ to the message being given.

Sanserif on the other hand, has sharp, clean edges to to the strokes.

^{Image - Difference between Serif and Sanserif [1]}

So in regards to Garvan’s website, the most appropriate type of font to be using would be a sanserif font.

Symmetrical or Asymmetrical?

Symmetry has a special place in design, but is very easy to get wrong. I’m very used to going with an asymmetrical design, or following the Rule of Thirds.

The rule of thirds can be easily applied to designing for the web. Fixed width designs (960 system) horizontal space divided by three, creates three equal columns of 320px. Fluid designs can work through percentages - 33% columns. The challenge faced when applying this to web design is vertical space, which is where subdividing by the Rule of Thirds happens.

Designing for the Web is a book I intend to buy to learn more about the principles of composition.

For Garvan’s site, I believe asymmetrical is most appropriate considering his taste in designers.

Ornate or Restrained?

Garvan specifically asked for minimalism; I took this as a clear sign that ornate was not what he was looking for. When I think of ornate, I think of serif fonts, large swirling expressive lines and gold gilded frames. Restrained is only putting in what is completely necessary. Garvan’s site should be minimal, with a strong sense of shape and space; representative of Garvan’s personal taste and work.

Critique

Other than to put more consideration into the personality and design for Garvan, Chris and Nicklas pointed out small things which we should watch out for, which can make a difference. To begin with: naming of the content - ‘Engagement and Weddings’ or “Engagement & Weddings’ - the idea is to pick one and stick with it, no alternating between them. The same applies to making words singular or plural.

Then there is attention of measure and line height - making the font too small and the width of the content too wide will not only look poor, but will make it hard to read. I’ve tried to aim for a 10 - 15 word measure. Finally, Chris showed us with his measuring tools, the difference a few pixels can make in a design - having set pixel measurements between images, avoiding discrepancies can make all the difference in a design.

Re-Design

After the lecture this week I really wasn’t happy with the design for the site I had given. I decided to go for a complete change in layout and navigation. I created the current mock-up in Photoshop.

The colour palette is minimal like before, but there is more depth to the colours, with a very dark navigation instead of only sticking to pale grey shades.

If Logos were Honest

I was floating around the interwebs looking for inspiration today and stumbled across an article by Yin&Yang. Viktor Hertz’s work of recreating popular logos majority of us can recognise, into a generally honest expression of what the company/product is about. It made me think back to the lecture (week 8) when Chris was telling us that we shouldn’t try to fake an outward appearance; how many companies have done this and made their name by portraying a friendly persona through their websites or products.

These a few of the re-created logos which made me smile or chuckle a wee bit. Read full article: If logos were Honest and see if you can name them all.

 
 

References

1. [Online] http://www.planetoftunes.com/dtp/typography.htm

2. [Online] http://designingfortheweb.co.uk/book/part5/part5_chapter21.php

Week 10

#buildabrand

Brand Identity

This week we we talked about Brand Identity and what it means. When we think of a brand, what comes to mind, just the logo? No. As Milton Glaser puts it, “A logo is the point of entry to the brand” not the brand itself.

Brands are the personality, service, what the customer thinks and feels about it.

“Products are created in the factory, Brands are created in the mind.”

- Waltor Landor

‘Brand’ is the idea that is put into others’ minds when they think about the organization. Chris took us through different companies and how their brands are viewed by the general public through the things that they do.

The Live Project

Garvan Traynor, our client for the Live Project came to talk to us this week.

It was really interesting for me, since I have never taken on freelance clients and had such a thing as a client meeting. I feel a little intimidated by the work needed within the timespan of 5 days as I haven’t been website designing and building for  a while - since before my placement year. In many ways I think I am weaker than the other students in the way that my placement year took me away from web design for an entire year while I studied business. So the idea of suddenly working for a client with my current abilities is making me doubt myself.

Garvan went through a presentation of his work, what he does, his prices, his personal likes and dislikes etc. I was torn between the fact that he said he would like a minimalist design and likes the colour grey and the lecturers insisting we take note of his interest in Electronic music.

Electronic Music

This is his favourite band, Talking Heads, and the album he likes. He mentioned that he wouldn’t really like bright colours, which makes me conflicted as whether to use the electronic music theme or not.

But maybe I am over thinking this in terms of what I’ve found visually. Electronic music can be based on short dotting sounds and rhythmic beats. Thinking about this physically and looking at Garvan’s work and examples of designers he likes gives me a good idea of a style that is simple but blocky.

I found a site called Analogik, which is an electronic music organisation. I also took the time to listen to some electronic music to get a feel for the style.

Kraftwerk

Garvan said that he liked Kraftwerk, and at first I thought he meant ‘craft work’ as in handy crafts, but after we were shown that they are an actual group, I decided to do a bit of research into them and their work to see what it really is Garvan likes about them.

The bold red background almost hurts my eyes, but I sort of understand from the typeface and the moving pixel characters gives me an idea of the style.

 

I found the catalogue of the album art interesting. It showed a video starting with these block numbers, which I really liked for some reason. I think it is the shape of them combined with the fact that they are only outlines so you can see all the other numbers behind which are arranged almost arbitrarily in different sizes.

The sanserif type compliments the block lines from the second image. It’s a very pleasing minimal effect. The last image “The Man Machine” reminds me of the posters by Adrian Frutiger with his typeface ‘Frutiger’ on his posters with the selectively placed lines cutting across the image.

Inspirational Designers

It was mentioned that Garvan was interested in the design work by Donald Judd and Dieter Rams. I took the time to do some research on their work to better prepare myself to design for Garvan’s style.

Donald Judd

While working in New York in the 1960s, Judd became known as one of the key exponents of ‘Minimalism’, strangely though, it was a label that he strongly rejected. He shared many of the principles identified with Minimalist art — the use of industrial materials to create abstract works that emphasise the purity of colour, form, space and materials; however, he preferred to describe his own work as ‘the simple expression of complex thought’.

http://www.tate.org.uk/modern/exhibitions/judd/

Donald Judd rejected the ‘tradition of artistic expression’ and ‘craftsmanship’ by his use of industrial materials like Plexiglas, sheet metal and plywood; these were his foundations as he explored the conventions of volume, interval space and colour.

He encouraged concentration on the volume and presence of the structure, including the space around it so as to draw attention not just to the object itself but to the relationship between the object, the viewer and it’s environment.

Dieter Rams

“I was influenced by my grandfather who was a carpenter. And he was a specialist for surfaces, and I learned that from him but I had in mind to study architecture.”

- Dieter Rams

Starting the Project

Logo Design

We were given 3 templates for our logo design, choice and extras of colour pallet and typography. I took a start with the logos and immediately hit a block… where do I start?

I looked at Garvan’s work and took inspiration from some of his abstract metal pieces in his exhibition work. I want to create a logo which looks like the metal in a shape of a GT (Garvan’s initials). I started drawing in Illustrator CS4, a basic idea, and the rest just went from there.

These are my first two logo ideas. The first is supposed to be GTJ (Garvan Traynor Jewellery) with the G being a ring shape, but I think I like the idea of the second one better, simply because I think it is more like something Garvan would like.

I also started looking at Braille and Morse code as ideas for a Logo design, since their basis is rhythm and texture, which is similar to electronic music. I thought it might be something Garvan would like. I found alphabets online for both and started creating ideas with them.

This is the international Morse Code Alphabet:

This is Garvan’s name in Morse Code:

Colour Palette

I started thinking about what Garvan would want in a colour palette. The following palette is taken from the “talking heads” photo above. To be completely honest, I think this is a hideous colour scheme, probably because the colours together don’t quite fit somehow.

When asked what colour Garvan would like, he said “does grey count?” So obviously making the site psychedelic with neon colours would be the bad route to go down. However, I do believe a little bit of colour in a grey-scale palette can work really well, especially if the colour is taken for small accents in type.

These are a few of the other colour palettes I have been considering. They are all on a general grey scale, but I liked the idea of some of the greys being a little blue in hue.

For the one below, I added red, since a two or three of the pages have a lot of red in the photos he has given. Black, red, white and greys are similar to the colour palette that Kraftwerk has been using in their recent site.

Layout and Build

Websites of Interest

To get an idea of what I should design in terms of a ‘minimalist’ style website, I researched some other sites which are based on this idea. This also helped me gage what I should do in terms of a colour palette.

Davroc Interiors

This site I think represents a really lovely minimalist style, working along with the grey scale Garvan has in mind. The pages are sleek and simple, the images take the focus, with a neat effect that when you hover over them, they become full colour. I really like this little addition of interactivity with the photos, it just adds something really nice to the overall feel of the site. I’d like to do something like this for Garvan’s site.

Media Flex

The layout of this page is similar to the one above, but the colour scheme is changed completely by the choice to go with dark background and white text; this makes the colours of the images really stand out, and the bold white typography draws the eye towards it then down the page.

I think this is a really nice minimal page layout, but I’m not sure if the colour palette would be Garvan’s taste.

Time of Eve

This is actually the site of one of the new anime shows I watched recently: Time of Eve. It’s based in the future where androids meet the needs of humans like servants, but it has a warm underlying moral core behind the story which really makes you think. I love how the series is based on future emerging technologies such as AI and Augmented Reality. If you have any time, you should go watch it since it’s only 6 episodes long. A movie is coming out for it soon too.

One thing I should say is that this is a flash site. It has lots of visual effects and neat image and page changing. The moving background is a little distracting, but I like the layout and total effect of the site. For obvious reasons besides the fact that my lecturers would kill me - I will not be building Garvan’s site in flash.

I like the layout for main content, with a large sliding image on the left and main content on the right. I perhaps like this site more than I should because of the fact that I really enjoyed the series.

Quadrifolia - Sebastian Brink

This site is the personal portfolio of Sebastian Brink. It has nice transitions between pages, created by javascript coding. I like the bold colour choices and the contrast between the main content and navigation.

I also enjoyed the quote given.

“The difference between good design and great design is intelligence.”

- Tibor Kalman

I think the simplicity of this site is a good representation of what Garvan is looking for; I especially like the clear sanserif typography.

I will be taking these site layouts into consideration when creating my wireframes for Garvan’s site.

Wireframes

I started playing with wireframes to figure out what sort of layout will look best for Garvan’s site. I like the idea of the photos being the focal point, so building around large images is my main interest.

Wide Navigation, Wide Footer:

Front Page: Central Slider, Image Links, No main_content.

Main central Logo, slider/images left, main_content right:

GTJ Design

This is the current design I have come up with for Garvan’s website. It has a fluid layout so it resizes in a smaller browser, but the images don’t unfortunately; because of the slider, they have to be a fixed size for the transitions to work.

I’m not completely happy about this layout but I want to hear some feedback by the lecturers so that I have a better idea of what is good and bad, so I know how to improve.

HTML5 forms and CSS3

I’ve been thinking about the forms for membership in the database I could be creating for the Katagami Design site. At first I was considering php forms, but I found a site called “24 ways to impress your friends” and was reading about HTML5 forms.

Week 9

#ninetofive

This week, Chris was away and Nicklas took the lecture. He made things interesting like Chris did last week by giving away stuff for good answers - but with a twist - they were random items he had found in his bag before the lecture!

Fundamentals of being a Designer

Nicklas took us through the process of design and showed us the different stages. He kept reminding us that the most important thing to know and remember about the Fundamentals of being a Designer is that - It’s ALL about you; your reputation precedes you. Be known for what you do and who you are. Help other people (good karma) and ‘Don’t be a DICK’. Deliver on promises; under promise but over-deliver. Keep working even when there is no work expected.

We were told not to do Spec Work as it doesn’t lead to anywhere.

These are the seven stages of designing and how I can apply them:

[STAGE 1]

Research & Discovery

Identify competition, establish functional baselines for your design, the platform on which it will be built. Clearly define audience.

[STAGE 2]

Planning

Set up a team (if needed), Define the scope of the project; Time it will take to complete, set a deadline and budget. Create a Project plan, establish a schedule (Gantt chart), set up to-dos and milestones.

Make sure to think about contracts, terms and conditions.

[STAGE 3]

Design & Feedback

This stage is a cycle of design - feedback - design to continually improve. Be convincing and sell the project/product, consider focus groups, usability testing and be sure to take feedback seriously.

Set up a staging area and systems, for example naming files with lower case and underscores. Think of version control and most importantly be sure to Back up Work!

[STAGE 4]

Build

This is an iterative process:

Build - test - Build - test - etc…

Have a Question and Answer test. Scenario A - buy a product. Scenario B - register as a user. Prioritize what needs to be done and fix the most important issues first.

[STAGE 5]

Soft Launch

Soft Launch is important for making sure everything is working completely, to do any last minute fixes before the final launch. Final testing can be done during the soft launch.

Get sign off on Delivery.

[STAGE 6]

Final launch

Final launch completes the project. The deliverables are presented and the work is ready to the public.

[STAGE 7]

Post Launch

 Post Launch meeting (with client | team), organise a maintenance plan, invoice, a note on time and money. Establish hourly or daily rate, who pays for research and development. Be flexible, track time, mark-up on buying.

MPP Research

Printing Large

One of the main points of my major project site is the ability for the users to download and print the patterns available. Some patterns can be a few feet in length; they are templates to place on fabric and cut out to create clothing therefore have to be as big as the person they are being made for. So, for this I have been looking into ways for a large image to be printed across multiple pages.

I found an application created by Apple called ‘tiler’ which can scale and print PDF files on multiple pages (which helps if I make the patterns into pdfs)

http://www.macupdate.com/app/mac/20637/tiler

However, I’m not sure about the fact that it’s ‘MacUpdate’, whether it’ll work properly for PC users.

I did find a site called ‘blockposters’ which allows you to upload your image which it then splits into separate pdfs which you download and print off. The downside to it is that there are set print sizes (obviously because it’s meant to be used for poster printing) but I would want the print size to be exact to each pattern.

http://www.blockposters.com/default.aspx

I think I will look into how this website works and see if I can re-create it for the site itself so that users can print out directly from the site without going through an external application.

PHP and Databases

I’ve been considering adding membership to the Katagami Design site. In my cosplay questionnaire I asked whether responders would consider signing up for membership and received mixed opinions, however, if membership gave additional functionality responses were more positive.

So I pulled up the book recommendation from a previous week about PHP Solitions, as I remembered it said about databases. I think I’ll definitely buy the book for working my way through database programming, since I do not have much experience with it.

Book to buy:

PHP Solutions: Dynamic Web Design Made Easy

I also found an article by Kevin Yank which I think could help me as well:

http://dev.mysql.com/tech-resources/articles/ddws/

Week 8

#itsonlywords

This week we were told about the Live Project coming up in week 10. Nicklas was absent, so Chris took us through what we’d be doing.

Our client will be a Jeweller called Garvin. We will be provided with content including images etc, and will be expected to work on the branding and design of the website.

Designing With Words

Words are a Design Element; Typography plays a big part in most websites. The use of type and hierarchy of type can make a simple website more appealing.

“Web Design is 95% typography”

Oliver Reichenstein, iA

Chris re-phrased the quote:

“Web Design is 95% words”

Chris

Though some websites are being designed with graphic elements in the forefront, words will aways be the most important part to a website. It communicates the personality of the website and what it wants to do for the users. So it is logical that a web designer should have a good understanding of shaping written information: typography.

Blaise Pascal said:

“If I had more time I would have written a shorter letter.”

Writing succinct content is essential to keeping the readers attention. It takes time to condense written information while still keeping the full meaning, but when thought is put into this we have quality rather than quantity.

In modern technology, we have to have the ability to get our point across with a limited amount of characters or time; text messages and twitter.

“Making the unmissable, unmissable.”

BBC iPlayer

Hierarchy of type

Web designers are familiar with establishing hierarchy on a site through mark-up; using headers <h1>, <h2>, etc. and other tags like <b> and <em>, but since we know that the majority of content is text, we also have to think of the aesthetics of hierarchy. It is important to understand how to reinforce hierarchy through typography.

“A clear understanding of hierarchy results in more beautiful, meaningful, and communicative designs that better serve their audience.”

Frank Chimero

Stages to develop hierarchy:

1. Communicate hierarchy through the order in which the text is presented.
2. Emphasize the most important element with a weight change.
3. Introduce a new type size to the hierarchy - varying the vertical spacing provides a bit more structure.
4. Add some variety by varying the alignment and spacing, and introducing multiple sizes and weights.
5. Use colour to guide the eye around the composition.

Functional Copy - Lernin 2 spiel

Something that every web designer should do is, ‘learn to spell’. I personally have avoided ‘txt speek’ a lot of my life, even while texting ironically enough. With my fondness for books since I was little; I really love word play and thoughtful puns which make you think about the personality behind the product, and in a way this makes people associate themselves with particular products over others. Example, Chris showed us the differences between the marketing of Volvic vs. This Water.

A good website I stumbled across which illustrates the point of thinking about your font selectively (and specifically not to use Comic Sans EVER!) is http://www.comicsanscriminal.com/

The website is well designed, simple and effective, with clever wording, colour and typography used to emphasise it’s point.

Macrocopy - Establishes tone, sets personality

Microcopy - Reinforces tone, satisfies a function

Major Project Proposal (MPP)

We were told about the Major Project Proposal for the first time this week, which was a little scary. I’m so glad that I’ve finally come up with what I plan to do, even if it feels ambitious and like a lot to do. I just remind myself what Chris said at the beginning of the year, “Reach for the Stars and you might just get the Moon!” So that makes me feel a bit better about picking something which is out of my comfort zone.

Here is the breakdown for the MPP:

1. Lift Pitch (50 words)
2. Summary (250 words)
3. Research Outcomes (500 words)
   • Research Analysis
   • Target Market
   • Techniques/Technologies Used
4. Conclusion (200 words)

I intend to include a bibliography as requested in the lecture with some first hand research conducted. Hopefully I can talk to the people I know who cosplay and see what their opinions on my idea are!

MPP - thinking of a name

Now that I finally have a plan behind my Major Project, and I’ve started getting feedback from cosplayers about the idea, I feel that I need to come up with a name for it, so it will catch on once it’s created.

I’ve been thinking about things to do with cosplay and patterns and design and what would be easy to remember, possibly catchy yet still relevant to it’s subject.

Cosplay originated in Japan and is still quite a Japanese themed hobby, so I think it would work to have a Japanese word in the title. I started using translating “design” and “pattern” into Japanese and having a look at the phonetic pronunciations.

I had so many variations:

1. Sekkei - 設計 - Design
2. Ishō - 意匠 - Design
3. Ito - 意図 - Intention
4. Moyō - 模様 - Pattern
5. Ritsuan - 立案 - Planning
6. Zuan - 図案 - Design
7. Zugara - 図柄 - Pattern
8. Zushiki - 図式 - Design
9. Shikō - 志向 - Oriented
10. Tsukuru - つくる - Making

In the end I decided to go for “Katagami” is the literal translation of “Paper Pattern”.

Week 7

#build

This week the lecturers were away at Build, since I couldn’t attend as I didn’t manage to get tickets, I passed on the networking and decided to go to Dublin to attend an anime and games convention - Eirtakon.

I have been attending Eirtakon for a few years now and it’s the largest convention of it’s kind in Ireland. I get to browse the trader’s hall, meet a lot of people and take photos of people in their cosplays.

Then the idea came to me, after weeks of worrying about what I could do for my major project and feeling at a loss for any inspiration. There are so many people I know who enjoy cosplay (myself being one), and a lot of them want to be able to make their own costumes, but don’t know the basics of sewing and patterns. What better way to make a solution easily accessible than to build a website teaching them how.

First of all, just to clarify, here is some background information on cosplay.

What is Cosplay?

The word Cosplay comes from an abbreviation of ‘costume-play’. Originally, the term was used solely to refer to Japanese anime and manga (Japanese comic book) characters, but now cosplay is used to describe “the hobby of dressing-up as a character from any game, book, film, comic, graphic novel or TV series, regardless of the country of origin.”^[1] Cosplay costumes come in all shapes and sizes from simple costumes which could be considered casual-wear to extravagant full body fur suits and detailed “mecha” suits.

     

^{Photos from Cosplay.com[2]}

Unlike the fancy-dress of Halloween or other seasonal events, cosplay is intended to precisely imitate a particular character; therefore, when in costume, a cosplayer will usually put on the typical mannerisms and body language of the character - this can be considered a form of role-play.

Professional Cosplayers

For some, cosplay is not a hobby - it’s a profession!

In Japan, they have what are known as professional cosplayers, or cosplay models/cosplay Idols. These are cosplayers who have developed such skill in their costume making and presentation to have built a good reputation and have gained quite a large fanbase online.

An example showing that the art of cosplay is becoming more serious, ‘Firefall’ developers Red 5 Studios have signed video game cosplayer Crystal Graziano up to a one-year sponsorship, where the developer will be footing the bill for twelve months’ worth of cosplay. Whichever character or game she’s working on, they will pay for the costumes, the tools and the photography.

In return, she’ll be “acting” as Firefall, character Mourningstar at press and community events for the 12 months. The live-action costume (and others like it) have been designed by Hollywood effects man Steve Wang, who among other credits is the man who built the original Predator.

Larger anime conventions host cosplay competitions for the best cosplayers to show off their work (entrants have to have made their own costume). The local Eurocosplay championships are hosted in London each year and the best cosplays from other conventions are nominated to enter.

Cosplay Websites

There are many sites online where you can buy cosplay costumes; cosplayfu.com, cosplaybuy.com, milanoo.com, cosplayshow.com just to name a few, and even eBay has many sellers who have costumes for sale, or are willing to take commissions.

cosplay.com is a popular site for American cosplayers to upload photos of their costumes to share and critique, and the forums are filled with people asking advice on how to make particular props and accessories.

Dress-patterns

From experience I know that many people would prefer to be able to make their own, but do not know where to begin; the big issue being, design-patterns for cutting fabric.

Project Idea

I would like to build a website which hosts simple and popular patterns which can be downloaded and printed. Sewing tips, tutorials will be given with each pattern so that beginners can become more skilled.

Also, since the Cosplay community in Ireland is quite social, a membership option for the website will allow members to post photos of finished costumes they have made using the patterns.

Pros

• There is a large market for this idea.
• I have connections with the anime conventions and cosplay communities in Ireland.
• It is something that I enjoy personally.

Cons

• I do not know much about php and databases and creating them for a website.
• Some people prefer to buy their costumes, not make them.

Cosplaytutorial.com has a similar idea to what I plan to do, except that it is more of a database holding links to other sites for help. All the pages are made my others, so there is no standard layout, and content can be out of date.

I want to include content like this in my site.

Colour Palette

As I previous mentioned, I decided to use this anime picture (Shakugan no Shana) as a basis for my colour palette. I uploaded it onto Adobe’s Kuler site so that I could create a swatch palette from it and I will be using the following colours for my research blog.

References

1. Paul Jacques, 17/02/2011, A brief History of UK Cosplay [MangaUK], [online]. Available: http://www.mangauk.com/?p=a-brief-history-of-uk-cosplay/ [30/12/2011].
2. Arielle Somberg, 19/06/2010, Cosplay.com, [online]. Available: http://www.cosplay.com/photo/2596122/
   PikminLink, 09/07/2007, Cosplay.com, [online]. Available: http://www.cosplay.com/photo/1166016/

Week 6

#thejourney

Yesterday I was looking for this image:

R e a s o n? Well, I was feeling a bit emotional and remembered seeing this on an image site, and thought about the typography of the image and how our brains recognise words associated to ourselves first out of the seemingly random jumble of letters.

Again, by sheer coincidence our lecture today happened to be on something related - Self Actualization and The Journey. It was the Standardista’s test run of their Build conference presentation.

The analogy we were given was that we are all on a Journey, much like Link in the Legend of Zelda; but in order to progress in our journey, we have to learn from masters in order to better ourselves. Once we have been taught by wise masters and ourself become a master in that area, we must move on to learn from another master in a different area, and so the journey continues. Slowly as we become masters, we can have the possibility to take on pupils of our own.

If we didn’t have this journey, we wouldn’t progress and become better. There are always ways in which we can learn and improve ourselves; that is the journey, not only just in University, but in life.

But just for a reference, I enjoyed the Zelda analogy.

Getting back to the first image shown above. I stumbled upon a website through this image - Thought Freedom -which I thought was quite an apt thing to find after today’s lecture.

A Quote from Ben Bosley I found online through this site:

“Whatever you think you are, you’re always much more than that.”

Chris Armstrong

We had a guest lecture from Chris Armstrong as well this week, he is a graduate from Viscom (Visual Communication) in Belfast. He talked to us about web typography and how it is changing, that there is a need for “Better sites with better type”.

We discussed the issues of using Lorem Ipsum as a filler for websites whilst designing with no content; real content is added in later, but may not sit the same way as intended. We covered designing for different devices which people view the web on - smart phones, tablets, etc. Would it be feasible to design a website which would work for most devices or have a separate website which is mobile specific? I had covered this question in my research on responsive web design, but it was good to hear the options in lecture.

He mentioned the site typecast, and how to use it.

BOIKZMOIND

This week we had the pleasure of being able to watch Gavin Strange’s documentary film BÖIKZMÖIND about the single-gear bike scene in Bristol with the VisCom students at the Belfast campus. It was really well done, and quite humorous at points. I enjoyed watching the scenes at the supermarket, and it actually made me want to go cycling with all the passion and enthusiasm the cyclists showed.

BÖIKZMÖIND - A Fixed Gear Bike is… from BÖIKZMÖIND on Vimeo

Typography

After last week’s lecture, I have been considering the importance of typography on a webpage. In many ways, a good typographic design can really define a website. Like Chris and Nicklas showed, a very large font can remove the meaning of the words and change the meaning into the form and shape created by the type itself. Well thought out typography can create a character or emotive feeling in the user.

An example of this is Tim Potter’s portfolio website: http://tejpotter.com/

The typography is laid out so that the type leads you down the page on a journey of learning who Tim is and what he does. With added graphic elements which tie into the type given, it’s an aesthetically pleasing outcome (unless you absolutely hate to scroll - but I digress).

Another example of typography I find quite amusing is this video made with the ending lyrics of the game Portal. It takes the graphics and original typeface of the game into account and has a few secret sentences you wouldn’t notice your first time watching through based on references from the game. It’s quite clever.

Unfortunately it’s not something you’d understand really if you didn’t play the game. Unless you’re particularly fond of science and cake.

Week 5

#typemasters

While looking over flash games in COM602 today, had a wee browse onto this website: Kern Type, the kerning game at the recommendation of Kristina Reilly. It’s quite fun and I had fun “achieving pleasant readable text” on the screen.

Out of pure coincidence or not, our lecturers Chris and Nicklas educated us in the ways of the “type masters” in the lecture on Thursday. Following this, I thought it was about time to brush up on my type techniques, so I did a bit of research on the masters mentioned in the lecture.

Adrian Frutiger

Frutiger experimented with invented scripts and stylized handwriting during his childhood. His early interest in sculpture was discouraged by his father and his secondary school teachers; instead they encouraged him to work in printing. Though in the world of print, his type forms are still influenced by his love of sculpture.

This poster was created using his self titled typeface, “Frutiger”.

Wolfgang Weingart

Weingart is an internationally known graphic designer and typographer. His work is categorized as Swiss typography and is credited as “the father of New Wave or Swiss Punk typography.

Swiss typography was founded on the teachings of the Bauhaus. The use of grid systems was the key to the logical disposition of type and images on the page, along with sanserif typefaces for clear, functional communication.

Erik Spiekermann

“I have been suf­fer­ing from Typo­ma­nia all my life, a sick­ness that is incur­able but not lethal.” 

Erik Spiek­er­mann

Spiekermann is a German typographer and designer. He has designed many commercial typefaces such as: Berliner Grotesk, Lo-type, ITC Officina Sans, ITC Officina Serif, FF Meta, FF Govan, etc.

Khoi Vinh

Vinh was born in Saigon, but immigrated to America when he was three. He earned a bachelor of fine arts degree from the Otis School of Art in Los Angeles studying to be a painter and illustrator; however, his interests were drawn to graphic design and interaction design. He is now the director of NYTimes.com.

This is his personal website, Subtraction:

Jason Santa Maria

Jason Santa Maria is a Graphic Designer, his design sensibilities are “heavily inspired by traditional print design and a deep love for typography.”

Paul Rand

Rand’s work is characterized by simplicity and a bauhaus approach to problem solving.

Mark Boulton

Web-safe Fonts

Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When designing a webpage, this needs to be kept in mind, as using a font on the site which a visitor doesn’t have, the font will render differently (and often unattractively) the visitor’s screen.

That is where web-safe fonts come in, a set of fonts which should render properly on all web devices and be readable by users.

The following are some examples of using web-safe fonts:

However, this doesn’t help when it comes to making your typography unique and using a font which you really want to use. This is where sites like typekit come in; the lecturers recommended using typekit to get around the web-safe font problem.

It was interesting for me as I have only ever used fonts which are generally available on most computers. The lecturers recommended choosing a specific font to make our own, and that it is a good idea to sign up for a site which offers you many fonts, as you can really use it to your advantage with designing typographically for clients, and the charge from your clients will cover the expense for signing up.

I’d like to try typekit and see how things go, maybe I can improve my typography skills by widening my typeface library.

Grid Systems

I hope I can learn a bit more about grid spacing too. Previously I had been working with a 960 grid design on my personal website since second year, but maybe I can learn different methods and designs and develop a new style of designing from what I used before.

“From all these experiences the most important thing I have learned is that legibility and beauty stand close together and that type design, in its restraint, should be only felt but not perceived by the reader.”

- Adrian Frutiger.

Influential Designers

On the topic of typemasters, I started considering who are influential designers of the world? I found an article from the fast company which had in it a cool graph of what they considered the top 50 most influential designers.

Across the top were their field of design; information, interactive, graphic, fashion, environment, architecture, product/objects and transportation in order of virtual to physical. Then the scale down the side was ‘Thinker’ - ‘Maker’.

It was interesting to look at designers I recognised such as ‘Stefan Sagmeister’ and see how they were ranked in terms of thinking-making.

Some of the designers I haven’t heard of before, but I’d like to look through them and find out a bit more about each.

Recommended books

1. My Way to Typography
2. Thinking with Type

For something completely different, I saw this advert today and thought it was quite entertaining…

It made me think back to what Nicklas said to me in the lab about perhaps basing my final project on something regarding saving energy and an animated short film. Maybe not to do with global warming as I would dislike to follow too closely in the footsteps of Small White Bear, but saving the Earth through environmental friendlyness has never been too far of my mind (I love NATURE <3).

I think I’ll look more into what I could do with this.

Week 4

#contentmix

This week in the lecture we were quite politely given a bucket of water over the top of our metaphorically sleeping heads with the unannounced Critique - It is about time I start stepping up the pace!

Though my curiosity burns to know what Chris meant when he said he’ll “go Godzilla” on our asses, I’m sure I won’t need to sit around and imagine for much longer if I don’t show research literally exploding from this page in the next few weeks.

Content Mix and Strategy

Content on a site is not “random”, it should have a clearly defined purpose; a well thought out content mix and strategy that will appeal to your target market. Things to be considered are the tone of voice, variety of content types, frequency of updates and giving thought to pacing through the written word.

An example: What is the difference between ‘This Water’ and ‘Volvic touch of fruit’? They are both bottled water with fruit flavour, but it’s the words on the bottle which illustrate the market each is geared towards.

‘This water’ has a quirky tone of voice which you can tell through it’s line, “this water is made from fruit and clouds”.

“Volvic touch of fruit” seems to be targeted towards older people, or perhaps sporty types with it’s line “Fills you with Volcanicity”

So, my research diary is written in the tone of voice of my personality, and the content is planned research for my major project proposal.

Getting over the ‘upload’ hurdle

Looking at the IMD stats page does instill a rippling feeling of shame in my stomach when I see the other years clearly taking the biscuit when it comes to uploaded pages. So to remove any shred of doubt that yes, I indeed deserve to be in final year for being a hardworking individual, I have taken the first step by getting rid of that ugly red box and replacing it with an… unfortunately almost equally ugly tumblr page… however, fear not, I will figure out the code and somehow change it to my own design in the near future.

In the lecture we discussed the importance of putting thought into developing the content of a site as the content can define the people who follow it. Tone of voice, variety of content types, frequency of updates and pacing were mentioned. We were reminded that each of our blog’s tone will be unique to our individual personalities and style and of course our major project idea.

Attempting to Re-design tumblr

With uploading my pages, I thought I might as well take a hand to re-designing my tumblr page. Currently I’m using the theme ‘minimalist’ as it is the cleanest looking free theme. I want to make it more my own somehow.

Minimalist theme:

I had a look at tumblr’s help page on creating a custom HTML theme and found myself at an absolute loss for what to do. I think it would work best to have a look at what other sites I can take inspiration from before working on this more. I have also taken a liking to the font ‘Cufon’ for the time being. My sentiments when tasked with attempting to change tumblr are:

uuugh…. it’s so ugly….

I will re-create it in my own style…

somehow =_=

Week 3

#hurryback

The beginning of this week was taken up mostly with my research concerning ‘Future Emerging Technologies for Multimedia’ and my proposed 3 topics to look at. I had a little browse through the topics chosen in previous years and deliberated my ideas.

I’ve always been interested in games and Human Computer Interactions (HCI) linked to them. With project Natal being released as the now known Xbox Kinect and the previous introduction of Nintendo Wii to the market, the idea of being more actively connected to the interactions with a game and console are becoming more and more desirable. However, it has been an interesting thought that has been floating around for some time as to whether future games will emerge where the only controller is your brain and your thoughts - computer neural interface.

Missing Lecturers…?! (joking)

After Graduation

The Standardistas were away this week, working hard with what they do best. Instead we had the unusual pleasure of Tim Potter and Gabriel Muldoon giving us some advice for persuing a career in web design. Tim and Gabriel both being graduates of IMD, they gave us a good idea of what to expect and how to really market ourselves after graduation. Chris and Nicklas have been through with us a little about what we should be charging professionally and Tim and Gabriel just reinforced the message into us.

Gabriel Muldoon

Seeing as this was the first time meeting him, Gabriel gave us a run-through presentation on himself, what he was like as an IMD student and what he did after graduation.

It was nice to have a look into Gabriel’s work, since he said himself he was more into the graphic and illustrative side than anything (which is how I feel myself). After graduation Gabriel went to work for a company, but after a few years decided he wanted to go freelance.

Since then he has worked for many clients including NI Water Services, Jameson, Ulster Weavers, POD Dubai, AD Haus and Almac.

He currently works with Barefoot Design which is a digital agency. He showed us his work with them on a viral campaign for SJ Boutique, ”Can you keep a secret?”

Charging Clients

Gabriel recommended that as a graduate we should be charging between £15 - £65 an hour from clients, and recommended that we shouldn’t charge less than £15 an hour.

Really though, a few of us were a bit dubious about what to be charging clients. Some of us don’t feel comfortable charging such a high amount, and I guess I understand the feeling - worrying that the work produced might not be up to expectation, worth less or more than what is charged. I’ve only had two clients myself and they were family friends, so I made the sites out of experimentation rather than being paid. I think as Tim and Gabriel made it clear, starting out, charge what we feel is comfortable but also what we think is worth our time, and built from there; obviously this is dealing specifically with freelance work.

It was kind of scary when they said that some top designers charge thousands of pounds for a site!

Meetings

Gabriel said that it is best to meet up with the client in person to present your work; that way you have a choice in the way your work is presented. I would hate to send my website to a client and think they’re trying to view it in IE… Jenne told me she had an experience like that with one client who was insisting that the site she built wasn’t working, when they met up, Jenne realized the woman was using IE6 and promptly fixed the issue.

Contracts

Tim and Gabriel mentioned that it is important to think about contracts when working with clients; and the liabilities a poor contract can cause. They said the contracts should be kept simple, and most importantly to think of the time-scale it would take you to make the site; give enough time!

Gabriel mentioned that he used to have trouble getting payments from clients, and then it became a hassle chasing up late payments. Now he insists on a 10-30% deposit, which I think is a good idea. I don’t think I would feel comfortable asking for more than 30% deposit (Gabriel said that some people ask as up to 50%!) 

Unfortunate…

One thing which definitely bothered me this week was the fact that I didn’t have the chance to talk to Gaby and Tim in the lab sessions on Friday as I had to go to my BEI graduation in Belfast instead. Not that I didn’t enjoy getting to wine and dine with the rest of my graduate class, but I wish I could have gotten a bit of insight from Gabriel as someone who is also interested in illustration.

Week 2

#thefluidweb

The web is fluid… What does that mean, you say?

Well, take a glass of water (representing a website) add a little Ribena (style and consideration) and you have created something very tasty and refreshing! (in a metaphorical way)

What I’m really trying to say, is that despite the browser or device, the way the web should move is like water; changing shape and filling the vessel it is poured into. Chris and Nicklas demonstrated this nicely in their lecture this week when they tested their “fluid web” presentation on the class. They also touched on the concept that design should compliment and add to the content.

I enjoyed the “practice” lecture, because the information they have taken the time to share with us is what others pay hundreds of pounds to hear about. It’s nice to be learning from people who are doing what they teach.

Responsive Web-design

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must accept the ebb and flow of things.”

John Allsopp, A Dao of Web Design^[1]

On the topic of the-fluid-web, I thought it would be sensible to research responsive webdesign and learn a bit more about it. I’ve usually only build websites with fixed size, but I’d like to be able to do more than that.

The lecturers mentioned Ethan Marcotte this week and when I searched responsive web design his name kept cropping up in articles and websites. I found his articles “Fluid Web” and “Responsive Web Design” interesting reads and it really just emphasised what we were told in the lectures.

In the article “Responsive Web Design”, Ethan says - “Our work is defined by it’s transience, often refined or replaced within a year or two. Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we’ve become incredibly adept at doing so.”

I know the basics of re-sizing when it comes to text but using it with images, I found a website called ‘Unstoppable Robot Ninja’ which helped me understand; created by Ethan Marcotte.

This is a nice example fluid web-design, but you can see the limitations of the fluidity when the resolution is below 800px by 600px with the cropping of the logo illustration and the navigation text-wrapping:

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

Fluid 960 grids

I found this website which helps when creating a 960 Grid System - except it’s a fluid grid system! I have used 960 ratio in some of my previous research diaries, (but not actually used the grids themselves) with div containers, float-left, float-right and the 960 pixel widths. This was probably not a sensible way of creating a layout, but it gave me what I wanted visually so I never tried to change how I worked.

The way forward

In the opinion of Ethan, “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” He recommends that as designers rather than limiting our content into “disparate, device-specific experiences”, we can progressively improve our work within different viewing contexts.

Just like Chris said about thinking about water (content) filling any vessel (device), as designers we should build in the fact that so many devices are used today to view the web.

That’s not to say that content cannot be device specific, for example if users do not require as much information on a mobile site as for a desktop, then serving different content would be suitable.

However, the idea is to be thinking for multiple devices; where design content can be viewed along a gradient of different experiences. Responsive web design allows “design for the ebb and flow of things.” 

References

1. Ethan Marcotte, 25/05/2010, A List Apart: Articles: Responsive Web Design [A List Apart], [online]. Available:  http://www.alistapart.com/articles/responsive-web-design  [11/12/2011].

2. Ethan Marcotte, 03/04/2009, A List Apart: Articles: Fluid Grids [A List Apart], [online]. Available: http://www.alistapart.com/articles/fluidgrids [11/12/2011].

Week 1

#thefinalcountdown

After experiencing a year without my winter, courtesy of Florida weather, I am back to Ulster University to final year and “the final countdown”. Essentially 2 semesters of hard work, sweat an sleepless nights, hopefully.

I would like to start really getting into my dream ideas and working on things other than the norm, so that I can express myself fully towards the direction that I would ideally like to work towards - animation.

Research Cow

In the lecture, we were told that our research diary has to be like a ‘research cow’. The metaphorical research cow eats the grass, then makes the milk which makes the cheese - this means, we research and taking in lots of information (grass), we keep the good bits that we find and turn it into cheese.

I will keep this in mind for the following weeks!

Inspirations/Motivators

Jumping into work directly after so long being without a proper schedule for my life is a bit daunting and I have had to push myself to focus on the important things. My sister sent me a link towards a video by Steve Jobs from his 2005 University talk for students, which improved my sense of self. He describes the difficulties and hurdles he had to go through to get where he was and how even though things could have pulled him down, he used them as stepping stones to his next project. Unfortunately Steve passed away recently and I was saddened by the news.

A few artists I’ve been following for some time which have given me some inspiration over the years are;

Mike Inel - Artist | Hobbyist | Digital Art

http://mikeinel.deviantart.com/

Mike Inel is the creator of a popular animation on the interwebz, “Draw with Me”.

Meeting Mr. Strange

After the lecture on Thursday we got the opportunity to go to “The Black Box” just behind Belfast campus and see a talk by Mr. Gavin Strange, a designer in many fields. We arrived a little late since we decided to get dinner before the event, but standing at the side of the bar listening to Gavin talk really gave me inspiration (also made me feel a bit overwhelmed).

Gavin talked about his different works; how when he decides to do something different, like dabble in sculpting or film-work or photography, he just goes for it and somehow the opportunities present themselves. I found it really interesting that if someone asked him to design something, be it graphic or a random sculpture, he would go for it saying “Why not?”. I really loved the graphic work he did for the skateboard makers. The way they managed to get it carved out on the bottom of a skateboard was really amazing!

Gavin gave us a little teaser look into his film project BÖIKZMÖIND and explained the details about why he decided to create it. It seems interesting, and I’d like to be able to see the full film, though I haven’t really been into cycling for years.

Talking to Gavin

After the presentation, I plucked up the courage to go talk to Gavin; I’m a very shy person when it comes to these situations so I’m really glad I actually decided to talk to him, as I would’ve regretted not doing it later.

I told him how I’m also interested in many areas; animation, illustration, photography, filmography, etc. and how I admire how he just takes everything on. He said that I should just set my mind to things and go for it. If I want to do it, do it! I don’t have to wait for someone to tell me to, and through my own experimentation is how other people will hire me. He said that he would start personal projects and other people would take an interest and ask him to do things.

I expressed my concerns about the fact that females are so under-represented in the field of web-design and asked him what his views on the subject were. He agreed with my point and said that he liked the fact that Krissy, Jenne and myself are studying IMD as we have the opportunity to build up our work and show that web-design isn’t just for guys.

Gavin was really nice to talk to and I appreciated the advice he gave me. It was a really good evening and since I haven’t been to these sort of events before, I’m realizing how important networking is and that I have to get more involved.

Homework

This week the class were given the homework of coming up with our potential ideas for final year project and also showing five websites we find interesting and why.

The first homework was asked to be written in markdown.

About Markdown - 

“Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)” - Daring Fireball

I’ve never used markdown before, but it seems pretty simple.

50 W O R D Personal Profile

Back from a year studying Business in Florida for 3rd year placement.
Quiet but quirky; generally more interested in graphic design and illustration
than Web Programming and tend to lean more towards film and animation as a career path.

Major Project Proposals

Interactive Character Website

I have a character I have been developing a story and background to in the hopes of creating an illustrated series or web comic for in the future.
I’d like to push this forward by creating a flash interactive website for her with a short “trailer” video in either 3D or 2D animation, integrating activity pages and links to my other graphic work, photography and video projects.

My inspiration comes from online artists and beginner animators such as Mike Inel who created “Draw with Me” a short personal character based film which then gave way to some of his more recent beta-test games and Monty Oum the creator of “Dead Fantasy” which based on the fan base of DOA and Final Fantasy became popular almost immediately.

Pros

• I really want to expand my artistic side, and this sort of idea will give me the opportunity to, not only in improving my drawing skills but giving me the opportunity to explore new technologies such as Studio Max or Autodesk Maya for 3D modelling.
• Hopefully I can continue to use this site to host my future works and build on the character profile and story.

Cons

• I haven’t got the technical skills yet to produce 3D animation and learning might take up a lot of time.
• I’m a beginner with Flash at the moment, so again, a learning process.
• The popularity of the site is greatly narrowed down to whether or not the character and application of my graphic ideas are aesthetically pleasing. Also it’s about getting it out there and introducing it to the niche market.

Con-goers Website and/or App

Anime and gaming has quite a large community in the UK and Ireland, of which I am part of. There are several large conventions which take place around the country and sometimes even if you are a regular attendee at one convention, you are unaware of others or when/where they are happening.

I would like to make a website or application which keeps updates on time, location, events and special guests of all conventions during the year, give the users the ability to pre-register when conventions open registration and allow attendees the opportunity to review and share their own thoughts.

Pros

• There is a large community of gamers who would like this sort of website/app.
• I know some of the organisers in Ireland personally, so it would be easy to network and communicate directly to get information.

Cons

• A lot of conventions already have their own websites with detailed information.
• Attendees of these sorts of conventions usually use facebook and other websites to communicate such information.
• I don’t know the longevity of the project, whether the idea will last.

3D Game Project

This is probably my most ambitious idea of the three. Through my Interactive Games Programming module this semester, with learning more about games programming, I would like to take this one more step by actually creating a single player 3D game (or at least the beginning parts).

This would involve developing 3D modelling of the character and surroundings, character story and interaction, movement, sound and ambience.The movement of the player would be made by keyboard input, but I would like to do more research into neural interfacing in regards to game play as I think this could be one of the future routes of game interaction.

Pros

• This is ambitious; I could learn a lot and develop a lot from choosing this project.
• This brings me more into the area of work I would like to continue as a career; Game Art and story creation.

Cons

• This is ambitious; I could find it very difficult to achieve what I set out to do, especially as I will be learning everything from scratch.

Websites that Inspire/Interest Me

Deviant Art

I have been a member of DA for a few years and it as always been a great inspiration to me. I’m not referring directly to the website design, but also to the members/artists that make the site. I love the fact that DA is open to everyone, member or not. I think it is a great site for creating, sharing and critiquing art with other artistic individuals. I have found many inspiring individuals through this website.

Smashing Magazine

This is a brilliant website for web designers in that it gives helpful information on tools, techniques, graphics etc. I find reading the articles a great resource for when I’m in a fix for making my own site.

YouTube

Again it’s more the content of the website and the users that are inspiring rather than the website, but YouTube has constantly been a source for me to learn new things through tutorials and see software reviews, advertisements and inspiring work by others. It also helps me with my video editing skills, for when I upload AMVs when I edit in my spare time, I can get critique from my subscribers and improve my techniques.

Small White Bear/SkipSkap

I found this site a while ago (I believe back in 2nd year) when I was nosing through the final year portfolios. What interested me was the animation and style of the site and it is has been for some time an inspiration for future ideas I would like to do. I think it’s great that he chose this as a final project and pushes me onwards to pursue my interests in animation.

Videocopilot

While I was in studying in Florida, a classmate of mine who is a photographer took interest in some of my anime drawings and video work. He recommended this site for me for its tutorials in advanced editing in Adobe After-Effects. I am somewhat a fan of effects, angles and clever camera placement when it comes to cinematography and this site made me appreciate the hard work which goes into making videos full of shiny, shiny goodness. I would like to learn more how to use AE in the future.