s.peng

ImagineFX is a magazine that centers around digital art with sci-fi and fantasy themes. A lot of its content is geared towards people who are interested in creating digital art under those categories, and because that content can be more effective in a digital medium, it is spread across both their print publications and on their website.

It is because of this that it tends to be different to magazines that are purely graphic design. Thus, the direction that I took in developing the website was different than how I would have developed it had it been a graphic design magazine.

In my competitor analysis, I identified some key points that would be crucial to the new website:

• Take into consideration the user’s navigation experience
• Take into consideration how the user will consume the content
• Strict visual hierarchy is needed to help guide users
• A strict grid system would make content easy to organise
• More images of digital art would allow the website to stay true to the magazine
• Take into consideration the importance and number of messages displayed above the fold on any one page
• Consider whether some advertisements are needed or are distracting from the content

I believe I have answered each of these points. The navigation bar is in clear view on every page. Additionally, the area of the website the user is in is highlighted at all times to simplify the navigation process for users, or to give users who arrive at the website at a random page (i.e. not the homepage first) an idea of where they are.

I identified that when people visit the ImagineFX website, they would most probably be a) searching for digital art related content, or more specifically, b) following a call-to-action from the print magazine. In whichever case, the sections of the website of primary interest would be the gallery (showcasing outstanding user works), workshops (i.e. tutorials) and reviews (of digital art related software, hardware, etc.). This is the reasoning behind having these three categories as modules on the home page, underneath the primary feature but still visible above the fold, even on a low screen resolution.

The primary colour of purple is highlighted with yellow. This is evident in the navigation, and also throughout the site where clickable links appear yellow as well. It serves as an obvious indicator of more information or something worth noticing.

I have used a rainbow, digitally generated pattern for the background image in the header to create some level of interest in the design itself. Balancing this is a brushed metal texture for the footer. These two background images are repeated along the x-axis and as such ground the site within the browser window, no matter how small or large the user’s screen resolution may be.

Although I have used quite a few images for the design of the site (i.e. images only serving as a function of the site design), the loading time is great. In total (including all user submitted images), the 5 pages of the mini-site add up to less than 1MB. 

Finally, I have also toned down on the amount of advertising displayed per page. I found that the sheer amount of advertising (and also its placement) on the original website was too distracting from the content, and because of the unimaginative way in which it was merged amongst the site’s content, it made the website look cheap and dated.

On the home page in my mini-site, there is only one long banner ad (at the bottom, above the footer). The homepage is, more likely than not, the landing page for most users, and I believe the website should respect its users in supplying a clean, up-to-date and organised homepage that acts as a portal to the other parts of the website.

On every other page, I have added an additional ad space (in the right-hand side column), outside of the content boxes so as to avoid confusion for the user. I think it is acceptable to include ads in the side columns here, as they are separated from the primary content and there is also free space there for the ads to sit in. They are not unnecessarily cramping the main content.

Overall, I did not change ImagineFX’s original site structure too much. I stayed true to it (I also believe that the structure makes sense, seeing as they have a lot of constantly changing content to communicate), but added a possibility of a back issues page from the homepage for people who might be interested in browsing those. The original ImagineFX website links to an external website to begin with when people click on “subscribe”, so the back issues may also be ordered from that external site, but I agreed it would be a nice option to have when it was brought up during user testing to have the back issues viewable on the ImagineFX site itself.

Access the mini-site here: http://www.susannepeng.com/webmedia/
The viewable pages within the mini-site are:

• Homepage
• Gallery
• Gallery (single piece view): this page can be accessed by clicking the Featured Artist image in the main gallery page
• Workshops
• Reviews

My final ImagineFX mini-site is informed by my initial competitor research, and also critiques received from my tutor and peers. For the reasons discussed above, I believe it would be a great solution should ImagineFX magazine be inclined towards renewing their site design. 

[01] Homepage

[02] Gallery

[03] Single piece gallery view

[04] Workshops

[05] Reviews

See it live at http://www.susannepeng.com/webmedia

Added some finishing touches to the website. The label over the input text field is now in place. It fades out while the field is active (using javascript) and works quite well.

I also changed the format of the Editor’s pick and Top rated sections in the gallery feature area to match with the banner style format of the Featured artist tab. I decided that visually it looked much better this way, and also added in a caption on top of the banners so that the feature section wouldn’t take up too much room. The caption uses rgba transparency, and on browsers that don’t support this it will render as just a black block.

Finished off my user testing over the weekend. Gathered a total of 5 reports and most of it was positive. People reported that they could easily find the content and that the structure of the website made sense, however one tester raised the issue of “ambiguity”. 

They said that because the words “gallery”, “workshops” and “reviews” were in both the navigation and the modules, they didn’t know which one to click. I decided to overlook this bit of feedback since the modules are an integral part of the homepage design, and it wouldn’t make sense to change those or make the navigation on the home page different than it would be on any other page.

Another criticism I received was that the line-height amongst the text in the footer seemed a bit tight. I tested it out, but decided it wasn’t too big of a deal. I didn’t want to have the footer any more chunky than it already was, so I changed it back.

