During the lesson today, the teachers came around and had some small 1 on 1 conversations with each of us, in order to see what ideas we had come up with over the past few days, and trying to help us clarify and flesh out our ideas.
I had come up with three ideas which I was thinking of using:
1. How to measure success in design: Fame vs Satisfaction, Money vs Enjoyment etc.
2. Confusion around design degrees: Workload, what we exactly do, future jobs etc.
3. Crafting and Polishing of typography: The fine micro details of typography
Out of these three, since I really like typography, I was leaning towards the third one. A design conference about the perfectionists inside of us, and the polishing and crafting details that type requires.
For homework, we have a couple of tasks that needed completing. Firstly, we are required to continue to define our design conference, come up with a name, and try to come up with some sort of tagline/subheading for it, which works hand in hand with the title or imagery used. Along with this, we have been asked to research some potential speakers for out design conference, and then come up with some thumbnail poster concepts. Once we come up with a decent amount of thumbnails, we need to either draw or print in A3, three of these concepts to see how they work once digitally created.
I will come up with these for Tuesday's class, and they'll be in my physical workbook.
Friday, 29 April 2016
Tuesday, 26 April 2016
Introduction to Print
Today's class was an introduction to our new studio paper, this term I am doing 'Print'. The lecturers introduced themselves to us, and we got introduced to the brief as well.
I find the brief quite interesting and exciting, as we have a whole suite of things to produce. I'm looking forward to seeing how I can make them all look as part of one larger trans-media set, and how I can develop and refine my concept across the next 6 weeks.
Most of today's class was around brainstorming initial ideas around potential concepts to look at for our design conference. We had split into groups at first, and brainstormed some key words or ideas that relate to graphic design, and how we could use these. Once we had done the group work, we joined back up as a whole class, pinned them up on the wall and began discussing the key points of each.
I've drawn up our initial brainstorms in my physical workbook.
By Friday, we have been asked to narrow our ideas down to a couple of concepts that we think we would like to go with, so that we can then begin conceptualizing these and coming up with quick thumbnail sketches for part one of our suite, the poster. We've also been asked to begin searching for some visual precedents of some posters or trans-media suites that we find appealing or interesting, which we could go on to use as inspiration.
I find the brief quite interesting and exciting, as we have a whole suite of things to produce. I'm looking forward to seeing how I can make them all look as part of one larger trans-media set, and how I can develop and refine my concept across the next 6 weeks.
Most of today's class was around brainstorming initial ideas around potential concepts to look at for our design conference. We had split into groups at first, and brainstormed some key words or ideas that relate to graphic design, and how we could use these. Once we had done the group work, we joined back up as a whole class, pinned them up on the wall and began discussing the key points of each.
I've drawn up our initial brainstorms in my physical workbook.
By Friday, we have been asked to narrow our ideas down to a couple of concepts that we think we would like to go with, so that we can then begin conceptualizing these and coming up with quick thumbnail sketches for part one of our suite, the poster. We've also been asked to begin searching for some visual precedents of some posters or trans-media suites that we find appealing or interesting, which we could go on to use as inspiration.
Friday, 22 April 2016
Hand-In
Once arriving in class, we were instructed that the class was going to be solely studio time, where we had the chance to ask Tim and Tristam for any final feedback or last minute questions around submission criteria.
I spent this studio time sticking my final few print-outs into my physical workbook, as I had already finished my PDF presentation of User Journeys, and UI/UX Specifications. Towards the end of class, I downloaded my InVision files, zipped up all of my folders and submitted them on stream.
I spent this studio time sticking my final few print-outs into my physical workbook, as I had already finished my PDF presentation of User Journeys, and UI/UX Specifications. Towards the end of class, I downloaded my InVision files, zipped up all of my folders and submitted them on stream.
Thursday, 21 April 2016
Concept Rationale
NZNW, (New Zealand News Wall) is a condensed news wall which allows for efficient navigation of news, in a more entertaining, image-based way. It was inspired by 4News Wall, created by Channel 4 News. However, their site was compiled out of GIFs, which in my opinion got super annoying and distracting seeing so many moving images all at once.
The creation of this News Wall came down to the notion that people are more likely to remember, or identify things with pictures than they are with words. If someone was to try and remember the main picture used in the article, or what the heading said, the chances are they’re more likely to remember the image having registered it visually rather than skimming past it to the body content and not fully taking it in.
Within the site, there are category and sub-category filters, which allow these news walls to be filtered down somewhat, in order to improve the efficiency of the navigation. Along with this, I have added in some date filters, which run down the right hand side of the news walls. What this does, is it allows the users to filter their searches even further if they’re looking to find something specific, otherwise they’re free to continue scrolling down the pages. The dates are written down the page, so by scrolling further down, you are able to click on older dates from further back. In order to improve efficiency for a user trying to find an article from a couple of months, or even a few years ago, I have further included a ‘Change Dates’ tab, which allows the user to change the months and years that they view articles from, via a small pop-out menu.
Another strength of NZNW is the chance to set notifications to receive updates upon the release of new articles, and the ability to customize these to suit your own preferences, as the user gets to select exactly which categories they want to be notified about.
The New Zealand News Wall is an intriguing step away from the plain old website, while making sure to keep the same news website feel to it, through the use of some traditional and common aesthetics such as the category tabs at the top of the page, although getting more creative in the approaches to how the site is actually navigated.
The creation of this News Wall came down to the notion that people are more likely to remember, or identify things with pictures than they are with words. If someone was to try and remember the main picture used in the article, or what the heading said, the chances are they’re more likely to remember the image having registered it visually rather than skimming past it to the body content and not fully taking it in.
Within the site, there are category and sub-category filters, which allow these news walls to be filtered down somewhat, in order to improve the efficiency of the navigation. Along with this, I have added in some date filters, which run down the right hand side of the news walls. What this does, is it allows the users to filter their searches even further if they’re looking to find something specific, otherwise they’re free to continue scrolling down the pages. The dates are written down the page, so by scrolling further down, you are able to click on older dates from further back. In order to improve efficiency for a user trying to find an article from a couple of months, or even a few years ago, I have further included a ‘Change Dates’ tab, which allows the user to change the months and years that they view articles from, via a small pop-out menu.
Another strength of NZNW is the chance to set notifications to receive updates upon the release of new articles, and the ability to customize these to suit your own preferences, as the user gets to select exactly which categories they want to be notified about.
The New Zealand News Wall is an intriguing step away from the plain old website, while making sure to keep the same news website feel to it, through the use of some traditional and common aesthetics such as the category tabs at the top of the page, although getting more creative in the approaches to how the site is actually navigated.
Tuesday, 19 April 2016
Weel 6 Session One: Final Presentation
Today's class we had a chance to user test in small groups, as well a present in groups to Tristam. In the user testing, it was our final chance to see what worked, and what needed changing, so that we could go and make any last changes before Friday's hand-in.
For today's class, I had prepared my two InVision prototypes, one for mobile and one for desktop, my speculative sitemap, as well as my fully coded web pages. Below are the links to each of my InVision prototypes.
Mobile: https://invis.io/BM6ZR5CYV#/151592638_Home_Page
Desktop:https://invis.io/BX72B3IKQ#/150904397_Home-Page
In the user testing, my group had no problems with navigating their way through both my mobile and my desktop version. They were super impressed with the visual aesthetics of my website, as well as how it was easy to navigate, they said there weren't any stages where they were unsure on what to click next to get to the next part of their user journey.
The second part of class, my group went up for our presentations with Tristam. During this presentation, I got more good feedback on my website, and didn't come across any major changes that I needed to make by Friday. This meant that I was able to continue working along and begin whipping up the UI and UX specifications. It was good to get clarification on what exactly to do for the speculative sitemap, as my initial mock-up was 'too-detailed', as I had included more possible links than was required.
In a way I'm looking forward to handing this project in on Friday and moving on to the next assignment next week, in my Print module, although I'm going to miss this paper. At the beginning, I didn't really have many ideas as to how I was going to make my newspaper unique and stand out from the rest, although after working on it consistently, and ideating week in week out, I feel like I've come up with a strong concept. My concept's layout in terms of tabs at the top of the page, search bar top right etc are all very conventional, although it's more in the actual user's navigation of the site where my website stands out from an ordinary news site.
At the beginning I also found coding super confusing, and struggled to wrap my head around it. Surely enough, it helped by jumping straight in early on and having a play around with it, even during the wire framing stage I was experimenting with the coding of the article page. In the end, starting on the code so early on worked in my favour, as week in week out I was able to slowly craft my website and refine the detailing to get it exactly as I wanted it.
For today's class, I had prepared my two InVision prototypes, one for mobile and one for desktop, my speculative sitemap, as well as my fully coded web pages. Below are the links to each of my InVision prototypes.
Mobile: https://invis.io/BM6ZR5CYV#/151592638_Home_Page
Desktop:https://invis.io/BX72B3IKQ#/150904397_Home-Page
In the user testing, my group had no problems with navigating their way through both my mobile and my desktop version. They were super impressed with the visual aesthetics of my website, as well as how it was easy to navigate, they said there weren't any stages where they were unsure on what to click next to get to the next part of their user journey.
The second part of class, my group went up for our presentations with Tristam. During this presentation, I got more good feedback on my website, and didn't come across any major changes that I needed to make by Friday. This meant that I was able to continue working along and begin whipping up the UI and UX specifications. It was good to get clarification on what exactly to do for the speculative sitemap, as my initial mock-up was 'too-detailed', as I had included more possible links than was required.
In a way I'm looking forward to handing this project in on Friday and moving on to the next assignment next week, in my Print module, although I'm going to miss this paper. At the beginning, I didn't really have many ideas as to how I was going to make my newspaper unique and stand out from the rest, although after working on it consistently, and ideating week in week out, I feel like I've come up with a strong concept. My concept's layout in terms of tabs at the top of the page, search bar top right etc are all very conventional, although it's more in the actual user's navigation of the site where my website stands out from an ordinary news site.
At the beginning I also found coding super confusing, and struggled to wrap my head around it. Surely enough, it helped by jumping straight in early on and having a play around with it, even during the wire framing stage I was experimenting with the coding of the article page. In the end, starting on the code so early on worked in my favour, as week in week out I was able to slowly craft my website and refine the detailing to get it exactly as I wanted it.
Friday, 15 April 2016
Responsive Web Design
Below are some mock-ups of how my coded article page reacts when used on different sized browsers, such as desktop, mobile and tablet.
Coded Responsive Article Page
After class today, I continued working on my coded article page, and making it responsive. I'm super stoked with how this has come along, and how similar I've managed to get it to my Photoshop mock-ups. Below, I have attached some images of my responsive mock-ups with some annotations.
I have created a responsive page, so that it is suitable for all different sized devices, such as a desktop, mobile, and even tablet:
I have created a responsive page, so that it is suitable for all different sized devices, such as a desktop, mobile, and even tablet:
I've worked a lot on these different screens and tried to figure out how I can make theme suitable for each device. The desktop screen is obviously a lot larger, hence the larger font sizes and image sizes etc. I've also included the main navigation bar in there also. Once the browser width gets below 940 pixels, the search bar become a smaller search icon, the navigation bar turns into a hamburger menu, while the logo moves centrally and the tagline disappears, as it would become too small to read anyway. The secondary navigation bar (to navigate within the category) also shifts to two lines rather than one, for when the browser width gets smaller. The social media icons also get smaller.
The font sizes all reduce, while the photos get smaller as the browser shrinks. As it keeps reducing in size, into the mobile width, the photos continue to shrink so that the whole photo fits on the screen at once, while the 'related stories' photos move into two columns rather than one, otherwise they'd become too small to see and read the headline. The comments sections become longer as the browser becomes narrower, in order to fit in the whole comment.
I am extremely pleased with how this has turned out!! I'm going to Photoshop up a mock-up to see how they would look on desktop, iPad and iPhone display, so that it puts it into context.
On Tuesday we have our final presentation before hand-in, so over the next few day's I'll continue to steadily work on the InVision prototypes, and once they're done I'll move onto the UX and UI Specifications, as well as the Speculative sitemap and Rationale. I feel like if I continue to work at the rate I have been so far in this project, I'll be able to polish it up to a standard that I'll be proud of and hand in work that is to the very best of my ability.
The font sizes all reduce, while the photos get smaller as the browser shrinks. As it keeps reducing in size, into the mobile width, the photos continue to shrink so that the whole photo fits on the screen at once, while the 'related stories' photos move into two columns rather than one, otherwise they'd become too small to see and read the headline. The comments sections become longer as the browser becomes narrower, in order to fit in the whole comment.
I am extremely pleased with how this has turned out!! I'm going to Photoshop up a mock-up to see how they would look on desktop, iPad and iPhone display, so that it puts it into context.
On Tuesday we have our final presentation before hand-in, so over the next few day's I'll continue to steadily work on the InVision prototypes, and once they're done I'll move onto the UX and UI Specifications, as well as the Speculative sitemap and Rationale. I feel like if I continue to work at the rate I have been so far in this project, I'll be able to polish it up to a standard that I'll be proud of and hand in work that is to the very best of my ability.
Week Five Session Two
At the beginning of class we had a brief talk about user experience and user interface, and how we need to present these for our final submissions, to clear things up for anyone that was confused about exactly what was required.
After this, we had open studio time. I decided to work on doing the detailing for my coding of the article page, and getting it to perfectly match the aesthetic I have created on my InVision prototypes and Photoshop mock ups. Tim helped me with a few bits I was unsure about, although after he cleared those couple of things up I found myself understanding the code a lot better, and managed to do the rest of the site completely independently with ease.
That's one of the areas that this project has helped me grow in, learning how to code using HTML and CSS, as I now am aware of what each attribute and function will create or edit when typing it, rather than guess work.
I also spoke to Tristam about the ideas for the responsiveness between my desktop and mobile versions, and clarified all of this. After having a chat, I've realised I'm well on my way to having this finished and refined to a high standard by next Friday's submission. For Tuesday's presentation, I'm aiming to have my mobile and desktop prototypes completed on InVision, and I'll finish up my coding of a responsive article page tonight, so that will also be ready for Tuesday's final presentation before submission.
Once I've finished crafting it tonight I will post another blog post with attached images of my coded site. I'm super happy with how it's looking now and how far it's come during today's studio time and I'm excited to see the finished product tonight.
After this, we had open studio time. I decided to work on doing the detailing for my coding of the article page, and getting it to perfectly match the aesthetic I have created on my InVision prototypes and Photoshop mock ups. Tim helped me with a few bits I was unsure about, although after he cleared those couple of things up I found myself understanding the code a lot better, and managed to do the rest of the site completely independently with ease.
That's one of the areas that this project has helped me grow in, learning how to code using HTML and CSS, as I now am aware of what each attribute and function will create or edit when typing it, rather than guess work.
I also spoke to Tristam about the ideas for the responsiveness between my desktop and mobile versions, and clarified all of this. After having a chat, I've realised I'm well on my way to having this finished and refined to a high standard by next Friday's submission. For Tuesday's presentation, I'm aiming to have my mobile and desktop prototypes completed on InVision, and I'll finish up my coding of a responsive article page tonight, so that will also be ready for Tuesday's final presentation before submission.
Once I've finished crafting it tonight I will post another blog post with attached images of my coded site. I'm super happy with how it's looking now and how far it's come during today's studio time and I'm excited to see the finished product tonight.
Thursday, 14 April 2016
Working on the Desktop InVision Prototype
Today I kept working on creating my final InVision prototype for the desktop, and creating the final few screens in Photoshop. I'm really happy with how it's all coming together, and am excited to see how I can create a responsive piece with this prototype and my mobile prototype.
I have attached a few images of a couple of the InVision screens below, and will upload the link to view the InVision in a couple of days once it's all completed. The images should give a good enough idea of how it's coming along.
I have attached a few images of a couple of the InVision screens below, and will upload the link to view the InVision in a couple of days once it's all completed. The images should give a good enough idea of how it's coming along.
Tuesday, 12 April 2016
Week Five Session One
Today's class was pretty much completely studio based. At the beginning, we went over all of the submission requirements, which allowed everyone to be extremely clear on what needs to be handed in next week.
For the remainder of the class, I continued working on creating a polished InVision prototype, and created some more screens in Photoshop.
I decided that for my user journey for Mike Richards, since he always refreshes his laptop looking for new articles, I'm going to add in a feature which allows you to get notifications on your laptop every time a new article appears, and I'll include an option so you can further choose exactly what categories you want to get notifications for.
I feel like I'm on track for the deadline, and I'll continue to steadily work on this project over the next week so I can get it as refined as possible for the deadline. I'm really happy with how my project is coming along, and the photoshop screens are starting to look really good!
For the remainder of the class, I continued working on creating a polished InVision prototype, and created some more screens in Photoshop.
I decided that for my user journey for Mike Richards, since he always refreshes his laptop looking for new articles, I'm going to add in a feature which allows you to get notifications on your laptop every time a new article appears, and I'll include an option so you can further choose exactly what categories you want to get notifications for.
I feel like I'm on track for the deadline, and I'll continue to steadily work on this project over the next week so I can get it as refined as possible for the deadline. I'm really happy with how my project is coming along, and the photoshop screens are starting to look really good!
Monday, 11 April 2016
Daily Futures Presentation
Tomorrow is my turn for my Daily Future's presentation in front of the class. The website I have chosen to talk about is called "In Pieces", and it's a creative way of showing animals that are nearing extinction, in an aesthetically interesting way. They use a low poly illustration style for each of the animals, as can see below in the screenshots.
The website URL is: http://www.species-in-pieces.com/#
The website URL is: http://www.species-in-pieces.com/#
I really like the illustrative style of the website, it's very unique and definitely attention grabbing. It's really effective how the low poly shape style is used consistently. It's used effectively when the user clicks to look at the statistics for the particular animal, and the animal blows up into pieces and the pieces fly away before revealing stats in the centre of the page. I have included some screenshots at the bottom of this blog post.
I feel like they have gone for this more interactive and unique approach in order to get people talking about the site, and make it memorable. For me, as soon as I saw the site I was interested in what it's about, and continued to look through to find out more. Even if it's just getting the user to have a little play on the website, it's still a way of attracting attention.
Below I have also created a mini diagram showing the information architecture, and what each link on the page leads to. I have screenshotted each screen and drawn arrows going from the links.
Sunday, 10 April 2016
Coding in Brackets
Today I had another play around with the code, and I decided to try and make another article page, by changing all of the content and colour scheme to fit it. I have attached the outcome below.
By using the colour coding, it makes it easier for the user to visually identify which section of the website they are in. At least this way if they forget the name of the category, they are more likely to be able to remember the section based on the colour they saw when they visited it previously.
Below are screenshots of my coded sites so far, comparing the two different pages:
By using the colour coding, it makes it easier for the user to visually identify which section of the website they are in. At least this way if they forget the name of the category, they are more likely to be able to remember the section based on the colour they saw when they visited it previously.
Below are screenshots of my coded sites so far, comparing the two different pages:
Below are some screenshots of my coded site when the screen size is a lot smaller, which would ideally be for when the user is interacting with my site on a smaller device such as a phone or tablet:
Subscribe to:
Posts (Atom)