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.