Portfolio Website

I've spent the last few days of work time on designing a Portfolio Website to show prospective employers some of the work I have done, as well as the 3D models I've designed and built on Minecraft, which could help display my creativity and that although it isn't commercial work for a client, I can replicate an image of something to a high degree of accuracy.

Thus far, the above image is all the content I currently have on the homepage of my website. I decided to go for an "old school" look, using grey buttons with an LED light on the left, a graphic and text explaining in a single word where the button will take you.

Below the row of buttons is a grey information plate, bearing a single sentence briefly explaining the page, with a small screw in each corner. The banner above the buttons bears the same logo on each page, with the accompanying image changing for each page.

The image is always an image of a model I have built on Minecraft, since they were the only things I've created that served the purpose of both decorating the banner, and without causing confusion or copyright infringement (since a lot of other work I've produced are logos or entire pages for magazines).

The buttons are all roll-over images, similar to my other page, each of which has a small LED light on the left hand side of the button, that illuminates red when the mouse hovers over the button. This is demonstrated by the screenshots provided below.

The only other page I have created so far (and completed) is the Biography Page:

This page is opened when the "Biography" button is clicked on the home page, and this opens in a new window, so that it can be closed, and there would be no need to navigate back to the home page.

The Biography page is similar in design to the main page in the following respects:
> The banner at the top is the same size (350px height)
> The logo on the banner is in exactly the same place
> The buttons are the same size and in exactly the same place
> The buttons are all rollover images
> The information plate is the same size and in the same place

This helps the user navigate through to different pages and having everything in the same place means that it takes the user less time to find the button they are looking for. Keeping everything consistent and neat creates familiarity and security, and eases navigation throughout the website.

The Biography page is different in design to the main page as following:
> Thunderbird 1 in the banner is replaced by Thunderbird 2
> The Biography button's "idle" state has its LED glowing green (to identify that the user is currently on the Biography page
> The text on the information plate relates to the current page
> There is an IFrame beneath the information plate

I decided to use what is called an IFrame on the Biography page, because I simply wanted to minimize scrolling of the page as much as I could. The text in the IFrame scrolls independently to the rest of the page, so that while I can scroll down and read the rest of the text in the IFrame, the rest of the page stays in the same place.

The text you can see in the IFrame is stored in a separate Dreamweaver file, and is linked to the IFrame through some simple coding. The IFrame feature is not a standard toolbar-available Dreamweaver feature, so I had to code it from scratch, using the References panel on Dreamweaver to help me.

The code I used for the IFrame is written as thus:

src="Biography_Text.html"   refers to the source file for the content of the IFrame, stored in a separate Dreamweaver file. If I edit the file in any way (add or remove text, change the font, font colour, background colour etc.), it will also change the IFrame content.


width="484" height="375" obviously dictates the size of the IFrame on the page (in Pixels). The content on the source file (in this case, Biography_Text.html) is wrapped to this frame.

Above is the file Biography_Text.html in its full form. Below is the same file wrapped into the IFrame on the Biography page of my portfolio website, as well as a display of the scrolling of the page within the IFrame.

The final part of the coding is frameborder="no", which turns the default thick black border around the outside of the IFrame invisible.

Logo Redesign

Original Logo Design

Due to the work I have produced on Design Crowd, I have become more experienced in what a good logo should look like, and as such, I have decided to redesign my logo to make it look a bit more professional, and a bit more readable (as some people has difficulty deciphering that the lightning bolt was supposed to be the shape of a capital letter "R").

My custom-made PhotoShop brush

Again, I decided to incorporate the custom brush I created into the design, and tried to make it more pronounced and central to the design.

The main intention of using my own brush as a kind of "signature" was so that my work could immediately be identified by its presence or use, or so that it becomes my own brand mark (so-to-speak).

I've produced two versions of my logo, using the same method I used on Design Crowd when submitting designs to clients, with one printed in black on a white background, and again with the colours reversed (white print on a black background), to display what it would look like on a darker and lighter background.

One of the drawbacks is that since I faded a decent portion of the custom brush print on the left of the design, it may prove to be problematic if I ever decide to transfer the logo onto clothing, getting the fading embroidered may be difficult for the embroiderers, but this may not be a bridge I'll be looking to cross, since getting a personal logo embroidered on shirts or caps does seem unnecessary and costly.

The text used is a font called Krungthep, which I believe is standard to Word, and has simply been vertically squashed to allow for a neater fit.

Portfolio Website (Pt. 1)