Other areas I got constructive feedback in were to add a “where to buy” and “online catalogue” section to the website. I changed the big-ad module on the front page into a subscription/back issue call to action to address the problem of not being able to find back issues and make it extra easy for the user to see where to subscribe.

Another critique I received was to add an about/contact page, but I think it wouldn’t be necessary for the ImagineFX site in particular, as it would already be quite content heavy and as such shouldn’t take up another page (another click and more room on the screen to provide the link in the navigation bar) just for contact details. I decided to leave the details as they were, in the footer of every page.

Yay! Susannepeng.com is now live (even though there’s nothing there yet). Click on the introweb subdirectory to see the most recent iteration of the project.

The gallery and single piece view pages are now completed as well, and look mostly the same across all browsers. I’m having a few difficulties still with the placement of some elements (like the JQuery tabs and the “Post” button on the single piece view page) on IE7 but I will probably get around to fixing that up later.

Like I said, the tabs are mostly working like magic and I am happy. I would like to see if I can justify the images (each list items here) across the width of the 450px area but we’ll see.

Trying to figure out how to make the featured content tabs section in my gallery page today (the above screenshot is taken from my photoshop mockup). I stumbled upon this tutorial: http://flowplayer.org/tools/tabs/index.html — I think I’ll have to set aside a couple of hours or so to figure that out, but again I’m not sure if there’s a better (i.e. less complicated) way.

In the meantime, I’ve finished the workshops and reviews pages. These screenshots are taken on DAB macs on level 3, in Safari:

Also managed to figure out how I could get the selected page to load in the hover state (in the main nagivation bar) by using a technique they used in the horizontal nav exercise. The unselected pages are still clickable and when the user hovers over them they still light up yellow, but when you are on the workshops/review/other pages, the corresponding page will load up pre-lit on the navigation to remind you of where you are.

Today I put in a JQuery slideshow module using the Nivo Slider. It has some very pretty transition effects and is quite customisable too, so I’m happy.

I also installed Chrome and the homepage views perfectly! So now it’s been checked on Firefox, IE8 (I think), Safari and Chrome and everything works. I also revalidated my HTML after injecting the slider and it’s still without errors.

I just had a bit of trouble figuring out the best way to put hints in the search/login input fields … I might just bring the question up in class to see if there’s a more straightforward way to do it instead of the things I’ve been looking at online.

Also, when the input field is focused on, the background colour is supposed to turn bright yellow, and it works in both Firefox and Chrome. In IE however input:focus just doesn’t seem to want to do anything. At this stage I’m thinking I’ll just leave it — if you want to stick with IE I guess you deserve everything you (don’t) get. :p

I also tried to target the h2 tag I had as part of the caption in the image slider. I seem to be able to underline it, change the colour of the text etc. but for some reason the text won’t change size when I try to make it a little bit bigger. This is not a huge issue, and it’s something I can live without but I just wonder what I am doing wrong. :(

I decided to have a go at putting the homepage together today. Started with just the HTML and this is what it looks like without any stylesheets:

It’s missing a few things (which we haven’t covered in class yet) like the feature module and search/log in stuff, so I thought I could leave it out for now. Went on to validate and the w3 validator was happy with what it saw.

With styles, it now looks like this:

I’m stopping now because I wanted to put multiple backgrounds (like a soft shadow and light) over the footer (it’s a brushed metal texture), but couldn’t figure out how to make semi-transparent graphics so I could layer it over. Also I want the brushed metal texture to spread across the whole length of the bottom of the page, but I’m aware I can’t with the current set up in my HTML (the footer is inside the main wrap div). I don’t feel like working on it anymore today, but I’m thinking I might play around with having another wrap div outside of the first wrap (i.e. wrap2), and having the metal texture repeat along the bottom of wrap2 as a background.

Constructed a rough site architecture today. It starts to get a bit confusing when different parts of the website start sectioning off into other sections but I got most of it out of the way, which I am happy about.

I read an article on Smashing Magazine a while ago about building for smaller resolutions to start with (like mobile) and then building up, and I tried that also when I started thinking about really basic wireframes.

I think there’s some stuff that you just can’t do effectively on a mobile device where you’re restricted in size and also in the amount of columns you should (sensibly) use. Anyway I did try planning the mobile version of the site to begin with, but after I moved on and completed the screen wireframes I felt a little unsatisfied with the mobile versions I did. I suppose you can’t really design either of them in isolation … the whole thing has to work together, which is what I will try tomorrow.

I’m in the middle of putting my competitor analysis together and after everything I’ve got to say that I’m surprised. I looked at digital art magazines as a category, choosing ImagineFX as my main magazine. The competitors were 2d Artist, Digital Artist, Digital Arts and Computer Arts.

Some of these magazines actually look amazing in print, but I was shocked to find their web presence was so unrefined. It surprised me that something that looks so professional in print could look so crap online!!

So unfortunately I didn’t get to pick out many good points out of the sites I analysed, but managed to pick out plenty of bad! (It’s almost like they copied each other’s bad points too.)

All in all a good exercise — I learnt about what kind of things I’d have to include in the ImagineFX site once I get around to planning it.