Producing the Media Content for We Are Awesome

Along with empowering audiences by putting important issues into context, entertaining them with irreverent but enjoyable listicals, I also wanted to inspire them with heartfelt and motivational videos.

This would ensure that my website also possesses the power to inspire - which is an important theme for my website, among others - and would diversify it in terms of content, with videos to go along with the article heavy premise.

But I had a problem in conceptualising how these videos would take form. At this point into the project, my website is as strongly defined thematically, but the habit of making a video with the goal of inspiring others, can come across as cheesy and pushy. And it could more or less compromise my conceptual vision of how a website centered around fostering humankind to be more connected and powerful, should be like.

Therefore, I created a character that I felt would be better suited to discussing and proffering inspiration to an audience and make it fit into this idea of conception that I am aiming for with my website. His name is Mystery, an enigmatic character, who offers pearls of wisdom, while wearing a box on his head. The character-led approach, I felt, would be better suited to a video intended to inspire, than if I were to present it as me, as a character would give the videos a feeling of eccentricity and excitement, that a non-character approach would have trouble replicating.

Getting this character, Mystery, to become a figure of intrigue and authority on the subject of inspiration, was troublesome. I played around with the voice and the style of articulation and settled on what I can only describe as "1950's Received Pronunciation." Then there was the matter of what he would say in terms of dialogue to fulfill the motivational/inspirational premise. I looked at interesting facts on the internet and on motivational blog pages, and shaped his dialogue based on that. I felt that it was important to keep the videos to a minute or less, as to not bore an audience - and made sure the dialogue would not exceed that.

I sourced an appropriate location and background to film the video and decided that the video would be one take. This was purely in the interests of keeping me on track with life, not to mention the website, as there was the potential to get carried away with it.  A script using an analogy about a bumblebee and words of wisdom on life was written, to keep me focused in ensuring that the video would be under a minute, and have structure to it, as I brought this character to life - which was hard to do.

Upon finishing the video after many takes, it was uploaded to YouTube as this would be the best way to ensure that the video could be embedded onto my website and make the video, accessible on all browsers.

Completed video titled "Mystery Speaks: The Humble Bumblebee":

Producing the Entertainment Content for We Are Awesome

To broaden the appeal to a wider audience with my website and to diversify the offerings on it, the potential to do this would be quite narrow with articles solely on politics which, while important to the livelihood of audiences, are rather boring - not to mention would put off a large number of people from considering the website as a destination on the internet.

Initially, as mentioned in previous posts, I envisioned a "Human Interest" section on the website which would contain content that would appeal to a wider audience - but in what shape, or form, I did not quite know. The content for such a page would be very broad, and that in itself creates a problem: being a creator, as well as a coder for the website, the potential for content not to be specifically tailored for the theme of my website, is strong, due to the broadness of the term "Human Interest".

I set out to narrow the term, by conducting research as to what other article based websites are offering. Looking through a few popular websites, Buzzfeed was a massive inspiration in defining the type of content that I want to offer and produce. The type of content Buzzfeed offers is simple, but mostly entertaining: and that is the type of content that would attract a wider audience to the website, I feel: entertainment.

Thus the content tab was changed from "Human Interest"to "Entertainment" and would reflect, pretty much, the type of article listed above: a list based article, but in line with the theme of my website. I did not have much trouble producing the content, as I consider myself more at home with writing than coding; but if anything, writing the content did take up some time, on account that it fitted perfectly within the context of my website, and at the same time, was entertaining to read.

In the end, I wrote a list article on how to change your life right now and reasons as to why an individual is awesome, which is hit the type of content I aspired to create for my website.

Also, in an attempt to provide more of a variety in reading material, I created content of the same entertaining variety, but different in style. This was mainly to give content that would have a greater chance of appealing to more people and also, in getting them to come back to the site. A news-style article on how a poem helped a man beat depression and a blog-type post from an existentialist musing on the wonder of life, was made to ensure there would be a unique variety in content different from another, which I feel would entice more people to come back to the site.

Producing the Political Analysis Content for We Are Awesome

Arguably one of the main reasons why I set out to make We Are Awesome, a website about trying to strengthen and reconnect humankind,was that I felt humankind could be more powerful if it were on the same page, if there was a place where important issues were disseminated and contextualized.

But to achieve this in some form is challenging to pinpoint, as there are a number of issues that all have merit to be discussed and explained better. All I know with the site is that the content was likely to be in the form of articles, as I enjoy writing and writing about issues that are likely to affect society. And this was a strong point going forward with the website, but as to what type and subject of articles that would be included on my website, was a matter of defining.

And thus, I looked at other established websites out there and a few that I read regularly, became the focal point of what I more or less wanted to produce and how it would be shaped on the page. BBC News - which I read almost daily - is structured as block of content on top of another, with pictures alongside the content to give it a visual presence on the screen. This design is simplistic and as such, gives the website's almost sole focus on written content, more power in suggesting the article's importance.

The Guardian, a news outlet, has articles which are shaped by its liberal political orientation, is fascinating to read and interesting to behold, as the media is known to air on the sensationalist side - but not the Guardian. This type of enticing and moral content, is what I had in mind as to how the main content would more or less be written like for the "Political Analysis" page; a page that would aim to shine a light on important political issues in society today.

