Industry Placement

Today the focus for me was all about creating a ‘creative brief’ that would suit year 9 students.

I have been reviewing the creative briefs (also called art briefs) used here. They are several pages long, which is a lot longer then the single question ‘Who is your target audience’ that I place on the top of the website proposal I ask students to fill out. I have had little success getting students to answer this question well, and had been trying to come up with a better solution. The creative brief does such a wonderful job, breaking the entire concept down into baby steps “what colours do you prefer”, “what colours should we avoid”, “How do you want you users to feel”.

I have looked at a couple of different versions of the Art Brief that were I have come across on the system (again, much appreciated of the access that I have been given), and have begun tailoring a Creative Brief that would suit the students, asking all the important questions in a ‘real-world’ way.

The result is a two-page long document, a lot longer then the original single question I had been using, but I think it will achieve the objectives far better.

 

I also ran into one of the programmers in the lunch room today, we made a bit of small talk and then he opened up a lot of information to me. He was another person who took the long path to university, doing no more then basic typing skills at high school. He explained to me how he found his way into programming as a career, how he ended up in this firm, what he enjoyed about his job, and what areas he was confident in. It was nice getting an inside take on it all, especially one that I can apply to students back at school.

Just in case I left an impression that things around here were easy, I was thrown into the deep end today, delightfully out of my depth.

One of the project managers had me poking around the website of a major client. After listening to him explain how he was ‘checking out’ a copy of the site from the CVS (version control system), watching him modify the IIS, open up several databases in MS SQL server, and tinker with several ASP scripts on the admin side of the side, I am well and truly in awe.

Most of the stuff I am seeing him doing are things that are familiar to me. The terms he is using are familiar, but the scope of it is way beyond me. I listen intently, nod with vigour whenever I think I actually understand something, and quake at the thought of trying to figure it out on my own. Thank goodness the version control system allows me to play around with my own local copy of the site.

 

I have been left with a simple task. Take a page with a test input box, and turn it into a dropbox.

I don’t even know where to begin. I was looking at the page in a web browser, but the URL makes it clear that the page is created based on some other asp page, and I have no idea which one, and there are hundreds of them. By the end of the afternoon I have found the correct file, written a ‘Response.Write(“Here1”)’ to the top of the page, just to make sure it is the correct page, and figured out how to change the word ‘MP3s’ to ‘Media’.

I am can only shake my head at how excited I am at the little I have done, and there is no doubt in my mind that any of the other programmers would have had this all finished in less time then it took to set up my computer.

I did pick up a few things out of this exercise. I have seen the acronym ‘doms’ around a little bit this week, mostly as I checked out some XHTML/CSS websites. I also ran into a file called domsutils today, which had strange looking code in it, that I could use to change the textbox into a dropbox. I think I had almost figured it out when the website stopped working completely. I obviously broke it somehow but have no idea (again, very grateful that I have my own private copy). It bugged me all night, but despite my best efforts the next day I still couldn’t get it all to work.

The files that I was looking at were over 2000 lines long. I have spent about 10 minutes just skimming through all the code, looking for function names, and trying to see where the functions I am looking for might begin, a note at the top told me this file had not been edited since 2003. This really bought home the value of well-formatted, well-commented and well-written code. I have always been a stickler for good code, knowing that it was important. It was great to see a common real world situation where pages and pages of code, created by people who have moved on long ago, required editing. I was relying on good naming systems to be able to find what I was looking for, and good grouping of appropriate functions. I was also trusting that the previous programmer had used the variables in obvious ways, so that as I modified any code, I would not introduce unnoticed bugs.

I unabashedly eavesdropped on a conversation today (by unabashed I mean they knew I was listening with interest because I had turned around to face them).

 

One of the project managers is trying to get a font from a client, and it is causing all sorts of issues. It is interesting to hear how it is being dealt with. The client has previously used a particular font, and wants that font used on this project. This is very common and so far sounds simple. The graphic designers here need a copy of the font, they have two ways to get it. They can purchase the font, costing about $180, or they can ask the client to provide the font files.

 

This is where things get a bit silly, and messy. It is also where things get interesting as the project manager tries to work with the client liaison, everyone begins to get frustrated, however the project manager needs to use all her pubic relations skills to ensure that a $25,000 relationship does not turn sour over a $180 font.

 

The project manager has contact the client liaison to have the fonts sent across. The client liaison has contacted her own in-house graphic designers asking for the fonts to be sent. However when the files were received by the project manager they were unusable. The project manager now has to call the client liaison again. The liaison contacts her in-house graphic designer who is adamant that the correct files were sent, the client liaison calls the project manager and relays the message, the project manager speaks to the graphic designers here who confirm the files are unusable. So the project manager calls the client liaison again, who speaks to the in-house graphic designer who reiterates that he sent the correct files. The egos of the graphic designers are at stake here, and the project manager is scratching her head trying to figure out how to get the file.

 

