Last Seen Blogs
officialcaltext
Bread Enjoyer
98chao
kye (COMMS PAUSED)
jocaswell-blog
Untitled
sonderliing-blog
Wʜᴇʀᴇ ᴛʜᴇ Wɪʟᴅ Tʜɪɴɢs Aʀᴇ
sonelesoleil
my drawing blog
Text
6.2
Rationale:
BEAT is a Visual News Service, and as far as I can tell, it’s the first of its kind. BEAT’s key point of difference from every other news site is that it is completely image focused. There is not a single piece of body copy across the whole site, every article consists only of images, headlines and image captions. The reason for this is that I identified that especially in younger generations, our attention span for reading news is decreasing, however our attention span for viewing images has remained stagnant for the last few years. On top of this BEAT is a Wellington only News site. The site only features News, Culture, Sport and Art because I have narrowed Wellingtons interests down to be most vested in those categories. The visual only element also lends to the locality of the site because an audience more familiar with the subjects of the images (i.e Wellingtons surroundings, Wellingtonians and Wellingtons events) will recognize the context of the image more easily. The functionality of the website is extensive enough to cater to the needs of the specific user personas but simple enough that a regular user could become familiar with every page. I kept it simple because I wanted it to be a website that locals could form an intimate knowledge of, I hoped that this would help develop the audience into a loyal and personal market base.
0 notes
Photo
6.1
Todays lesson began with a critique. It was interesting to see everyone else's work, most peoples were looking very polished and finished after working on them all holidays.
I received quite a bit of helpful feedback and critique of my prototype. To summarize my feedback:
+My images aren't crisp enough - I already knew this but hadn't fixed it yet, i’m not quite sure why its happening I dont think its a rasterizing problem I think its to do with my photoshop artboard settings but I will get on to fixing it before hand in
+I recieved conflicting feedback on my color scheme, some said it was “too much” some said it was “very aesthetic”. I cant please everyone so I dont think I will change them
+I got the same feedback as i did in week 4 that I need to add a hover function to all my images to provide more on the images context. I am currently trying to implement this into my code with relative success. I still am not sure if its possible to do this in XD but If not I will find another solution.
+homepage looks too different from the website - I did suspect this already I think that if I change the colours of the titles on the home page to each of the menu colors this will be resolved.
I also just finished coding the article page for mobile. The article page is not responsive in terms of stretching the browser window. However there is a breakpoint to mobile (iphone 5) so that the same page can be viewed on either screen.
0 notes
Photo
5.1
During this class I had a big troubleshooting session with Tim where he helped me fix my Javascript. Tim fixed this bit of code for me:
$(function(){
console.log('it works, hey');
//$('#smalllogo').data('size','big');
});
$(window).scroll(function(){
// console.log($(document).scrollTop());
if($(document).scrollTop() > 342)
{
$('#wrapper').css({
'position': 'fixed'
})
$('#picsbox').css({
'margin-top': '201px'
})
// if($('#smalllogo').data('size') == 'big')
// {
//
// $('#smalllogo').data('size','small');
// $('#smalllogo').stop().animate({
// width:'80px'
// },550);
// }
}
else
{
$('#wrapper').css({
'position': 'static'
})
$('#picsbox').css({
'margin-top': '0px'
})
// if($('#smalllogo').data('size') == 'small')
// {
//
// $('#smalllogo').data('size','big');
// $('#smalllogo').stop().animate({
// width:'40px'
// },550);
// }
}
});
This means that once the wrapper reaches a certain height it will become fixed at the top of the page until the user scrolls back to the top, then it will become unfixed at a certain point. I still need to figure out how this will work when the website is not full screen.
After I finished with Tim I ran some more user tests. I didn't want to test on my classmates because of the environmental factors that I talked about earlier so I took my prototype to the print module and had a few of them test it. The feedback I received there was pretty helpful. I was told that I should have a Māori language feature since this is a New Zealand news site so I will insert that later.
I also finished my mobile prototype:
https://xd.adobe.com/view/7cdb7fb4-2323-4c10-814d-90a2bedf7538
0 notes
Photo
4.2
Today was the ‘user testing mega studio’. The whole class tested everyone else's prototypes critiquing and giving direct feedback. This is close to the prototype I presented:
https://xd.adobe.com/view/51a3741d-8f21-43c8-a4b5-f472c16c11a3
Unfortunately I accidentally overwrote the prototype that I showed in class because after we were finished I went and changed most the things that I received feedback on. The suggested things I changed were:
-I made the pictures circles because as squares people said they felt too much like they were just dumped on the page, and I also got a lot of criticism that they didn't match the mobile layout which is in circles.
-I split tone colored each picture because I got feedback that the colour of the images clashed too much with the colour scheme of the website.
- I added a search bar because I noticed that when I told a few people to look for a specific article they immediately started looking for a search bar.
I also got more feedback that I need a hover function on the images to give more details about the stories they are telling. I have yet to implement this though.
0 notes
Photo
4.1
Today I attended a workshop run by Tim on responsive coding. The workshop was really useful because for the first time I learnt a lot of new stuff since I have never done responsive or mobile coding before. The best technique Tim showed us was how to implement a ‘break point’. Break points allow the website to switch from a desktop layout to a mobile layout once the site is resized past a certain point. However when I tried to use a break point for my website I found it very difficult to handle, as soon as my website hit the breakpoint everything would disappear. I solved this problem eventually but was hit with more and more the further I tried to go. I am currently still working on making my site responsive but I am finding this a very difficult step.
The mobile layout is slowly coming together. Ive put pictures of the news and article page above.
0 notes
Photo
3.2
During class we had another user testing session where I received some quality critiques. The feedback I found most important was that I need hover functions on my images to provide more context about the articles behind them, and I should make my website a Wellington only local news site. It was suggested that i make my site Wellington only because that way Wellington locals will be able to recognize the subjects of the pictures with less explanation than other people would need. I also received feedback that my logo wasn't great so I brainstormed and produced some more logos of a similar style (pictured above). After I presented them to my peers however the original logo was the most popular so I stuck with it.
The critique I received last week has reshaped my website quite significantly. Tristram told me that I needed to strip back some of the elements of the site. Doing this gave me much more room to work with the aesthetic of the website and I think its looking much better. I have completed the news page (pictured above) so far. I added lots of vibrant colors because it was brought up in my feedback that the website felt too dull which I completely agree with.
This week I also started working on the mobile layout. So far it seems that the mobile version will be very similar to the desktop layout but displayed in one column rather than multiple.
0 notes
Photo
3.1
https://xd.adobe.com/view/71995539-99f4-47f1-b26a-e0b36bac62e4
I finished prototyping my wireframes from last week at home and ran the prototype through some user testing. The test all went very smoothly with all of my flatmates reaching the desired goals effortlessly
However in the lesson I had my prototype user tested. The story here was a bit concerning, the people I tested on took a lot longer than I expected to reach the given destination and were much more critical of pretty much everything. I wonder if that is a symptom of the environment. Maybe people in class feel they need to be as critical as possible because they want to provide as much feedback as possible. If so testing in class may skew my perception of how people are finding the website, as a result of this I think testing in an enviorment where people would naturally look at online news would provide the best results and I might try this in the future.
I then had a one on one critique with Tristram who gave me a lot of advice. The most poignant points were:
- I should scrap my header all together and put ‘beat’ where ‘news’ is. This should fix the hierarchy problems that I was having which hindered people from being able to discern what category they were looking at.
- My related section doesn’t make sense being on the menu page. Tristram was confused as to what the related articles were related to. He asked if they were related to the ‘top stories’ or ‘the week in colour’ and I didn't have a clear answer so I decided to remove the related section all together.
0 notes
Photo
2.2
Todays lesson began with a presentation from Tristam. I then attended Tim’s workshop on coding which was very helpful. I had forgotten a lot of the web coding skills and techniques I learnt last year so the workshop was a good way to jog my memory back into the coding mindset. During this class I also finished off a prototype that I had been working on called BEAT. This prototype is completely different from my last one because I decided I wanted to make my own news service rather than revamping the Dominion Post. The concept for the news service is a website built mostly out of images. The articles themselves have no body text only headlines to provide context for the images. I thought of this idea while talking with my peers about how we absorb news online. Most of the people I was talking to said that they barely ever bothered to read articles they usually just scrolled through looking at the pictures and sometimes reading the image caption.
The market/audience for beat I presume will be younger people who were never really introduced to news papers and are used to viewing their news online. Studies have shown that peoples attention span for reading is shortening
https://venturebeat.com/2016/12/04/our-8-second-attention-span-and-the-future-of-news-media/
I think that BEAT could be a great way to capture that audience and bring them back into the loop.
0 notes
Photo
2.1
https://marvelapp.com/8296e5h
At the beginning of todays class Tristam talked to us about human centric design. I found that his points around the importance of prototyping resonated with me because of mistakes I’ve made in other classes. He then showed us a clickable prototyping app called POP which I decided to have a go with straight away because of the previous discussion. I prototyped the paper version of my dominion post website that I had made for home work. Luckily this worked quite well because the site I had drawn up was intended to be flexible enough to work on both desktop and mobile. This is the link to my clickable prototype .
After testing my prototype I realized that the style of website that I am looking to create didn’t really lend itself to clickable prototyping apps. This is because each click of the prototype has to take you to a new page, but the website I want to create is mostly based around one page that changes with each click but does not switch to a new page.
Another issue that user testing raised was around the lack of a back button. I thought my site didn’t need a back button because the navigation buttons at the top always give you the option to back out from where ever you are. However while testing the prototype on my peers I found that even though the nav was right there people still spent a fair bit of time, and even felt stuck sometimes, searching for a back button.
0 notes
Photo
1.2
This class for the most part was about “User Journeys”. I had learned about user journeys before in a previous course but it was interesting and refreshing to revisit the process. A user journey is the steps that a person takes to travel through a website.
I brainstormed for a while trying to think of a way to improve the Dominion Post but came up with nothing. In the end I drew the concept pictured above by putting pencil on paper and drawing without any plan of attack.
I was initially very skeptical of what I had created, but showed the home page and a short user journey to Tristam who was surprisingly enthusiastic about the concept.
After I drew the homepage I created goals for the first three personas (also pictured above). I then drew more pages so that the personas could reach their user journey goals. I was initially intending to do all six personas but after three I was bored of drawing very similar pages over and over and decided to spend my time thinking of improvements I could make on what I already had.
0 notes
Photo
1.1
For our first class we looked at newspapers and studied the differences between how news is presented online vs print. I looked at the same article in the Dominion Post newspaper and the Dominion Post website and was surprised to find that the two stories differed not only in layout but also in content. The body text of the article on the two different platforms did not differ but the images, titles and additional information did. The online article had about twice as many images as the newspaper did as well as a video embedded in the article. It also had a different subtitle to the newspaper and provided more information about the author.
Overall this was a helpful exercise to understand just what this assignment will require of us.
0 notes