Statistics
We looked inside some of the posts by dbbumblebee-blog and here's what we found interesting.
Average Info
Notes Per Post
1
Likes Per Post
0
Reblog Per Post
1
Reply Per Post
0
Time Between Posts
9 hours
Number of Posts By Type
Text
1
Video
6
Photo
10
Last Seen Tumblr Blogs
Fun Fact
Tumblr has 4 main sources of revenue.
Text
Reflective Statement
At the start of this project, I had only ever heard of the term ‘Responsive Web Design’ mentioned but I had no idea how it worked, or what it does. After gaining more knowledge about the role of Responsive Web Design, I started to question how on earth was I actually supposed to design a responsive webpage? However, over the course of these past 7 weeks, I have learned so much about Responsive Web Design just by researching and actually DOING it myself. I learned how the designs aren’t only static, but should actually respond to the user’s behaviour and resize to fit the screen size and platform.
The New Zealand social good project that we designed for was Pet Rescue. Since both my partner and I adore animals and are passionate about their welfare, we decided to choose this charity for our focus. A look into the original website shows a lack of empathy in their approach to this social issue, judging by the communication through their use of colours, images, and typography. Therefore, my partner and I wanted to completely redesign as we want to recreate the website to be inviting and user-friendly with a new positive focus on giving animals a second chance at life.
In order to create a design outcome that is meaningful and actively addresses an issue/opportunity, we came up with a persona as well as a list of their wants and needs. By constantly keeping this persona in our mind, we always had a purpose for our design decisions and it helped us to make choices in order to address the user goals.
Designing using fluid grids (12, 8 and 4 columns) allowed me to structure my thoughts, gain clarity and order in each layout as well as provide guidelines to ensure elements can be designed to create a user-friendly experience for our persona. One of the greatest challenges I experienced when designing screen layouts for responsive web was considering how the different elements would have to condense for smaller screens. Surprisingly, reordering and organising content for each viewport was one of my favorite parts of the process because of the rewarding feeling I experienced when everything fell into place like a puzzle.
The user testing sessions were always helpful to our design process as it helped uncover minor issues that we missed out on, and getting feedback, in general, is always insightful. One of the most important aspects when doing tests is to check how the design looks on the physical device. I wish I tested this out earlier as some text would look rather clunky on mobile, or too small on a desktop viewport.
My partner for this project was Natalie, who I really enjoyed working with. I’d never worked with anyone as chill and easy-going as Natalie so for me, these past weeks have been a very positive experience. In terms of group dynamics, I feel that we got along really well together- We always communicate either in person or over messenger to discuss our work. The workload was shared equally between the two of us- we collaborated on the basic layout for all 4 pages and then during the week, we’d each work on a section of the screens that was agreed on. Our working process was very much collaborative and I valued our high level of communication as well as consideration for each other’s commitments outside of uni. In the final stages, we met up outside of class and spent many hours of hard work together.
Overall, this was probably the most enjoyable assignments for me as I enjoyed learning about the topic of responsive web design and also working with Natalie was lots of fun. Since we were both respectful and understanding of each other, I didn’t feel stressed at all. I am very proud of everything I’ve learned and achieved this semester and I hope that I can work with Natalie again in the future.
0 notes
Video
vimeo
Pet Rescue Final Video
I am really proud of both my partner and me for making this video. We worked very hard and divided the editing tasks with equal responsibility. Natalie added in all the text animations which I think is so cute!
Hope you enjoy.
1 note
·
View note
Video
tumblr
About page: Breakpoints (Desktop > Tablet > Mobile)
“In responsive design, a breakpoint is a point that allows for the provision of the best possible layout that enables users to consume or understand your site’s content.”
I used Principle to animate how our website design would look as it is resized to fit into each of our three different viewport sizes. For the Success stories section is designed in a grid layout, using the guides we set up in the 3rd week helped me to select a suitable content layout and grid structure at each size. For example, the desktop screen has an underlying 12 column grid upon which 4 columns of images sit on top of. For the tablet’s 8 column grid, 3 columns of images are anchored to it and the mobile’s underlying grid with 4 columns helped to guide where the 2 columns of images would sit.
Source: https://www.quora.com/What-is-breakpoint-in-responsive-web-design
0 notes
Video
tumblr
About: Improved Scrolling Option (Mobile)
The initial scrolling option for the Success Stories section was simply a one-column layout in mobile. Although the text containers could be expanded to view more text, the single column layout meant that you had to scroll a lot to get to the bottom of the page.
This new layout instead uses a slideshow/ cards swiping action to keep tiresome horizontal scrolling to a minimum.
0 notes
Video
tumblr
High- Fidelity Prototyping
Homepage: Navigation Bar (Tablet)
0 notes
Video
tumblr
Hi-Fidelity Protoyping
Homepage: Navigation Bar (Mobile)
Simple animations done on Adobe XD.
0 notes
Video
tumblr
About Page: Scrolling Option (Mobile)
For this About section with lots of stories/ text, I made an infinity scroll that’s been condensed into a single grid. Each story has a drop-down button which can be expanded to read the full article.
Based on feedback from user-testing, it made me consider how people don’t generally want to keep scrolling through lots of content. I will re-design a differnt layout.
0 notes
Photo
Adopt: Pet ‘ID’ Cards Re-design (Desktop)
Since Natalie and I started implementing rounded corners in our design, Natalie made this new look for our adopt page. She tweaked the spacing and gutters as everything had to be perfect. The circular photos of the pets also got a colourful ring around them which its super cute.
0 notes