The project manager could just buy the fonts at a cost of about $180. This would mean less profit on the job, and by-rights any additional costs should be passed onto the client. The project manager had earlier offered this solution to the client liaison, who had spoken to her boss, who had responded with the annoyance of someone who was paying $25,000 for a web solution, and was being hassled about an extra $180 fee.

 

The project manager at this stage has spent enough time on the phone chasing these fonts that it has probably cost the job $180 in time alone.

 

It was an interesting situation, both sides were correct. The project manager must decide exactly what to do next. I won’t presume to have a solution, and I may not even get to find out how this project manager resolved it, but the situation is an interesting one.

I have taken the opportunity to play around with a bit of CSS today, it is a good environment here to do this as I am able to take a peek at all the code in the projects folder. Checking for best practice etc.

I created a simple HTML page with a few divs and lists, now I am working on making them pretty. I actually believe that this will be easy for students to learn.

For a start a page that looks like the one below requires far fewer HTML tags then are actually taught in year 8 web design. Aside from the [head]/[body]/[html] elements the only tags used are [div], [ul][li], and [a href=””]. I also added an id to each [div] element. So far this really is a much easier then teaching students about [font color = blue, size = 2, face = arial], [b], [u] and trying to convince students to get all the closing tags correct.

With the id in place I have enjoyed trying to make my page look nice. I embedded the CSS style as I was only working with a single page (rather then a site), this technique would be suitable for the year 8 level. Using an online reference such as http://www.htmldog.com/ the CSS attributes were easy enough to work out, and a ‘starter’ list for students would make it quite easy.

 

 

 

One of the web developers had a good long chat with me today. I have been doing some work for him over the last couple of days, and he had a few more hours of work for me to do, but he also took the time to give me a good overview and answer a heap of questions that I had.

The firm used to have an in-house CMS that clients would pay a large amount of money ($10000+) to use. However with the advent of free CMSs it became cheaper to have a client use products such as Joomla. I have been told that the firm takes a largely agnostic approach to the CMS that a client uses, working with whatever system the client has in place.

The web developer told me that the development software each developer uses is a personal choice. While some do use Dreamweaver, most do there development in text editing programs such as Edit Plus or UltraEdit. He personally never uses Dreamweaver or any program like that, he finds the code too ‘dirty’, and thought it much easier to code manually. If he wants to preview his work, then he saves it, opens Windows Explorer and double-clicks the file…nothing like simplicity.

I am impressed and surprised by how much of the firms work can be achieved on free or inexpensive software. The firm is the largest in the region, and yet is able to do what it does on (potentially) very low software costs. FireFox and Thunderbird are on all the computers, Dreamweaver and Flash are not highly visible.

There are the graphic designers using the very expensive PhotoShop on their 24inch iMacs, however they are balanced out by the Linux mad programmers in the corner who live by the mantra “it is not any good unless it is free”. The staff use whatever software suits them best, it just seems a lot of people choose to use the free stuff.

The other beautiful thing about EditPlus software being chosen over Dreamweaver is that this means the very basic HTML and CSS skills are worth a lot. I am inclined to want to refocus the two/three subjects that teach any HTML to remove the use of deprecated tags, and replace them with both the correct tags, and a basic understanding of the importance of W3C. This would mean including an introduction to CSS where appropriate.

The industry experience is building a lot of confidence. For some reason I had held a belief that people who work in the industry have some sort of ‘horse whisperer’ connection with the computers. They could breathe a command at the machine and the machine would magically make it all happen in ways that make the rest of us look like mere mortals.

I spent 3 hours today resizing thirty images, turning each into a thumbnail and a small picture for the webpage, organising and renaming them into a system of folders. I appreciate knowing that the guys in here really are mortal.

The recruitment process here is interesting. University degrees, TAFE diplomas, industry certificates are less important than having a great portfolio of projects. The web developers actually take a short HTML test where they are given the first version of the website (with code), and asked to turn it into the second version of the site. All without the help of a computer. The test is intentionally ended before the candidate is finished, and the reaction of the candidate is also observed. Does the candidate start by explaining what they have done, or what they have not. Has the candidate used correct coding techniques such as [div] instead of [table].

I received some clarification on navigation systems today. They use what is known as a courtesy navigation at the top of the screen. This contains all the things about the meta of the site. An example is below.

At the bottom of the page is where all the legal stuff is place.

 

I spent most of the day copy content from a client’s website to Joomla (a Content Management System). This was my first taste of Joomla despite the school using the system for its own website.

