Self-Promotion Evaluation

When creating my self-promotion pack, I wanted to create a set of items that represented my brand in a specific way. I wanted to come across in a manner that was seen as luxury with a high quality to it, this was following my research of luxurious branding how they presented themselves as not just a product but as a way of life. By using a maximum of three colours, two of which being different tones of purple throughout the packaging I have created general look across everything I have produced, this makes it easily recognisable as part of something produced by AKB Design.

From my research about a self-promotion pack I knew that I had to create something that I could send out to the client so that I could close the deal. I wanted to create a little a package that would contain something that would be nice to look at and be an enjoyable experience for the client to open. In it I created a iPhone mockup which included information about myself such as what I can do and again contact details. I also created a mini poster that would describe their perfect designer and then explain that I am that designer. I also gave them a discount card within it so that they felt like they were getting a better deal.

I also created a envelope for my letterhead that followed the same design cues as my promo pack. It had simple design which took advantage of white space which created pleasant packaging for the letter. It was folded and shaped in an unusual way which makes it stand out from the crowd, which is something that has to be done as a designer because then a client is more likely to use your services, because if you stand out from the crowd and are able to show you can make that happen for yourself, then you more than definitely will be able to do it for someone else.

I think it was the depth of my research that really helped this stage become as successful as it did, understanding what others did allowed me to understand what I needed to do be professional but again what I could do differently to stand out from the crowd. Essentially my research allowed me to think outside of the box because i was researching what others ‘inside the box’ had previously done.

An example of this was my business card, I wanted to create something that would explain what I did without really having to read too much on the card. Again research played a massive part in this because I found the most successful business cards reflected the line of work that they were representing, therefore I chose a the design of a laptop, and added my logo to it, on the screen I created a mockup that didn’t advertise google but reflected it so that people understood what it was, then showed alb design at the top.

Advertisement

Acorn roofing – finished site

This is the link to my finished website:

http://newmedia.artdesignhull.ac.uk/akenyon/index.html

ACORN ROOFING – Final Evaluation

When starting this project I thought it was crucial to avoid diving in with designs and code so I did some research into the users of the site, and with a focus group of the competitors website I found an interesting correlation. The more the company was worth the better their website was, this could mean two things, a good website can give the  indication of a company being bigger and better than it is, or it could simply mean that the bigger the company the more money they have to spend on their website. Regardless it was an interesting correlation that proved a good website can go a long way. Next I brainstormed my ideas on paper which allowed me to start selecting important ideas for design, this included deciding the content of the pages and how they were going to be designed. I thought due to time constraints and knowledge that it would be a too bigger task to try and make the site responsive or adaptive so I simply focused on make the site accessible by every browser, this meant I created a website that was 960 pixels wide to fit on the standard monitor and tablets. I then created three wireframes which focused on the placement of the content to allow me to visualise the site. Next was to turn these wireframes into physical designs, and once that was done I was able to choose one and start building it. I realised (when I had almost completed building the site) that the pageless design was flawed and was bad for search engine optimisation. I started researching the flaws of SEO and realised that this design was going to fail in the seo area so I decided to restart from the wire frame stage. I took the best of all my wireframes and built them into one overall design, next I created the final design and built this from the ground up. The final stage I took was to test the site on all browser and devices to make sure it worked and luckily everything worked as I wanted. The only issue being is that on mobile the text and buttons were quite small but this was expected as I hadn’t planned to make a mobile version of the site.

Something I learnt was how to use file transfer protocol (FTP) to make sure I was editing my site live on the server rather than locally, as I am aware it is important to do so because it means that should any problems arise I can fix them right then rather than waiting until I FTP my finished site only to realise it has issues once it is on the internet. I was also aware of the fact that I should you the put and get tool on the local & server sites area of Adobe dreamweaver, this is important as if you drag and drop you can corrupt the files beyond repair meaning the site doesn’t work at all.

I learnt that hierarchy within the file structure of the site is extremely important because it means that should another developer need to work on your site, it easily understandable what and where everything is. I learnt it was important to separate images which were an integral part of the design, and the the pictures which featured on the site. I also understand that because images take a lot of bandwidth to load on a site, I found it was crucial to make sure the image was the smallest possible file size it could be. I did this by making sure that every image featured on the site was set to the exact size the actual image was.

One issue I have discovered with my website is when you hover over images within the site, I have created divs that use css to implement the background, the reason for this is to allow the text to be easier manipulated on top. I have used the :hover element in css to select a slightly darker version of the image when you hover, the problem with this however is that when you initially rollover the image, the area turns to white for about a second then shows the darker image. with a bit of research I believe it is because there in no code specify what the onMouseover image is, but there is no way of doing this within the css. I would simply have to code the images through html and use  onMouseOver and onMouseOut, this would me to get the desired effect without the white spaces, although this would mean I would have to create a z-index for all of the content within the div.

Another issue I was unable to resolve was that of the underline to the bottom left of the twitter logo in the footer. I removed both Twitter and Facebook logo html and both time the underline disappeared, this is confusing because you can select it on the page as if it was physical content but there is no sign of it within the code, after researching it and trying to understand what the issue is I am still unsure and this is something I will continue to try and figure out.

SEO – Search Engine Optimisation

Understanding how meta data was something I made an effort to learn, since I had changed my design based upon the fact it is not SEO appropriate. I found that meta data is the content that is not visible by the browser but only search engines only. I needed to apply the basic searching techniques from Google into my design.

Search engines like google use “crawlers”, a web bot that follow links on the internet for the specific aim of creating an index of all the sites on the web worldwide.

I learnt that having multiple internal and external links to the site helps the website get a higher ranking, but this is along with the other parts of the how the search engine makes sure your page is most relevant to what the user is looking for.

Making sure that the hierarchy of content is obvious to search engines is essential as it means you get the relevant pages listed, you can do this by creating a sitemap. A sitemap lists all the pages connected to a webpage so that the crawler can easily list them. You also need to have a robots.txt, to make sure that the crawler knows it has access to the page and is meant to list this page.

Design of Multipage website

The final design was mocked up taking the best parts from previous designs and creating wireframes to begin with to arrange everything in the best manner possible you can see these here:

  You see here I have been influenced by some design work on Apple’s website;

Next I created a visual design with every detail covered so that when it came to coding the site it would be as straightforward as possible. You can see every page here;