I than began to research what is to considered important in this sense and came back with what seemed to make the grade. The 2015 General Election and conglomerates exploiting society in the name of capitalism were definitive of meeting this criteria, but I also wanted to try something different with an old concept and blend it with the a new one. And an article about kindness in the digital age was born.

A challenge with writing these articles is that I didn't want it to sound like it was written by an indulgent, pretentious, intellectual, suggesting what needs to be done in relation to these issues. That would put off a lot of people from reading more content on the website - and even navigating through it, in the worse case. So my aim with producing the content was to write on the aforementioned issues as to point them out and not state the obvious. It would not be wise to state to readers as to what needs to be done; they already know what needs to happen. This approach, I feel, does not insult the intelligence of readers and makes the articles produced, more readable to audiences. Not to mention all the more powerful.

Creating the About Page

Throughout making We Are Awesome, I have gone through a number of emotions: the beginning was filled with fear and worry; the middle packed with dread and penitence of the decision of continuing Digital Media as a module, to now, near the end, a feeling of a calmness among a pre-envisioned madness. While the idea of making a website still does not sit well with me, I surprised to get this far, and now the end of this madness, is only a "About" page away.

The purpose of an "About" page, from my research into it, appears to be a page explaining the purpose of the site, the inspiration behind it and generally, information on how to to get involved either by email or the following of social media accounts linked to the website.  

With this in mind, I envisioned how We Are Awesome's page should look like with a a wire frame. As shown below, the the adage of which I have been following throughout - "Less is more" - takes its form in a very basic page layout of which I have tried to maintain this web design theme and while the premise is a good starting point, it is not the end point, as the page needs more content to make it look like it is the end point of which it can be presented to a web audience.

There is something that could be added to this to make it more powerful and looking around at other websites for inspiration,, I felt that a picture fitting in with the theme of the website above a description explaining the purpose and aim of We Are Awesome, would work better than if it were not to be implemented. In the so-called "Digital Age" we find ourselves in, I decided it would work well for my website to include social media tabs at the bottom of the page, so that when they are clicked, they would open the relevant social media accounts for people to follow.

Bringing the page to life is now as easy as it is going to be, as my previous experience in coding this website, has brought my confidence and efficiency to a level I thought was not possible.

I sourced an appropriate image that perfectly represents the theme of my website, a silhouette of man atop of a mountain, standing boldly amid a descending cloudy sunset, and set that to the width and height for images placed on pages previously, onto the page.

The text that would be placed below describing the website, was burdensome to get right. On the one hand, I wanted to make the explanation of the website as simple to understand as brief as it would be to read. And on the other hand, I needed to ensure that the explanation of We Are Awesome and its purpose did not get lost in translation and would be condensed to be readable for audiences, who are known for their short attention spans. At the end of writing this text of explanation, it was three paragraphs long and honestly, too much for it to be left in that form; in the end, I removed a reference to my exposition of why inequality has manifested throughout society, and that did the trick, as shown below.

Putting in the social media icons and making them link to their social media page was rather simple. I decided to have three popular social media icons at the bottom of the page - Twitter, Facebook and PinInterest. I downloaded JPEGS for these icons and saved them to my images folder, Next I created dummy accounts for these three social media icons that give these icons some functionality when clicked. I ensured that I put in a "table cell" tag so that these icons could fit where I wanted them on the page. I wanted them to be at the bottom of the page, but spread out so that they would be equally divided. For this I specified a "td" tag to ensure that the icons were aligned were I wanted them. I put in  a "href" to make it so that when the image was clicked, it would take you to the relevant social media account.

Having completed the page with the addition of the social media icons, this brings me to the end of structuring and styling my content and pages to meet a vision that has changed many times for how I imagined We Are Awesome would turn out to be. It looks really good, but in trying to meet the deadline, I have had to facilitate the time spent on each page in the name of progression. Some of the pages - including this one - have not been completed to a standard I feel is adequate enough to be submitted in its current form, and they will need to be bettered before the deadline submission.

Creating the Media Page

The difficulty I had in working on this page, was not the structuring and styling of it, but figuring out what function it will serve. At this stage, the idea is that the "Media" page will provide multi-media content based on the theme of the website, through pictures and videos.

I solely intended the "Media" page to broaden the content that would be provided for visitors, as the written articles would not be for everyone, and thus, I felt it was important that my website had something else to offer. The problem with this, is that I do not want to provide the intellectual property of others just to fulfill the pages's premise, as that would be irresponsible not to mention, legally foolish.

But I am adamant that this page will have videos in some form, but in what shape remains bleak to be pursued with intent. However, there is this idea that is in my head of what could be filmed and also fit in with the premise of the website. But is it is just an idea at this moment in time; and like all ideas it must be pursued to see what could come out of it. That idea is to provide filmed content that inspires and encourages people to realise their potentials to reach their dreams, but in what way or in what style, I am unsure of.

This would entail - at the least - that it would be me to personally act as the giver of inspiration and encouragement to others in these videos. These videos will need to be filmed later, but in the meantime, to facilitate the creation of this page, I have decided that I could not personally impart such powerful wisdom as myself, and only a character propositioned to be wise and mysterious could stand a  chance of effectively invigorating visitors in the manner that would work best for the site. Therefore, to have some content to work onto the page in anticipation of these to-be-filmed later videos, I took a few pictures of a character I created and feel would work best on the website, but yet still needs to be better defined to fulfill this premise of inspirational content that the page is intended to provide.