The content needed to be slightly reformatted, as it was easier to paste the content into the built-in HTML editor, rather then pasting in the WYSIWYG editor. So the day went copy -> paste -> add some HTML tags (repeat). [At this point I must express my frustration with the blogging software which will not, despite numerous amounts of tweeking, correctly display the HTML brackets]. Mostly just [h2][strong][p], with the a few lists, [ul][li], and the odd table [table][tr][td]. I do realise that this stuff is basic, I teach it to year eight students, however it was interesting to see that it is used out in the real world. My basic knowledge allowed a web developer to set me a rather large task, and leave me to it. If I hadn’t known what [h2] meant (it is a heading) I would have had to ask him, and have him try to explain. I knew that unless the [br] tag was put after each paragraph the paragraphs would run into each other, I was able to just say “Do you want br tags?” and when he responded “No, use P tags” I knew that he meant [p], and I knew what the difference between the two types of tags were. When a list or table was needed I was able to code them straight up (I did have to jump on google quickly to remind myself whether it is [td][tr][/tr][/td] or the other way around). This is all very basic of course, it was just very interesting to know that such a basic skill like this was enough to mean I could be 5 hours of usefulness for a developer, and that the skills that are taught at a high school level mean some of my students would have even been able to do this.

This afternoon I had a chance to talk to both the supervisor, who suggests that we do this every afternoon, and one of the project managers. The discussion focused on the project as a whole, the roles of the account manager, and how to figure out what the client wants.

The importance of creating wireframes before the graphic design begins, is sinking in. A website has a purpose, it is not a piece of art, it has information that must be conveyed to the user. The project manager must take a lot of time at the beginning of the project to find out what it is that the client likes and needs. The reality of the project means that by the time the graphic designers are given the wireframes and the brief, the will only have one shot at designing something that the clients will like. Most creative briefs allow for one design, and a handful of hours for some slight corrections (I would like that border orange instead of grey). Mostly the client is happy with what they see, if the client is not happy then it is up to the account manager to step in an negotiate with the client.

To ensure that the client is happy, the project manager must spend time working out what the client wants and needs, and this isn’t always as simple as asking the client. A client may know what they do not like, but not what they like. The project manager will have the client fill out a ‘creative brief’, and have them comment on particular websites they like, and specifically what they do or do not like about them. For example, ‘I like this whitespace on www.website.com’, or ‘I like the navigation on my competitors site’.

Today I am learning just how hard it is to design a good looking site. I have been asked to do a storyboard for a client. The client is producing a marketing campaign aimed at teachers. The brief includes creating an online featurette promoting the product to teachers.

After reading through the notes provide by the client I query the supervisor, “How much of this can I change?”. She told me that she had change the word ‘above’ to ‘below’. I feel very limited by this. I return to my desk and try to ignore my desire to 'fix' the copy. Two hours later, I had rearranged, added words, reshuffled, and generally been frustrated because I wanted to scrap the entire draft and start from scratch.

I spoke to the supervisor about this later. Clients are advised to give material to them in final copy form, unless they have specified in the quote that they would like editing done. Clients can pay to have copy written for them, anything from minor changes to having a staff member go out to the clients site. She gave me an example of a staff member spending several weeks on a clients site, at $100 per hour you can imagine the cost of something like this.

One of the more interesting things I learnt about today was wireframes. After hearing it mentioned a few times I asked what it meant. Essentially the project manager works with the client to ascertain there needs, and then will have meet with a user interface designer to create appropriate wireframes. These wireframes are devoid of graphics or anything ‘pretty’, they are purely about function. The project manager will then take the wireframe to the graphic designer who will create the graphics to suit.

An example of a wireframe

The wireframe above is actually a lot prettier than it should be, that client saw the first wireframe, which had squared corners, and thought it looked ugly. The team took the unusual step of ‘prettying-up’ the wireframe to satisfy the client.

I am told it is not uncommon for even a professional graphic designer to become hung up on the ‘way the wireframe looks’. The wireframe is intended to portray the placement, priority, and hierarchy of the layout, however this does not mean the final design will have square corners.

Below is another example of a wireframe.

 

This is my first day of a 10-day industry placement. I get the chance to go learn what happens in a real web-design firm, and hopefully bring a lot of fresh knowledge and incite when I return to school.

I am in awe of the skills of the people around me, the walls show framed artwork that the firm has created, I am introduced to specialist graphic designers, user interface designers, programmers, and web-developers. The office looks cool and my desk is over twice the size of my desk back at school.

My first day was spent looking through the intranet, reading any files that interest me, and looking through the projects. I suppose it is the boring stuff, getting to know the routine of the office, but I have made 5 pages of notes already. Everything from notes about their filing system, how they do client briefs, and what they ask clients in initial meetings. There is so much to be understood, and I am excited to get the chance.

Someone came up to me during the afternoon and asked who I was, and whether I could program HTML and CSS. I was annoyed at myself. I had learnt CSS back at university but had not touched it since. Last month I had actually put it on the to-do list of technologies I wanted to do a refresher of. I was disappointed to have to tell her I could not code CSS. It did inspire me though, I took a break from the learning about the office procedures and policies to look through a CSS website, I learnt that a lot of cool stuff could be achieved using CSS instead of HTML, and that some HTML code will be deprecated by the W3C soon. I am inspired now, and am drafting down notes to incorporate CSS with the year 10 Internet subject.

It is a lot longer day working in a real office, and the routine is very different. I find myself drinking a couple of extra cups of tea, just as an excuse to stand up. I am excited though, there is so much to be learnt here.