Module Summary

When we were first given this task to complete l was daunted by the fact we needed to code an entire website and I'd never done any coding prior to this course but overall l felt it went well but l did run into some problems as I've mentioned in time management posts previously. So after I'd completed my design in photoshop l started to code on Dreamweaver. To remind myself of the basics of coding l looked at previous sites I'd completed in class to get a rough idea of what l wanted to do.

I started by coding my homepage, using multiple divs to replicate the boxes I'd marked out on photoshop, however one thing l wish I'd down now looking back is making divs for each individual picture instead of exporting the pictures in groups as l think l could of gotten more precision and made it look more professional.

Also to get the placement of my navigation bar exactly how l wanted it, l used a coding frame from the website w3schools.com  which helped me to change the elements of code such as the line height and font size because when l coded it myself it wasn't working because of the order I'd coded it in.

That was the first issue I'd come across but it was resolved quite quickly. Most of my coding was relatively simple but l did find l needed to code things such as background pictures into CSS rather then HTML in order for me to code text into another div to overlay the picture and as l said before by grouping my pictures together and importing them meant l had to be very precise with coding my text, using margins/padding to place it exactly where it needed to be. So sometimes the text didn't fit exactly like how it does in photoshop because there were discrepancies in the distance between some of the boxes in my photoshop design. 

Once a few of these issues were resolved and l got used to problem solving, for example in order to have two divs directly next to each other you need to float them and make sure the the pixels of the divs add up to make the width/height of the page. After learning these through trial and error l was able to code the other pages easily by using the same code for the navigation bar and just changing the content inside the wrapper div. I found the most complex page to code was the 'What's New' page as in my design I'd placed text close to each other, so l had to make several divs to achieve the look l wanted.  

Overall, I'm happy with how the module has gone and feel as though l have developed some key knowledge about the basics of coding and how to form a website as well as understand what consumers look for in a website and how the design is one of the key elements in a websites and business' success. The only major setback l found was losing my CSS file and having to re-code the whole of it again, this set me back as it was days before the deadline, however despite this being one of the major negatives l found of this project, it did make me re-think some of the features on my website and add more professional features such as videos. 

Time Management

I'd finished my photoshop designs and went onto coding, I'd coded about three pages of HTML and the corresponding CSS for it. However, when l went onto finish the coding and complete the website my CSS file had been corrupted and I'd lost all of the coding. So l spent the entire day re-coding my website, the upside of this was that l took the chance to make my website even better. Despite this meaning l couldn't update my blog with my progress on coding as how l intended, it did mean l got to a new level of understanding CSS and HTML and feel as if l would be able to code another website quicker.

Wireframes

These are some rough wireframes of what l want to include on each of my webpages, to make use of web technologies I've planned to encode some online videos and links to social media and external webpages so the users can make full use of the site. This will also increase business as having a website that is continuously linked and connected to other sites would boost it's position on search engines such as Google and therefore increase it's popularity. Also, as a user myself l find it much easier to connect to companies using social media such as twitter, which is why my contact information is heavily social media related as thats the quickest and most effective way to get in touch. Also by having a online presence on social media allows hashtags to be started and for users to connect with each other and promote the company by talking about it on their online profiles. 

Logo Experimentation

Before l used photoshop to start designing my website l wanted to roughly design the logo and experiment with colours which l thought would fit well into the brand I'm trying to build.
So l drew some logos and looked at what l thought worked well and also how comparable my deigns were to successful music steaming sites such as Spotify.

Here are some of the basic designs l come up with. I found that with Tidal and Spotify's logos they had simplistic text accompanied with graphics to make it more interesting, and in both cases the graphics were a geometric pattern or design that would be easy to recognise. So l tried to incorporate the same by using a geometric pattern in my logo that was different to other brands but also could be recognisable to the genre of music streaming.

I then moved onto photoshop and started experimenting with different logo ideas. Here was the first draft of my logo design;

I started off with this logo, sending it to a few of my friends who then gave me feedback and the most recurring feedback l got was that this design needed something to make it stand out compared o other websites.

So l first started looked at injecting some colour into this design, firstly through the text, then the graphics. 

The second logo l designed l incorporated circles into because l wanted something a bit smaller and sleeker so l created a new design.  I wanted to stick to the geometric theme, so l instead played with the idea of just having one pattern to the side of the word, I also thought that having a white text overlaying black looked classy, sophisticated and more professional. Although having colour can help establish a brand, l thought it made this design in particular look amateur and didn't create the brand identity l intended for it.

Name Ideas/Research

After doing research into music streaming sites and their branding I found that l wanted to go along the same route as Tidal and go for a name that plays on the idea of water and rivers. As Apple Music works off of Apples existing established brand and as my website is a new brand it needs a new and interesting brand identity to attract audiences.


The name ideas l'm going for is 'Surge' as this can correlate to a surge of sound as well as having connections to the word stream. Like other online music streaming brands l wanted a short name that would be catchy and easy to remember to create a strong brand identity, so l thought 'Surge' would work as it's an onomatopoeia so is more memorable.

I also wanted to chose a word that would be easy to incorporate into the design of a logo off of and that would visually work for my website as well as the app. The lettering of the word has key vowels such as 'S' that could easily be incorporated into a logo, brands such as 'Skype' have done it successfully creating a distinguished brand.

Time Management

Completed;

• Spotify Research
• Brainstorming 

I've started to update my blog with my progress, I'm currently working on logo designs and trying to put together some wireframes. Since it's easter break I'm taking it more relaxed, however l have downloaded a trial of Dreamweaver so l can start coding before l go back to uni. As it's only a seven day trial l will try to start my homepage by myself, however if l come across any problems l will have to ask Jack for help in the catch-up sessions when we return from easter break. 

Site Map

Once I'd decided what pages l wanted to create l started to make a site map to decide the types of things l wanted on each page and what I'd be looking for as a user. As we learnt in our lectures a user usually gives a site about 4 seconds to decide whether they actually want to use it or not, and this depends on what the site looks like and also if the user can identify the sites use.
Firstly, l looked at my website proposal and then started to use the site map to detail what l wanted specifically on each page.

Homepage

Download

Login 

What's New 

Packages 

Contact us