The plan with the content on the page is that it will have a Youtube video embedded onto the page. Looking at W3 Schools and tutorials online, this process is more simple than troublesome. The problem with putting video content into HTML is that not all video formats work well with it, with most requiring that it is converted into an appropriate video format to work efficiently within it. However, if the video were to be put onto Youtube, it would simply need the link for the video to be embedded within HTML and the size of the video box to be specified - and you would be able to have video your website.

As I am not that far into the process of making the videos and embedding them into HTML, I decided that I would embed a picture into my website to show where the videos will go once they are filmed. Again, working with code is much more simple having established a template having worked on the "Home Page", so that this process was of imputation was trouble-free. Unfortunately, the picture I took was taken with the camera in a vertical position, so it does not look right on the web page.

Using the "img src", I implemented the images onto the page and decided that the size of the picture - for now at least, having experimented with it - looks decent enough at a width of 180 and a height of 300 and ensured that the "td" tag gave a specific width to each image so that they could be separated on the page.

                                  

Essentially, the picture above, represents how the finalised "Media" page will end up as, with only the YouTube embedded videos replacing the images. Having scoured endless tutorials on how to implement such videos, I am confident that when I produce the video content, they will be able to be applied into the web page with little-to-no hassle.

Creating the Entertainment Page

When setting out to structure the "Entertainment" page, I thought about whether it should look different in appearance to my previously created pages. This idea was the result of an attempt to appeal more to a potential audience: if there is something different on every page, it would - in thinking, at least - be more of an impetus for exploration; for people to navigate around the site to find out what else is hidden, waiting to be found.

However, looking at other popular content websites such as "The Verge" and "Wired", this idea was quickly abandoned as it was obvious that uniformity across a website played a key part in its identity, and We Are Awesome would have to keep to this idea, if it were to establish its own. Therefore, I decided to keep to the structure and appearance of the my previous pages, as shown in the wire frame below, the only change being the name of the page from "Human Interest" to "Entertainment", as it sounded better.

                                               


Creating the "Entertainment" page was exceptionally easy. Having created the "Political Analysis" page - which the "Entertainment" page would take after - it was a job of simply using that template and inserting the relevant content for the "Entertainment" page.

I went through the "code" and removed the images set there for the "Political Analysis" page, using a image that I sourced for use with an article titled "Ten reason why you are awesome" from my site root folder. Again, having found the optimal size specification for an image on my page during the creation of previous pages, it was a job of merely selecting the same as I had before: a width of 600px and a height of 360px, which I feel is ideal. And again, as the align tag was already set to "middle", it was job of great ease in getting the page to look to my liking. 

Then I set about inputting the headline on top of the image, and having learned the rather simple but vital "br" tag now, it was straightforward enough to input without any problems. The troubles I did have in making this page, were slim, but like all things, trouble is always likely to arise. 

When I selected the "design" tab from Dreamweaver, I found that my image could not be displayed in the website's live form. I was baffled at this new-found coding mishap phenomenon, where the picture was - to my understanding, of course - coded to fit in correctly, but would not display. A quick look on W3 Schools, provided me the with the problem, not to mention the solution. The image file would not display in the "design" tab, I suspect, because the image file text did not specify what it was. Thus a quick "alt" tag with the relevant file information corrected an annoying problem and the picture displayed, with the problem gone. 

Next, I simply removed the text that was in place for the article I had written for the "Political Analysis" page, but for this, I had to be a little proactive. As the article for the "Entertainment" page is written in 10 lines, it required an extensive use of the "br" tags, which took up some time, I must say. It required me to ensure that the coding beneath the article text - in the form of the "par" and "br" tag - was flawless to enable that it would display in lines, as opposed to paragraphs: which can be seen below.

I have become confident throughout this process, not to mention efficient, when structuring and then styling my content pages; particularly with my content pages as demonstrated previously and recently, with the above. However, I am unsure as to what my "Media" page is to look like. It may take the same form as my article pages, but I have the idea that it will be filled completely with pictures and a few videos. This may present a problem when it comes to working on it, but for now, I am feeling confident that when it comes down to it, I can accomplish pretty much anything I set my hands to with HTML and CSS

Creating the Political Analysis Page

The idea with the "Political Analysis" page is that it will display the political content - in the form of written articles - on the page, to be read by visitors. Before setting out to make content pages like this one, I wanted the articles to be displayed similar to the home page, where all the content would be displayed and upon clicking upon a desired article through either the headline or picture, it would take you to the article and page to be read.

Not only would this be difficult to accomplish, but it would look indistinguishable from the home page, and so, it could not be embarked upon, purely so that the visual appeal of the website could be broadened.  Thus, my envisionment for the look of the content page - as displayed below - could not be pursued. 

In the end, looking at other websites - particularly the ones that I often visit and therefore influential for the look and structure of my website - I decided to have all the content displayed on the page, so that visitors could scroll from one article, to the next, on the same page.

Creating this page, I must say, did not cause me too much difficulties as it followed the same philosophy as the home page, as it was about the structure and style of the content on the page. The plan for the page, is that it would have the headline for the article above the image, and the text, would be below the image, and this style, will be persist down the page.

I began with placing the image I plan to use on the page and played around with the size of it, to see what would make the design of the page look most effective. The images on the home page are rather small, and having inputted the same size for the the page, it did not look right, as the page loses its visual appeal and presence, as the pictures are too small to do such a thing. In the end, I decided to go with a width of 600px and a height of 360px, with the image placed in the "middle" with the align tag, as having  experimenting with the placement of the image, this appeared to be the most effectual for the look of the page.

