Here is the simple checklist which I created to help clear my mind and know that if I have done something, I can cross it off and move onto the next stage of the development of the website. It only includes things which is needed for the website as I don't feel the need to write 'level 1 wireframe', 'level 2 wireframe', 'level 3 wireframe' etc... as personally I think they're obvious and are needed before you can get your content and stuff for the website done. 

I have added notes next to each point to make it more personal to my work and work needed for my website as there is no need for a general check list, that will not help me stay on track where as this will.

 Looking back at all my work and research into logos from last week I am very confident in creating designs for a  new, different and simple logo. I have watched a couple youtube videos to help out with my illustrator skills (linked in the introduction) so I have gone to my sketch book and drawn 3 logo designs which I will develop them later on and get a final approval from Kate on which one of the three she approve of. I have had a thought to actually make them easily adaptable to make into website graphics to save time and effort of creating new designs and sketches for graphics as well as lots of logos. I like being efficient with my time and I hate wastage so I would love to use the failed logo designs as graphics or images for our social media pages (once created).

So I created 3 designs for logos on paper and they are all about phones:

The first design is a simple 'T' with a cord phone coming from the bottom and connecting to a headset of a phone which is sitting on top of the 'T'. I personally love this design as it is so simple and easy to understand as the 'T' stands for 'TEEN' and when I think of 'hotline' I think of a corded phone and calling from a classic designed phone, however most teens wont remember them so I designed a modern headset corded phone. I have also designed this in illustrator which didn't take too long, about an hour because I was struggling to create the cord from the phone as I initially tried to do it by drawings circles until I realised I can use the pen tool and then it was super quick to develop. 

The second design is also one which displays the 'T' as I feel like the 'T' works really well in our branding and image to help people know our name, however this one is in a speech bubble which is next to a smartphone and is there to identify that our company is about smartphones. This is surrounded with a black boarder and that actually helps it stand out really well. I think I may have made this design a little too complicated with the two objects and I'm unsure it will work as a logo but might work well as a website graphic. creating this design in illustrator was actually super easy as each shape is very easy to create, it took no time at all to create which I love because it means my skills in illustrator are at least improving.

Finally we have my third design and I have kept the 'T' from the first design and the smartphone from the second design. This is to see what I can do by taking the best qualities from the first and second to produce something which might be incredible. I have kept the smartphone from the second design but instead of having the speech bubble I have created little spikey bubble type things to represent noises/actions smartphones do when they get notifications. I incorporated the 'T' inside the phone as if it is on the screen as me and Kate both liked the design from the initial logo created and though having something on the phone screen was really cool. I really like this design, I think more than design 2 simple because it makes more sense as an image. On the other hand it is very similar to design 2 in the way that it might not work as a logo but more as a graphic because there is a lot going in for it to be a simple logo. The creating of this in illustrator was so easy as I just copied the smartphone design from design 2 and then I created the spikey bubbles though making lots of premade stars and merging them together. I really like how efficient I am now being using illustrator.

Speaking to Kate, me and her created a level 1 wireframe together, this is a very simple but also very good wireframe in my opinion as it tells us exactly what we need on every page. This is our layout for every page and our 'uniform' for the website. This is essential as if a website doesn't flow from page to page with the same layout it will look messy and unprofessional. From the checklist created we were able to create this level 1 wireframe really quickly and thankfully we both had a very similar vision for this website which allowed us to make decisions quickly and efficiently. We created this level 1 wireframe within 15 minuets.

This is the page of code from www.W3Schools.com I have decided to work from as it is a basic page with barely anything on it. I already know how to work from a blank page to create code but I can only create text. I decided to work from this one as it adds coding on colouring and fonts which is something I have done in the past but completely forgotten.

Ideally I want to have a basic wireframe with a block for the logo, banner, a headline, paragraph and a navigation bar, I honestly do not expect to achieve this within 1 hour but I would love to see what I can achieve within this limit.

 I will now attempt to manipulate this code, develop it and create it to how I want to ensure it looks as close as my wireframe paper drawing to develop my skills in the coding/digital area. This is honestly going to be a massive challenge for me as I have barely worked with coding before and I seriously need to increase my knowledge in coding to understand digital media on a higher level. 

