Don't wanna be here? Send us removal request.
Statistics
We looked inside some of the posts by jmsem2uxui and here's what we found interesting.
Average Info
Notes Per Post
0
Likes Per Post
0
Reblog Per Post
0
Reply Per Post
0
Time Between Posts
4 hours
Number of Posts By Type
Link
1
Text
8
Photo
8
Last Seen Tumblr Blogs
Fun Fact
Tumblr Inc. is using 66 technologies for its website.
Text
Reflection
This second part of semester 2 was a great experience for me. I learnt lots about how responsive design works and the importance of it. Feedback plays a major role in the final outcome and its development throughout the weeks make a stronger website design. I learnt that sizing in web responsive designs is one of the key factors and also finding out what the major content and minor content is needed when reducing the sizes.
When i first started i didn't really understand what responsive and non responsive web designs were til my group and i noticed how some websites we researched on the web were not changing scale and sizes on different devices.
When were given our brief, we were told to design a responsive website for a New Zealand social good project based in the non-profit, design for good sector. So my group (Daniel and Jenisha) and i made a decision to work on the Greenpeace website. Originally the website was nonrepsponsive to tablets meaning that when we tried scaling the screen size it didn't respond to the screen size and it also had a very outdated web page which made us want to recreate the whole web.
To begin we decided to first create a persona to help us guide the content, style and different design aspects within the new web design. From personal experience with greenpeace research, the target audience could really be anyone who has passion in changing and protecting the worlds natural enviroments. So we decided to create a a certain target by creating a ‘made up’ user named Jacob. This helped us make decision to suite his needs and wants.
After our persona we decided designing a mockup to show to the class. We looked at different inspirations and design styles and looked at some responsive web designs. When designing the mock up we took into caution about how we will reduce the sizes through different screens/devices. We decided to go with a column square style system meaning that when we reduce the the screen the columns reduce in its quantity. As you can see it really did play out quite nicely which then helped us lead to our finals designs. The desktop had 3 columns, then the tablet had 2 and then the phone had 1.
Throughout this second part of the semester i really enjoyed the process of developing the webs and scaling them down to different sizes as you had to think about if the font was readable when reduced, what you needed to erase or condense when reducing the size. I also think that the feedback and user testing part was a major key factor in finalising work as it really helped my group to figure out what others saw that we didn’t. This helped us improve on our work which i thought was good.
The software we used throughout our web design was solely based on the Adobe XD software and our advertisement video was done in premiere pro. When using adobe XD i felt at times there was restrictions in making some things like the animation part. But i reckon if we were to carry on we would try to do this in another software that caused less restrictions on this part.
Overall I think Daniel, Jenisha and I worked well together and were able to share eachother’s ideas and opinion without having conflict. We all took part in different areas and helped out each other when needed. It was a good experience learning about responsive web design and i hope to learn more about it in the future as i think it is one of the key things when designing a web design for everyone to use.
0 notes
Text
Final Designs
Finally we created a spread sheet to look at our four main pages
Responsive Web Design:
By looking at the different screen sizes placed side by side you can see that the designs have a on going grid response with the 3 columns going down to 1 column when the screen glass decreases in size. The font also decreases to fit to screen while it is still to read when decreasing. This makes it user friendly for all devices so all target audiences have access to the site.
0 notes
Text
Week 7 - Creating Video
This week we started on our advertisement video. We wanted to make sure that we include all main 4 screens and how they transition into different size screens (responsive designs). Do do this we decided to show the main size which was the desktop and then show it sizing down from tablet to phone. This way it'll give a good sense of how they become responsive and how the sizes change. We used the app premiere pro as we all had some experience using it. I found the song and made the intro whiling putting placeholders for what we would say and put in each section, daniel did the screen recordings and jenisha made the final touches and continued with the editing for the final outcome.
0 notes
Text
Week 6 -Prototyping/Progression session
This week we started were finalising our prototyping and started planning our advertisement video. It took quite awhile to finish the prototyping as we were missing a few pages so that it would link all nicely together. My group and i managed to finish the prototyping this week so we could focus on final touchups next week and start producing our final video.
This week was also progression session where we showed the class our almost done website. Students had told us that the blog page needed to have little more colour so it could be consistent with the rest of the pages as it looked quite plain compared to the others. Another thing they mentioned that the donate button did not stand out on the home page as it was interfering with the read more button on the page. With this feedback we decided to add some changes to the home page and the blog page.
We also decided to make the donate page interactive as it would show a good demonstration of how you can donate.
0 notes
Text
Week 5 - focusing on final, feedback and starting prototyping
This week we worked really hard on trying to finalise our work as it was progression the following week. We reviewed last weeks feedback and made changes to the sign up and volunteer content. As they were both hard to distinguish from each other we decided to make things much more easier by changing the header to Join the Movement and the button name Volunteer. We also found that using the word sign up felt like you were signing up for a newsletter and not for the volunteering world. So we changed that word based on feedback.
Designs so far for progression next week
0 notes
Text
Week 4 - More development
This week we carried on with our developments for the final peice of work. From our previous feedback we were told that the article text was too large and looked unpleasant to view. The testers felt that the titles should only have a 2 lines for the headings because they felt that having more than this as would give away too much details of the article, and would also look messy. Another thing they mentioned was the font size. Oringally the the body paragraph was smaller when we first designed the article section but many users found it difficult to read what was written so we made the text one size bigger, making it more readable.
As usual we did another user testing during the end of our class session. This week we got loads of feedback but the main reoccurring points we kept noticing from the users were that the donate and sign up buttons were hard to distinguish the difference between them and to shorten the length of the sentences on the article previews on the home page.
0 notes
Text
Grid System
For our grid System we decided to do columns as it is natural for users to scroll down/up to read content in websites. We decided that for the desktop we will use a 3 column grid system and when the glass size decrease it will decrease by one column therefore for the ipad it will be a 2 column and for the phone it will be 1 column the reason for this is that so the font wont shrink in size if all screen glasses were to be like the desktop version (3 grids.)
0 notes
Photo
about us page design, week 3 and 4 process (click to view full image)
0 notes
Text
Week 3 - resizing to different screens and starting on design
This week we introduced colour, text, image and font type. We explored these aspects and experimented what would work well for the Greenpeace website. We made a design project plan sheet so we could all follow the same design style. We then assigned each-other to different pages to work on. My part was to work on the about us page where i first designed the desktop version, the tablet version then the phone screen version. Our main colours were green, white and different shades of grey as it went well with green peace’s logo colours. This week as a group we mostly played around with the navigation bar, we thought about how the menu would look on tablet, phone and desktop. we thought about what changes would be needed when shrinking the size for tablet and menu as all of the content would not be able to fit. We decided to use a hamburger menu for our phone menu and for the tablet we decided to have a mixture of both (seperate content links to other pages and a hamburger menu). Also with the feedback last we got it gave us lot of help with what to do with some of the things we didn't notice. One of our feedbacks was to improve the search bar as it was unable to find so we decided to recreate this look by putting the search bar at the top section so it is easier to find. We also made the article section more evident.
In the next half of our studio session we had time to do some user testing where we showed some of our classmates what we done so far and see if our work was going well. Like before, we asked questions and wrote down the feedback on sticky notes. This time we succeeded in making the search bar clearer as the users were able to find the search bar easier.
0 notes