Once I was satisfied with the look of the image on the page, I put the headline for the article above the image with the use of the "par" tag, which while not difficult, was tricky, but ultimately accomplishable with the help of tutorials. The problem was that the below image and above article headline clashed, but once I realised the power of the "br" tag, this problem was solved. 

My article at this point for the page needs to be improved, but for the purposes of progress, I set about to structure it into the page. This was quite simple to do, as trying to make the headline and picture fit in tandem on the page, I understood how best to do this with the "br" tag. I inputted the "par" tag and copied the text for the article from the Word document were it had been written and put it in Dreamweaver. I had to stop once in a while and check the look of it in the "design" tab to see it the text had been cut down into readable paragraphs to ensure it looked good on the page. I think for now it succeeds in doing this, but it may change shape in the future, with some feedback.

I have stated numerous times in previous posts that I do not enjoy coding - and while that will remain for the foreseeable future as I am an individual purposed to be a writer and entertainer - some part of me enjoyed the process of the creation and structuring of this page. That was possibly because it did not require too much difficulty, as that had been experienced with the creation of the home page, and the page for the latter, was used in the creation of the former, which massively improved the time it took to work on this page.

As I produce more content, they will fit in effortlessly in the page and the creation of the next page I plan to work on, the "Entertainment" page - and will simply take on the structure of this page, as this seems the best in the name of web design principle: less is more. 

Creating the Home Page

The most important aspect for the website appearance, I feel, will be the home page. This is the page that visitors will first see upon visiting my website, and it must strike and entice them into staying and then, compel them in exploring the site.

Thus, in creating the home page, I felt added pressure to ensure that it was more or less, perfect, to these meet this aim. Having used Notepad to make a generic site, has helped me build my confidence when it comes to coding, but creating the home page to the vision set out in the wire frame, was challenging and frustrating.  

A trouble I found was making the banner fit across the screen, which for some reason shriveled into half the original size of the original image and I spent a while trying to get right. I suspect that it may have had to do with the size of the banner chosen in Photoshop, as I checked that positioning of the banner image in the margin section, and it appeared to be in order, but at this point, I have decided to leave it and return to it later, to get some progress with the page.

As detailed in the wire frame, the plan is to have images on the homepage as clickable squares, which upon clicking, would take you to the page where the content is. This was frustrating to ensure it looked good on the page. It took a while to ensure that the image put onto the "content" section of the page, fitted to the wire frames specifications. I tried an an assortment of sizes for the images: 600x 200 and 500x150 in particular, but these sizes looked disproportionate to the page. I had a brief look online an found that an optimal size was around 300x180. Putting this size not only allowed me to put a good fitting size, but allowed me to put an extra image than the wire frame had planned.  

mention table tag in structuring content

I repeated the process for the rest of the page, carefully ensuring that I had put the correct location tag to ensure the image fitted below and did not clash with the images put above their headings. The headings were probably the simplest attribute to input throughout making the home page, which without the use of tutorials, especially W3 Schools, would have been near impossible to do anything else. 

While still needing improving, the page for now, is pretty much the way that I wanted it to look. Once the content is complete - articles and video - the images for them will go into the blank boxes as shown in the images found above. Also, the page in its current form, will not appeal visually in a black coloured state, which will need to be thought about in ways of visual improvement. I like the idea of a moving background, as it will stimulate and also entertain visitors, which is what my website will aim to do. I will need to do some research into how this is done. 

Audience Feedback on We Are Awesome Website

I thought it was wise to present my website's theme and blueprints to an audience before starting work on it, to see if the conception and vision for it, would be something that would be welcomed, not to mention would allow me to tweak anything that was not going to work.

As mentioned in previous posts, the concept is very abstract: a website whose aim is to reconnect and strengthen humankind together again, is a bit ambitious, may be deemed too pretentiousness and would likely render it un-wanting by an internet audience, if the premise and execution of that premise, is not right.

I am sure that my website is going to work, but the problem with bias is, at times, it may make your judgement less than objective. To ensure that my bias would not interfere with my objective of making a well received website with desirable content, I took to the library at Penrhyn Road to conduct direct audience research.

Talking about my website premise, I find in thinking, will be misinterpreted and misunderstood by individuals if I only offered the spoken word to discuss it, so to avoid an ineffectual day of research, I printed off the wire frame to present the look of the website and draft versions of the content for both the"Political Analysis" and "Entertainment" pages to offer the planned content for the website. I also planned to ask them questions from a closed-ended questionnaire I had made, once I had shown them the blueprints to gauge their feedback.

I did not limit who I asked for feedback about my website, as my website audience as defined in my pre-proposal, stated that the target audience was the “socially conscious, from the ages of 18-30", which would sum up pretty much, in my eyes at least, students at university - so targeting the right people to ask, would not be a problem.

I asked, as I kept count, 20 people in total their opinions on the concept of the website and the look of it. I found that most liked the idea and thought it was "great", while some of the respondents, thought the website appearance, could have been "better". This was probably something to do with the wire frame, which isn't striking at all, and after explaining that I planned to put in an animation background into the  website, along with a loose shade of black which would make it all the more striking to further explain the wire frame, the envisioned appearance, went amiss. Respondents liked the idea of the website, but felt the appearance could have been bettered.    