I have barely changed anything from the basic coding which was in place from the beginning set of code in place as I do not want to drastically change it and not understand what I am actually doing. I will develop my understanding of code and develop my skills over the next hour of practicing code and what I am actually available to achieve. 

The changes I have created have mainly been with the text content and colouring so I can ensure I know what goes where and create a foundation for the design for the home page wireframe. I guess I will see how close to my design I can get to through coding within an hour. I only want to spent 1 hour on the coding as it helps me understand but I will create a proper wireframe in Adobe Illustrator, this is to practice my skills.

I have now learned about borders for content on a webpage. I honestly thought this step would be so incredibly hard and it really wasn't. I am becoming much more confident with code now as I was so unsure on what to do and was really worried about doing it wrong. I will now focus on making this webpage look more like my designs and basic wireframe to ensure I don't go off track.

I don't know how much I will able to create to get it to look like my pager designs but I am experimenting and trying to get a better understanding of code/webpages as I don't have much experience or confidence in this area.

In this step I was able to understand how to create a border within a border (I don't want this in my work but I understand how to do it now and get a better understanding of layering). Changing the position of code allowed me to understand where you need to place code to add the banner in the correct place.

Personally, I don't like the look of this so I think I will change the design of this to keep the white border around the main headline but I would like the paragraph (the black writing) to have the black border around it. I feel like this will be really easy as it is only changing where the code is rather than learning new code which I will get involved with in more depth later.

So far I am finding these changed rather easy and simple which is really good for my confidence with code as I've played with coding a website a couple times thought the years and this is usually how far I get to before I mess it all up and develop something which doesn't work. W3 Schools is a really amazing website to help prevent creating something that can be developed easy without mistakes. 

In this step I was able to put a dotted outline on the paragraph text box rather than it being around the headline and the paragraph box. I find this rather easy as with coding its all about the placing of the code to create what you want, where you want it. It's all about understanding where to place the code I get a bit confused about but I keep playing around and seeing where it might go to see if I am correct.

By this point I am becoming more confident as I have been doing simple changes, edits and manipulations to the code in place as well as adding my own content. This is very similar to the look and design of my paper drawn wireframe for the website me and Kate agreed on.

In this step I was able to start the paragraph of writing indented by adding a margin as in the gab will be our banner going down the screen, which is displayed on every page. I feel like I'm confident enough to now go onto the next step of big coding and I am going to attempt creating a navigation bar. I don't know if I will be able to create an effective one as I know they're rather heavy on the coding side but I am willing to experiment as see what it is I can actually achieve.

In this step I was able to understand how to create a navigation bar. This was really hard as there is a lot of elements in creating a navigation bar. I am proud that I was able to achieve this as it was rather confusing to see the steps to create just one link on the navigation bar, however, when I created the first two I understood the pattern so it was a lot easier to create the next 3 ones.

One problem I found though was that I created a navigation bar going down, not across so I realised I would have to recreate the code again as the tutorials on creating this type of navigation bar would become rather complicated and I didn't think I could start changing this code I already have due to not being confident enough to change it without mistakes. I know this is going to take up a lot of my time so I might not be able to input the logo and banner boxes but I really hope I have time at the end to do that.

This is very similar to the basic wireframe me and Kate decided we want our website to look like. I created this within 1 hour of practicing code on W3 Schools. I wasn't able to create everything I wanted to but I feel like I have managed to get a better understanding of coding and what is needed to create a website. 

I am sad I couldn't add the logo and banner boxes to complete my coded wireframe but it's all about time management, understanding your limits and what you can do on a schedule. I will probably do a bit more coding in the near future just for my own personal fun to get quicker and better at it.

I honestly didn't realise how hard it was to achieve what I have but I am proud of it as I have learned a lot over the past hour. I took examples from individual tutorials and built this webpage up from the basics. I am really happy I did this as it allowed me to understand how coding and websites work in depth more. I know this is a very poor webpage, however I feel like it is good to have a better understanding as well as more of a visual in comparison to our basic drawings.