I have been tasked with creating a website to display various pieces of work that I have done throughout the course.

This Portfolio Website needs to include four things:
> a link to Facebook, including a template from Wix.com
> A Flickr slideshow
> a link to Twitter
> a link to a destination of my choosing. This has yet to be decided upon.

Any links used must open into into a new window.

Currently, I already have a Facebook page (http://www.facebook.com/GeorgeRCopDesigns), and have created an account on Wix using my pre-existing Yahoo! account, as well as creating a Flickr account and uploading some images to it (the Photoshop Design for my website, my Newcastle Science City double-page spread on InDesign, Swiftwall logo design, Coast Net Solutions logo design, original Trillium CNG logo design, and compilation Trillium CNG logo design).

Design Crowd (3)

I have submitted another design to Design Crowd today, to a company called Trillium CNG (CNG = Compressed Natural Gas), which specialises in transportation of Natural Gas for fuel and use in industrial installations and petrol stations.

Below is an image of the generic mono-colour design itself, and the compilation of logos incorporating some colour in the "Trillium" text:

 The logo design was, in large, inspired by the chemical structure of the compound Methane (CH4, see right), which is composed of a single atom of carbon (C), and 4 atoms of hydrogen (H).

From this, I used the "C" in "CNG" as the nexus of the atom, representing the carbon atom, in addition to "Compressed" in "Compressed Natural Gas".

I decided not to use an "H" to represent each atom of hydrogen (since the addition of letters may have led people to believe they were of more than merely artistic and aesthetic significance), so instead used smaller white circles (since on a lot of 3D models of compounds and hydrocarbons, carbon atoms are usually black, and hydrogen atoms are usually white).

Submitted the design today, and am awaiting a verdict from the client. Fingers crossed!

Design Crowd (2)

Have managed to submit a design to Design Crowd for an IT company called Coast Net Solutions, and am awaiting feedback on it, having posted it on both white and black backgrounds to show the client how it would look on both:

The client specified that he would like the logo to incorporate grey/silver and blue, but was not required, so I drew inspiration from that and applied the two colours separately to the words "Coast" and "Net" (written in the font Impact), leaving "Solutions" to be written in black or white (dictated by the background colour). To make it look more professional, I gave the word "Solutions" an underline and an overline in the same colour.

Design Crowd

Have done some work for projects on Design Crowd, but haven't submitted them all because I was a bit dumb and forgot to copy+paste the URL of the appropriate pages and subsequently lost them (due to the project names being so similar to all the other ones). Below are some screenshots of some of the work I've not managed to submit to Design Crowd for the above reason:

Science City

Have started on a double page spread design for Newcastle Science City magazine, on the topic of the NHS, built on Adobe InDesign.

However, my plight in creating a banner image to straddle both pages has fallen down, as I do not have a raw .psd file of the “swoosh” strands at the top of the pages, and haven’t been quite as successful as I’d have liked in removing the white from a .tif version of the banner, and as such, looks like it’s been chewed by someone’s dog.

It looks alright for a bit, then it bleeds together horrendously…

So I had to decide against the banner and run without it.

After that, I pasted the text into text boxes on the lower pink half of the pages, using white Century Gothic font, and left alignment, keeping the text under the correct headers in four columns.

For the first column (left-most), I decided to make the text bold and slightly bigger to stand out, and stretched the body text box to fill the entire column, vertically aligning the text to the centre, and doing a similar thing with the sub-header, stretching the text box between the main header and the body text below.

Since the header of this column is the header of the whole page, I made it bigger than the sub-header.

The second and third columns were done differently, with the text kept in Standard (rather than Bold), and slightly smaller than the first column's body, the headers about the same size as the first column's sub-header.

For the last column (righter-most) I mimicked the second and third columns, but found that the content (which was a list) was too much for the space I had, if I were to have each job name on a single line.

So instead, I staggered some of the list, creating a second mini-column within the column, reducing the amount of vertical space taken up, and allowing the contact details to be included in the space below.

For the last part of the page, I added in a circular image, and a circular text box with additional information in, each bordered in the same pink used for the lower half of the page, and positioned the text just above the righter-most column, and the image in the top right of the left-hand page, linking the two with a pink dotted line, weight 8 pt.

Website

At the start of November 2011, I drew up initial designs for a one-page website on a subject of my choosing. As such, I also needed to design a logo for myself, and learn how to make the buttons work, and take the user to the place I intended it to.

My first designs for the website were drawn up on Photoshop, using the rectangle tools to lay it out in a grid, with each rectangle on its own layer (so that they could be moved independently) and labeled, so I knew what it represented.

 

After I’d laid out the initial foundations of my website, I started acquiring content for it. I sourced this from what I’d build on a game called Minecraft earlier in the year, and decided that this would be a way for me to share my designs with fellow Minecraft players who wished to add these models to their own worlds. I got most of this content from screenshots I took in game. They are my target audience for this project.

I had to design my own logo on Photoshop, at a size of 400x400, since it didn’t need to be much bigger than that. I decided that I’d like it to depict a bolt of lightning striking the ground, and used two colours (black and white) to keep it simple.

I also incorporated a brush of my own design to use as the flash effect for the lightning strike. This brush was drawn by hand on a 200x200 Photoshop canvas using the line tool and a circular brush.

I decided against downloading a new brush for Photoshop to draw the lightning bolt in the shape of an R (or, at least an R without the “spine”). To further emphasise the R shape, I changed the opacity of the brush tool, changed he size, then drew an R (minus spine) around the lightning bolt to match the other letters (G and C).

I added the final word “DESIGN” into the logo to add a feel of professionalism to the logo, and chose the CGF Locust Resistance font. The logo was then included on the left of the header banner.

I also made use of roll-over buttons to change the colour of the navigational bar buttons from the blueish-grey colour to an orange version, chosen as orange is opposite blue on the colour wheel, so the colours compliment each other when they are used together, and looks better with the rest of the page, whilst still standing out. I also used roll-over buttons for the links to my blueprints on my Blueprints page of my website.

I also included plenty of images collected from Minecraft screenshots I’d taken, some edited to enhance visibility (as with the image on the Home page of the movie version of Thunderbird 3 docking with Thunderbird 5, which was brightened a couple of times so that the image wasn’t too dark to see what was happening.

I also made 2 buttons to Facebook, and 2 buttons to Youtube on my homepage, so that the user can go to my Facebook page and Youtube channel, as they are both popular social networking sites that can be used to help broadcast to a great number of people at once. These links open the appropriate sites in a new window, so that the user can conveniently flick back to my homepage whenever they like in order to access the other features of my site.

I think my design was moderately successful. I think it was successful in the sense that it looks good, and provides all the necessary and relevant information, but what I don’t think worked was how I had to put all the text in as an image, because Dreamweaver doesn’t allow more than one font, colour or size in the same cell, and doesn’t allow backgrounds to be put in the table cells to help my text stand out from the background. Another problem I encountered was that when I copied my site over to the web host with Filezilla, the Home button on the Blueprints page didn’t link back to the home page, and an error occurred (which was a problem with the coding, where the file “index.html” that it was supposed to link to was spelt with a capital “I” rather than a lower case), and despite amending the problem several different times using different methods (including changing the code, the name of the index file in 2 different places, and removing and re-adding the link to the button, as well as taking the site down and reuploading it several times), the problem still occurred and kept replacing the lower case “i” with a capital in the source code every time it was uploaded.

The software I used to create my site was Photoshop, Dreamweaver, Safari (web browser) and Minecraft (the game from which the screenshots were taken). I used Photoshop to draw up the original concept for my website, drawing the banner at the top, my logo, the buttons, and editing the images supplied. Dreamweaver was used to construct the website itself, simple as that. Safari was used as the proving ground for my website (playing the website on Safari through Dreamweaver to test everything worked), as well as using it to access Youtube and Google to troubleshoot if anything went wrong.

Minecraft, like I say, is the game from which the screenshots were taken. This is a sandbox construction game, and allows players to build castles, towns, mansions, underground bunkers, ships and much more, limited only to their imagination.

The testing I did for my website before trying to put it online mainly involved making sure all of my links worked, and I was taken to the correct page, and if necessary a new window. To test them, all I’d do was open the Dreamweaver file in Safari and click the button, and if it took me to the right page, then it worked. If it didn’t, then it wasn’t working and it’d need fixing. I also did spelling checks, since if you use text speak on the internet, you don’t tend to get taken as seriously as those whose spelling and grammar are correct (4 xampl if u tlk like this u r not tkn srsly n ppl fink u r trollin [Translated: For example, if you talk like this, you are not taken seriously and people think you are trolling]).

To transfer my website from my Mac onto the webhost, I used a program called Filezilla, which was a simple log-in, drag-n-drop procedure, although some problems were encountered which I have been unable to fix (as mentioned in an above paragraph concerning the coding of the home button on the Blueprints page).