Audience Research: Idea of website was "great" but website appearance could have been "bettered"

The majority of the respondents "loved" the content, especially the content for the "Entertainment" page. This was an article I had written called "10 reasons why you are awesome", which is in the manner of a "listical" popular on BuzzFeed and fits in with my website theme. BuzzFeed was a massive influence  for the content for my website, and the content produced in homage of it, was very popular with my respondents. 

Audience Research: While idea behind the"Political Analysis" content was appreciated, it put off 75% of respondents, but "Entertainment" content was well liked

However, what surprised me was the response to the content that would be on the "Political Analysis" page. My thinking initially was that people would enjoy reading a simplified article that would better explain something, even if it was something as mundane as politics.  The article that I presented, was a piece on the 2015 General Election that sought to better explain the context and importance of it, in a simple and readable manner. Respondents were put off by the topic of politics, but appreciated the idea behind what I had sought to do with something of a political nature. Most did not feel the same way, but a majority did, around 75%, I would say. 

At this moment in time, these were the things that I was concerned about: the appearance of the website and the content that will go on there and as such, were the only things presented to respondents.

By carrying out audience research, I realise how important it was that I did so. Some aspects were dismissed such as the opinion-led article on the General Election and now seeing it from the point of view of potential website visitors, the article tried too hard to change public perception as opposed to guiding it, which they were right about. But the website's idea of aiming to foster a better society was liked and the content for the "Entertainment" page, was also liked as well. 

Having conducted research into my website, I will take aboard some suggestions and criticisms from my respondents, which are seen below:  

Appraisals:

• Idea of website premise
• Entertainment content
• Streamlined structure of website

Criticisms:

• Political content too opinionated 
• Website look too bland
• Needed a better palette of colours and themes

Changing the Look of We Are Awesome

In the rush to meet the pre-proposal deadline in October, the look of the website was not given a due diligence that it deserved. The wire frame produced, showcased the initial idea of what I was aspiring to achieve and what it would look like once I had fulfilled my aspiration, but looking back at it recently, I felt that this is not how the website should look like - at least, not anymore.

For one, the layout of content on the wire frame is too cluttered. There is too much going on and too much space is taken up by extraneous content. For example, there is a search bar and social media icons, which would not add anything ground-breaking to the website and in fact, wastes a lot space that would be better served visually if it were to remain blank.  

Also, the content section of the wire frame displays way too much content and as such, a process meant to add, takes away, with simply, too much of a lot. The footer as well, contains inapplicable design  principles: again, way too much content originally propositioned to give the impression that the website contained something for everyone. But this is only the opposite. And this honesty in critique, allows me the opportunity to see what needs to rectified before it can no longer be rectified.

                                    

 Which means the look of the website needs to reflect a design and structure principle, that would suit a modern-day media audience. This is best demonstrated by websites that are popular and gain a huge number of traffic as a result of their popularity.

Here are a few good examples of websites that not only could I find, but also liked as well.

BBC NEWS

WIRED

BUZZFEED

Looking at these examples, it is clear that my wire frame misses the idea behind modern-day web design: less, is definitely more. The less that there is, the more that will be seen. At this point, my idea is to produce written content in the form of articles for the website and thus, the web page design will be in a format that serves this premise well. And that is through a news/blog web page, similar to that of BBC News as mentioned previously. But it must be different of course, for We Are Awesome to generate its own personal identity and uniqueness. With these two design principles in mind, I was compelled to alter the original plan for the look and structure of the website, to represent my findings and critique of the aforementioned wire frame. Below is my new wire frame.

It more or less, looks the same but for one fundamental difference: it is streamlined with less extraneous clutter, which in my eyes, is what a modern web page should look like, and will be the vision for We Are Awesome going forward.

Defining the Purpose for We Are Awesome

The difficulty I find with working on my website, is that the concept is not clear, or as greatly defined as it could be. The idea is that it will aim to strengthen the bond, I feel, is currently impaired among individuals in society and aspire to reconnect humankind together again and make it stronger. But, at the moment, at least, this is easier said than done. 

In my Prezi proposal I stated that We Are Awesome will "champion and then foster a collective identity that we all share, but hardly realise: We are all connected as human beings" and in my pre-proposal I said that the website will be "centred on the greatness that I know humanity as a mutual power possesses, to promote its beauty and to empower the idea of a collective unity...we have with another." This raises more questions than it answers.

In being broad and not explicit with the purpose of what the website will aim to do and how it will do it, does not bode well in proceeding with it, without a better definition and purpose. Therefore, it is important that the site and how it will reach its aim, is better explained.

There are numerous impediments that necessitate the divide among individuals, such as  socio-economic factors and a lack of education. There are surely more, but these are reoccurring. I envisioned We Are Awesome in some way plugging the divide and ensuring that its existence would narrow this and also empower individuals, to be on the same playing level. I am under no illusions that this endeavour will act as a cure for these problems, but I would like to, in some way, curb the divide and unshackle individuals in the process.

Education is a primary reason for a disconnect among individuals, as education enables the growth of a person; if one person gets an education they will grow, while the other without it, will not. Therefore, We Are Awesome will aim to fulfill this purpose; to put issues that affects the divide into a relatable manner, that will be understood  by a wider audience and hopefully, foster in a more stronger and equal society. Topics like politics and capitalism are difficult to relate and generally, do not enthuse excitement among the population. But what if, they did? This will be We Are Awesome's purpose. To make is so.

