HeroECS - The Website

The Website

About the Website

Upon hearing that the theme was superhero-related, I was initially stumped as to what the design for the website would be. Our first thoughts tended towards a printed, Warhol-like look. To be honest, I wasn’t so keen on that for the website. It just didn’t lend itself well to a website that had to be very content-intensive, easy to navigate and themed. After a few sessions of brainstorming, we settled on a very edgy, dark, creepy mood for our media. I was thrilled; I had been waiting for an opportunity to try out a black, glossy look.

My first real idea was to have the site centred on an image called ‘vex city’. I created the image by taking pictures of parts of the vex kit arranged to look like buildings and high-rises. Then, in Photoshop, I darkened it, removed parts of it, rearranged everything, adjusted the colours and added a sky and cityscape in the background. Finally, the elusive pigeon found its place under the logo. This image would also find its way into the kiosk and movie.

Next, I had to find an element that would tie the whole site together, since the inner pages clearly would not have space for the vex city picture. I decided on a curved navbar, which, coincidently, is evocative of the new ECS website. I made it look glassy and smooth in contrast with last year’s CabarECS website, which had very rough and papery textures.

Last year we had problems with content, or rather lack of. This year I wanted to make a very simple, well-organized site with lots of room for content. I also added some new features like a search bar and a full text-only version. Hopefully, this will make the site easier to access and explore. You can read more about all the features of the website in the “check our specs” section.

Check our Specs

Software

This website was created using Adobe Photoshop CS3, Abode Dreamweaver CS3 and Adobe Flash CS3. A Flash add-on called Flashtuning 3D rotate was used to create the 3D view of the robot. Lightbox js was used to display the images.

Search Bar

The search bar is simply a Google search bar with the command to search the HeroECS website for whichever keywords are typed in. Since any search bar requires the site to be indexed, we simply let the masters of indexing, Google, do it for us.

Accessibility

Last year we lost points because of accessibility. In order to address this, we created a full text-only version of the website that can be accessed from the splash page. People who have impaired vision or people who have a slow connection will be able to access the texts without any images in the interface. We also have a sitemap, which is accessible from the front page. Alt descriptions are in place for all the images in the interface.

360 robot (flashtuning)

Using a flash add-on called flashtuning 3D roatate was used to create an interactive 3D robot, which can be spun using the mouse. It was created with still photos of the robot taken from different angles.

Lightbox

Lightbox 2 is a clean way to display images. It opens up a white box over the rest of the page and can be closed by clicking anywhere. This is a much better alternative to linking to another page or file. Lightbox 2 uses JavaScript files (Prototype Frameworks and Scriptaculous effects library). Lightbox 2 is written in css.

Le Site-Web

À propos du site-web

Quand on a décidé que notre thème allait être les super héros, on ne savait pas comment le design du site web serait. Premièrement, on voulait imiter le look de Warhol. Honnêtement, on ne pensait pas que cette idée était très bonne. Cette idée causera des troubles quand on devrait mettre beaucoup d’information dans le site web. Il faudrait aussi que le site web soit facile à naviguer. Après quelques sessions de «remue-méninge » on a décidé que notre site serait très sombre et noir. On était très excité. On avait attendu très longtemps pour une opportunité pour essayer un look noir et luisant.

Notre vrai première idée était d’avoir notre thème concentré sur «Vex City». On a créé notre cité en prenant des photos de morceaux du kit «Vex». Ces morceaux ont été arrangés pour ressembler comme une cité. En photoshop, on a tous ajusté les couleurs et mis un ciel. Finalement, on a mis un pigeon en dessus le logo. Le pigeon va aussi être dans le kiosque et le film.

Après ceci, on a été capable de trouver un élément qui va unir le site. On a décidé d’avoir une barre de navigation courbée. On la fait quelque changement, par exemple, on l’a fait lussent. Ceci était un contraste à notre thème de l’année passée Carbarecs.

L’année passée on avait plusieurs problèmes avec notre contenu, en effet on n’en avait pas assez. Cette année on voulait simplifier notre site, car ceci nous aidera à le faire bien organisé avec beaucoup de contenu. Cette année j’ai aussi ajouté une barre de recherche. En plus, on a fait une version de texte seulement.

Documentation

Logiciels

Le site web a été créé en utilisant Adobe Photoshop CS3, Adobe dreamweaver CS3 et Adobe Flash CS3. Flashtuning 3 Doratete a été utilisé pour créer la vision 3D du robot. Lightbox a été utilisé pour monter toutes les images.

Bar de recherche

La barre de recherche est simplement une barre de recherche Google avec la seule capabilité de chercher Heroecs.

Accessibilité

L’année passée, on a perdu beaucoup de points à cause de l’accessibilité. Pour ravoir ces points, on a créé une version texte du site web. Les gens qui ont des difficultés vont avoir accès à la page sans image. On a aussi une carte du site web.

La vue 360 du robot (flashtuning)

On a utilisé le programme flashturning 3D pour créer une version interactive du robot. Il permet au visiteur de faire tourner le robot pour mieux le voir.

Lightbox

Lightbox 2 est une façon de montrer les images. Ce programme ouvre un carré blanc en haut de la page et peut être fermé facilement en cliquant n’importe où.