If making awkward topics understandable, empowers individuals, then stimulation will foster in a collective identity. And by stimulation, I mean celebrating and promoting this forgotten ideal to make it commemorated. Not all will be taken by an analysis of politics and wider issues, owing to the status quo that all individuals are unique, but for these, the idea of togetherness with your fellow man may just work. To do this, this will have to be done in  a way that provokes but in a covert manner, through entertainment. and lightheartedness. To show the idea of collectiveness will not just be to show, but to entertain while doing so, that individuals will more likely warm to the idea of a landscape where your fellow man is just as important as you. This will be We Are Awesome's secondary aim.

We Are Awesome will provide content through the written and video form that aims to meet the site's purpose, and also - pardon the pun - to keep humanity awesome.

Creating the Logo in Less than 6 Hours for We Are Awesome

Like the banner, the logo is significant aspect of the identity of any website. If the banner is the supporting player, then the logo is the star. Therefore, it is vital that the logo represents that onus - and so does We Are Awesome.

                                                        

Fulfilling this criteria was not as difficult as initially envisioned; for my 6 hour banner session prepared me perfectly. And creating a logo while also keeping in line with my website's theme, was difficult in thinking, but simple in execution.

I wanted my logo to be very minimalist in design and uncomplicated in structure. Less is more, is the anthem and it was one that I followed. I must reiterate again, that Photoshop and me will always have a problem with one another, but this time, we got on - and creating what I wanted, was more enjoyable than a burden.

Having made the banner previously, I more or less followed the same specifications for the banner size; if memory serves, a 150x100 logo size was chosen. I selected the text tool and wrote my Website's name into the canvas; the only difficulty being the selection of a font, I played around with a few and decided to go with a simple text and a coloured background, in keeping with the aforementioned plan.

                                 

                                 

.

There were a few hiccups in finding the right tools, notably the bucket tool which took an age to locate, but once I did, it was child's play. I played around with a few colours, but two stood out in symbolising, in my mind at least, what represents my vision for my website

In the end, I went for the red, solely as green did not give off the powerful ambience as red clearly did. It might be simple to most, but the end design is what I feel is strongest to my vision and of course, my website, We Are Awesome.

Creating a 20 minute Banner for We Are Awesome in 6 Hours

Identity plays a fundamental role in the presence of a product being memorable with audiences long after their use with a product, which upon re-introduction after a long time is instantly associated with the product and its functionality solely on the unforgettable visuals of the branding. This what We Are Awesome must achieve, starting with the banner first.

As the website's theme is based on the idea of rekindling humankind as a collective force, the banner must represent this. However at this stage, my website's purpose is not narrowly defined and that is still up in the air. One problem I see is that my website has the potential to come across as too pretentious, and another, that it might be ineffectual in achieving what I want: the championing and celebrating the idea of togetherness. See, that sounds really pretentious.

At this stage however, I want the banner to give an ambience of delight and radiance, that when looking at the banner, one will get this sensation. And thus, I sourced some images that more or less gave this feeling, and set about to make it a banner.

Making the banner was such a difficult endeavour; one that took 6 hours. My inexperience but also my resentment with using an application such as Photoshop played a massive role in this. It was not clear to me that I had selected the incorrect specifications until a few hours in, as my computer continuously crashed under Photoshop's incessant demand for  more RAM space; the crashing typically instigated by the placing of an image onto the banner that took upwards of 30 minutes to place.

                               

                              

But design wise, I like the idea of the maxim "less is more", which would imply a minimalist approach. Therefore, I wanted my banner to be simple and streamlined - and be minimal in design. This, upon deliberation with the pictures I sourced, necessitated that the images be placed alongside one another and was my aim for the design of the banner. But this was problematic in reaching as my computer kept crashing.

It was only until I decided to canvas tutorials and forums online that the problem became clear. For Photoshop to be efficient on a computer, it must not run off the computer itself. And so, I set the program to run through an external hard-drive and the crashing stopped. But another problem emerged; the logo I had created would not save under the "save for web and devices" tab. At this point I was 5 and a half hours in, and the inconvenience of creating your logo and finding it could not be saved, to be used on a website that you have trouble working on anyway, was indescribable.

Again, I looked through the forums and it became clear: I had selected the wrong banner size which could not be saved for the web, no matter how hard I tried. So, I had to start all over again. But having realised and understood the problems which got me nowhere in 5 and a half hours, the banner was then created in 20 minutes.

And I feel, that the banner is perfect for my website - it emits a genuine sense of happiness and radiance. It took me 6 hours to make a 20 minute banner, but from looks of it, by God was it worth it.

Trying out HTML and CSS Some More

My confidence with coding is still in its infancy, but its growing the more I practise. I'm still trying to grasp the basics, but my last foray into coding - as detailed in an earlier blog post - was not as bad as I had initially envisioned. Which gives me the hope that I will get to a competent - but mainly habitable - level which will enable me to bring what I have planned with We Are Awesome, to become a reality.

The problem I'm finding at this stage, is the use of Dreamweaver and its complexities. The program has a lot of functions and tools to make the creation of a website easy in practice, but the overkill in functions, does not instill within me the greatest of confidence when using the software. Therefore, I decided - as I've seen on many tutorial videos on Youtube - to have a go at creating a very basic home page in Notepad, to inspire me that regardless of program, creating a website can be possible even in something as simple as Notepad.

I followed a tutorial I found on W3 Schools that simplified the structuring of  HTML and CSS. The instructions were very simple to lead on from. The tutorial about creating a homepage for a website, introduced  some challenging aspects to me which I had not encountered up until this point, such as font and colour types, but mainly the implementation of a style sheet within the HTML page, which Dreamweaver enables you to keep separately.

Working through the tutorial my understanding on how to use certain tags improved and opened my eyes to the possibility of more functions that could be implemented into a website in the future. To change the font of a particular section of text, you would have to have to define that area first; then using the "font-family", you would specify the font by adding a font type such as "Georgia" and in the event the browser were not to be compatible with this font, you would add in another font type like "Times New Roman" just in case.

Having  inputted the <ul> tag to act as my navigation tabs for the corresponding headers , I set about to style them on the page using CSS and move them to the left of the page. To do this, the "padding left" tag was needed and the position of the navigation tabs could be set to a particular distance on a page, using the "absolute" tag. And repeated the process changing the position if necessary, and in the end, I ended up with a very basic, but important web page which will bode well for my expedition into coding, to end up with the vision for We Are Awesome.

Cheating to Win

With the barriers of inhibition broken and the plunge taken into the the depths of a project that had brought worry to a person of my primitive proclivity, I managed to establish a web page despite of my presumption beforehand that such a task would be tremendously difficult: But what I noticed more than anything, was the time it took to accomplish this feat.

This is down to lacking a conclusive knowledge of the function of specific tags needed to create elements to structure my webpage, which often left me having to resort to online resources, so that I could input correct markup language in order to build what I wanted, ensuring that an extensive amount of time that could have been saved, was expended.

What I do not have is a cheat sheet, which would reduce the time spent checking to ensure that correct markup language is inputted, and to avert a situation where wrong code has consistently been entered, making the entire project incredibly demanding to proceed with.

To ensure that such a thing would not happen and to leave me with more time to expend on areas in my life of far more importance than this website project, I made my own "tag" description cheat sheet consisting of the markup language that I would likely need to use frequently, and which is found below:

Div: The <div> tag is used to separate a HTML document into sections on a working webpage and allows that particular line of code to be styled with CSS. 

Par: The <p> tag allows text, in the form of paragraphs, to be inputted into the HTML page. The use of the <br> tag permits the text to be broken up into smaller paragraphs - if that is what is desired - by forcing a line break. 

Li: The <li> tag enables a list to be placed, in either an ordered or unordered format, into an HTML document. For example, the <ol> tag will place a list of the colours red, blue and yellow into a list form prefaced with the number of their position in that list. The <ul> tag will list the colours in the same list format, but will be prefaced with bullet points instead. 

Title: The <title> tag essentially gives a name to your HTML document and without a definition of your HTML document using the <title> tag, your webpage will not validate as an HTML file.  

Link: The <link> tag does exactly that: it links a document to an external style sheet, to style the structure of the HTML document. 

Button: The <button> tag warrants a functional button to be embedded into a HTML document and styled with an image file, to later be clicked on by users to either be told something or directed somewhere. 

Col: The <col> tag makes it easier to set the background properties of columns within an HTML document and makes it troublesome to apply styles to an entire column. 

Foot: The <footer> tag defines the bottom part of a HTML document, referred to as a footer. It is typically used in webpages as a location to place information about the website and its contact details. It is notable that this tag can contain more than one element within it. 

Trying Out CSS and HTML

Having grasped a rudimentary understanding of the theory behind the use of HTML and CSS, it seemed fitting to engage in pragmatism and begin work on my website, We Are Awesome.

Fortunately, as I have Dreamweaver on my personal computer, the inauguration of process is and was, able to be enacted without the dependence of University computers, making progress and completion of the website,  less of a burden than it would have been.

Having a rudimentary but not comprehensive understanding of HTML and CSS, trouble was likely to arise, especially to begin with. At this stage into the project, I would liken my knowledge of the intricacies of Dreamweaver and insight into HTML and CSS, to that of a gazelle; the former and the latter, to that of a lion: my chances of not surviving when it comes to both, are not great.

But, persisting with experimentation, eventually, the ball began to roll. Remembering the minimal education that I was given on the subject, a root folder was created containing an index, when selected, would launch my website into a browser and folders containing files for images and videos was also produced before proceedings got too serious. Without the root folder and folder files within it established beforehand, it would make maintaining and also and managing the project, rather difficult as a root folder stores all your progress and content in one place.

Having done that, the aim of the session turned to bringing the wireframe to life, I laid out the title of the website to go in the centre of the webpage, which was more easier than initially envisioned. Once I realised the functionality of the "div" feature, which acts as a wedge in-between content, did speed with coding pick off and quickly lead to establishing "tab" buttons, to go on the top of the webpage.

Getting to grips: crude HTML look at We Are Awesome

                            

Understanding CSS and HTML

To ensure that the vison set out in the pre-proposal for We Are Awesome is met, it is important that a basic, but fundamental concept is learned: the use of CSS and HTML.

Despite of the valiant intention to create a website with the intention to promote - or even to restore- the idea that humanity is an inclusive and intimately collective force, which is not always realised, using videos and the written word to do so, such a task would be futile if the language required to do this in website form, was not learnt nor understood. 

To ensure that this project would not end before it even had a chance to begin, and to grasp a better understanding of the markup language in order to bring the vison of We Are Awesome to life, a lot of time was exerted into being better acquainted with CSS and HTML.

Using handouts, scrutinising online resources and visiting Lynda.com, gaining an understanding of the role of both - and how to use them - was not as difficult as I had envisioned, despite the predilection of my constant insistence of referring to myself as a "caveman."

HTML, or Hyper Text Markup Language in its lengthened form, denotes the content - font, pictures and written text, to list just a few - that will be displayed on a web page, once read by an internet browser. This content, to use a paragraph of text as an example, in order to be displayed, is put in-between two "body" tags, and the written paragraph of text, is enveloped on either side with a "p" symbol in brackets. This is the method and also language of how a paragraph on a web page is read by the browser, allowing it to be displayed on a webpage, in a basic but crude form.

Cascading style sheets, condensed to CSS, is the markup language which affects the presentation and structure of a website, as I came to understand from my research. For example, the look of a website - the font, the colour and spacing of content, on a web page, to name just a few, is directed by the CSS, allowing the HTML content to be structured and shaped into a webpage that is visually appealing.

In order to do this effectively, the "selector", which defines the specific area of the page that is to be altered, is chosen and works in conjunction with the "declaration", which defines the value of the content - the font used and colour displayed, for example. If I wanted to make a colourful overhead title for a webpage, I would first input the title text into HTML, then using CSS, I would envelop the word "color" with the word of the colour I would want to use, which could be red for example, with curly brackets to essentially create a title that would be red-coloured: it's that simple.

Having grasped a basic, but fundamental knowledge of how to use HTML and CSS, the initial dread of reception with something so difficult in thinking, was proven to be so simple in practice. It would now be appropriate to continue in this unexpected wave of triumph having now conquered my hesitancy in embracing something other than my wooden club, and proceed with putting my understanding into real practice, with Dreamweaver. The long journey to the completion of my website, has begun, and slowly, I get there...

Ceysun Dixon (KU ID: K1326851). 

Wire Frame, Mood Board and Flowchart for We Are Awesome

Prezi Presentation for my Individual Website

 https://prezi.com/lalja1pzrmzp/vvvfv/?utm_campaign=share&utm_medium=copy

Pre-proposal for my Individual Website

Concept:

The inspiration for the website came from the innovations that we as a species continually make in the name of evolution, in areas including but not limited to: technology, biology and politics which furthers the idea that humanity becomes a more prosperous and inclusive force as a result. However, the reality is more the opposite: the collective ideal of humanity as a force of togetherness is constantly broken by social constructs brought on by progression, leading to inequalities in wealth, living standards and opportunities to succeed, when a contrary ideal should prevail in contemporary society.

Because of this, I was inspired to create a website called “We Are Awesome,” centred on the greatness that I know humanity as a mutual power possesses, to promote its beauty and to empower the idea of a collective unity that we – as is often forgotten –have with one another, all intimately connected because we are of the same species: we are all equal. This is the site’s purpose and to fulfil this, the general content on the site will aim to enthuse audiences with the idea of human togetherness but in the manner that the website’s name provokes: in a fun and informal manner. The content will mainly be opinion led, aiming to answer philosophical questions relating to being and aim to foster personal change within individuals with the thinking it would incite, both in written and video form. Analysis of events from the media and the subject of politics will play a major part in the site as well, to aid a better understanding of both and to put it into a wider context that would make it relatable to visitors. And finally, content will also be produced on topics relating to human interest but within the context of my website’s theme. For example, If I were to make articles and videos on the matter of “best” eateries, the definition of “best” within my theme, would entail establishments that encourage an equal society for humankind by paying tax on any profit that they would make and employing workers on full time contracts, never solely ranked on such an issue as taste.  

Target Audience:

I hope that I reach as many individuals as possible with my website, as the theme was selected in response to the disconnect I see in modern society today and strongly feel, is a great step for it to take.  However, with the final product that I envision, with its casual design, its nonchalant ambience, its sophisticated but playful content - not to mention its lively choice of name – my target audience, to describe them, would be the individuals starting to look for answers to some of their questions, becoming more politically engaged and concerning themselves more with their environment and surroundings than ever before: I would define my target audience as the “socially conscious,” from the ages of 18-30. And I believe from what I have outlined here and from what I have demonstrated in my concept designs, my website is suitable for the intended audience.

Project Timeline:

·         

       October 2014

-Submit website pre-proposal and upload blog link to Study Space by 31^st October

·         November 2014

-          Further knowledge on HTML and CSS on Lynda.com

-          Explore handouts on HTML and CSS for greater understanding

-          Experiment with website HTML and CSS in Dreamweaver

-          Begin producing articles and consider filming content for website

-          Amend banners on homepage in Photoshop and settle on logo for website name

-          Detail all progress on blog page

·         December 2014

           -Design banners for other pages in Photoshop

          -Film content for website

           -Create more written content for website

          -Format video and text onto page, address presentation if necessary

          -Show Maria progress of site for feedback before submission following month

          - Adjust CSS side of site to ensure there is not too much clutter with all content

          -Detail all progress on blog page

·         January 2015

          -Show Maria one last time before submission

          -Tweak website for submission, and ensure presentation of site looks perfect

         -Submit final website on 7^th January with evaluation  

Word Count: 671