Tag Archives: design

Process Post #5: Design & Peer Feedback Reaction

I really appreciated getting advice last week from Kyra at Falling For Fashion on my blog and getting to write about hers! It helped me to understand what is working for my blog along with what I should work on to improve.  One piece of advice I took was to make the text more visible on my profile photo since it already has a colourful background. I took this advice and changed it to a simple text over the photo to make it more clear. I also wanted to make this design more cohesive so I changed my header to match the calligraphy style font I have been using in my featured images. 

Another tip Kyra gave me was to add more about myself on my “about” page. I definitely was inspired by her “about” page where she details her future aspirations and fashion story, so I plan to add more details like this soon to my page! It was cool how she mentioned that my “storytimes” section caught her eye which I originally wasn’t sure about adding so I’m glad! I am now trying to think of what other blog posts I can add to this section in the future.

A site that has struck me with its great design elements is Drizzle & Hurricane Books. I love how everything – down to the raindrop shaped social media icons – goes with their theme. It uses complementary colors and the text is soft on the eyes. It definitely is a site that has inspired me to create a unique theme on my own blog. I have noticed a few bloggers have design elements with their names which they use to end their blog posts as a kind of signature. I really like this idea as it makes the post even more personal and cute. On Drizzle & Hurricane books they also often make use of the umbrella emoji which goes along with their theme and use “drops” as a rating system.

Going through Drizzle & Hurricane Books has definitely made me appreciate design elements and inspired me to think of what I can be adding in my own posts. I am happy so far with my design elements in the organization blog, but I would like to add more graphics to create a theme and a signature as a personal touch!

I’ll try it here:

Love, Toria

Week 5 – Design, Design, Experiment.

This week we learned about website design. It was encouraging to see some of my peers websites and how they have been creative in establishing their vision. I loved the websites that had lots of white space and strong fonts.

I took some time to re-evaluate my website and found that I was using too much colour and my blog was feeling cluttered. There were elements that I enjoyed about the theme I was using, but overall I think it gave my website a slightly chaotic vibe which was very different from creating ‘Habits for Contentment’.

One of my favourite blogs is Andi Anne. She writes about nutrition, health, and messy stories from motherhood. I love this website because of its neutral tonal pallet and clean organization. It creates a sense of order in an occasionally chaotic cyberspace.

I especially love her about page, and how it flows from an introduction, to her philosophy, then to some of her best blog posts to get you started. It has a very well-defined flow and it beautifully draws the reader in to checking out more content.

Another thing this website does really well is linking to additional content. Andi has written a cooking E-book that is available on the page, and she also has links to podcasts and courses. This is a great way of synthesizing multiple media forms and having them all accessible through her website

And in every medium, useful ideas and experiments are eroding the old boundaries between industries and fields and creating vigorous hybrids designed for new climates.

Erin Kissane

I loved this quote from the, ‘Contents may have Shifted’ reading. It describes how exploring different mediums creates new avenues for art and expression, and I think that’s one of the beautiful things about blogging. It allows you to experiment with various mediums and artforms while portraying one singular message.

This week I will continue to hone in on some various design aspects to try and make the central theme of contentment shine through on my blog.

Cheers to another week of writing!

Peer Review and Design Reflection

Last week, this site was peer reviewed by a classmate of mine (the review can be found here.) I was pleased to see that my classmate liked my menu setup, as well as the minimalist theme. This classmate also enjoyed my written work, which boosted my confidence since I aim to have strong written skills and to communicate effectively to my readers.

One tip that my classmate gave was that I change the layout of my posts. Originally, my posts were in a full-list form- that is, you had to scroll past an entire post to read the previous post. My classmate suggested that I use a block format so that more of my posts can be viewed at once, and then my reader can more easily navigate my written work. I implemented the format based on this video that my peer recommended, and I like the way it turned out.

Then, during my class lecture, we discussed design ideas, which provoked me to make some extra changes to my site. My site previously displayed a large header image, which met the aesthetic I was looking for but also took up so much space that viewers would have to scroll down to see what my page was about, running the risk that they may leave the page due to the work needed on their part. When looking to change this layout to ensure that viewers would stay to access my content, my TA mentioned that when looking at WordPress themes, there is a Feature Filter that allows you to select features that you want on your site and generates the themes that meet your set criteria. Once I discovered this feature, I was able to select a theme that better suited my style and preferences. I now have more control over the layout of my site while still maintaining the minimalist style that I began with. I am much happier with my site now, so many thanks to my classmate for the peer review as well as others who have offered me suggestions to improve this site. I look forward to hearing more feedback in the coming weeks to make this site the best reflection of my work.

redesigning my about page

Repurposed

The About page is where people go to gain a better understanding of a website or blog. Basically, my about page is the first impression newcomers will get of my blog and me. Keeping this in mind, it’s important for this page to be captivating, professional, and beautiful. Looking at my current About page, I knew I wanted to make some changes – not only in the style, but also content. My current bio explained the basics, but was too short in length and was unengaging for my likes.

I tried editing my About page through Elementor, as it offered a whole lot more versatility and customization to the elements, especially in comparison to the blocks theme that I’ve been using. Because I didn’t have an exact idea of what I wanted the layout of my About page to look like, it took a lot of time and trial and error.

What I liked about my previous page was the definition of “klick”. I wanted to keep this, but redesign it to make it more appealing and cohesive with the style of the logo that I had created weeks prior.

Original design of the definition on my first About page:
First updated draft:
Changing examples:

I wanted this definition to be the first graphic on the page, as it would set the tone for the rest of the blog. Yes, I do know that click is typically spelled with a “C”, and yes, the “K” was on purpose. In one image, I hoped to capture the explanation and theme. Just like in dictionary definitions, I wanted to use “klick” in a sentence, so I used this first sentence – which was originally used in Joffre Lakes; however, I ended up changing it to something much more relevant to my blog:

I had the plan of creating three distinct clickable categories in columns below with brief descriptions of these different categories. I wanted this graphic to blend seamlessly with the categories below. Originally, I wanted to extend the grey a little further down, and add a white mountain in the middle to blend the grey from this graphic and the white from the following section. While I was doing this, I realized I was creating an arrow in the wrong direction. Instead of having a white arrow pointing up, which would have been the case had I kept the white mountain on the grey backdrop – I created a negative valley (as in lack of colour, not unhappy) to draw attention to the following section.

Third and final draft:
Finally, with the added category columns, this is what the top part of my About page looked like:

Each of these columns are responsive, meaning that it react to your curser. When the mouse hovers over the column, it becomes a darker shade, inciting you to click on it. These columns, images, and titles are linked to their respectful pages. For example, if I were to click the “local” column, it would send me to the landing page for the local category.

Already, this so much better than my previous About page, which is below for reference:

Editing my bio:

Next up was rewriting and redesigning my bio section. I chose colours that would match the image, along with a readable and professional font. My original About page lacked warmth and friendliness, so I tried to keep this in mind when redesigning and rewriting this next section:

Staying Connected:

All that was missing was connecting my social media account and contact information. I opted for simple responsive icons. The icon would increase slightly in size when hovering over it with your mouse, and for consistency, I chose to have the colours change to the blue and yellow of my logo:

Mouse over the Mail icon
Mouse over the Facebook icon

When clicking the facebook icon, it would open my facebook page in a new tab with to make sure I’m not kicking them off my blog. Similarly, when clicking the mail icon, the user’s email would open up in a new tab, ready to send me an email.

The trouble in troubleshooting

So while I’m really happy with the design and content of my new About page, you might be left wondering why you still see my old About page, as opposed to this new and improved one. To my big disappointment, when I was troubleshooting this page for different screen sizes, I realized how illegible it is for mobile devices. Somehow, the graphics, icons, columns and images didn’t transfer well onto a smaller screen: not only was the layout lost, but some images disappeared and the content was just not easily readable.

Final note:

This was especially frustrating, as I had spend days working on it this. While the layout did still work on tablets and desktop computers, over half of my audience accesses my blog on their mobile device, so keeping this up was out of the question. I rather have an elementary version of my about page rather than make this illegible gibberish live on my website. Unfortunately I don’t have the time to try and fix this before the end of the semester, but I plan to sort this out as soon as possible. If nothing else, I learned the importance of troubleshooting regularly throughout my progress to make sure its compatible with all devices.

Live Like Joao

Live Like Joao
Food, Places and Everything About My Life

*Above image taken from Live Like Joao’s Blog

A PEER-REVIEW ON WEBSITE DESIGN

Live like Joao offers a personable and candid approach to food blogging. When it comes to creating his new blog, Joao’s honesty is refreshing; while this may be a daunting new task, Joao invites his audience into his inner thoughts as he navigates the unfamiliar waters of WordPress. According to the screenshots from Amanda‘s first peer review, Joao has implemented a lot of her recommendations and suggestions. Already, Live Like Joao is starting to have synchronicity between the website’s appearance and the content. To properly unpack the different design elements in this blog, I will be focusing on two important design umbrellas: user experience (UX) and User Interface (UI).

User Experience

Travis Gertz’s 2015 Design Machines: How to survive in the digital Apocalypse explains the UX design as how the website works, as opposed to how it looks. A hyper-simplified breakdown of the UX design category would include layout, interaction, information architecture, wireframing, prototyping, research, and testing. At first glance, Live Like Joao seems to work pretty cohesively and sensibly. There are subtle cues throughout the blog that indicate where I should look or click. For example, both the BLOG and POSIEL tab on the top righthand menu have a little downwards arrow to indicate a drop-down menu. These exemplify what Victor Kaptelinin describes as affordances in his article The Encyclopedia of Human-Computer Interaction.

The search function right above the categories list is a really helpful tool, especially when looking for a certain page or post that I particularly enjoyed, but was unable to retrace my steps. Since this blog is fairly new, I wasn’t lost in the content and it was easy to find my way back; however, once there are more entries and if Joao chooses to continue this blog post-PUB101, I suspect that this search function will become a really handy tool.

While there are affordances that create direction throughout the blog, I still seemed to have encountered some problems with Joao’s BLOG section. Firstly, I noticed that there is a category for “Blog” and “Blog Post”. This seems counter-intuitive, as these categories seem synonymous. Kaptelinin underlines that “Good designs are intuitive“; hence, I would always recommend going through the website fully – as a sort of informal audit – and paying extra attention to what is intuitive to you. What comes up when you click certain links? Does it take you where you would expect it to? This brings me to my second suggestions: make sure that  the information is stored in the right place. For example, when I click the BLOG POST on the drop down menu, the only post that is available is the “Short Essay 1”.

User Interface

In contrast to the former, UI Design encompasses how the website looks as opposed to how it works. Gertz explains that typography, colour, forms, illustration, photography, and detail can all be found within this realm.

Caution: Do not read when hungry!

This blog does a wonderful job at capturing mouth-watering cuisine. From a UI design perspective, there is a great use of white space and visual contrast with images. Blog Post 1 does a good job of separating chunks of text and using different fonts, especially by bolding the Ingredients title. The other blog posts could benefit by following the great example from that first blog. For example, my eyes are yearning for more contrast in the text in the Blog Post 3. There is a beautiful photo of gorgeous cuts of meats – perhaps I should have waited until after dinner to write this review – followed by the restaurant’s information and a short review. To better accompany the bold image, I would make the text larger and create a small text box containing the restaurant’s pertinent information. Currently, the review is the smallest group of text on the image: all these small modifications would allow for the sections of the page to be more proportionate to each other, and allow the important information to stand out.

The beautiful rustic table of food that act as the blog’s cover page sets the tone for a visually-enticing food blog. Keeping this in mind, I would recommend continuing with this theme by adding more images throughout the blog: as we are unable to taste this food with our taste buds, we do so with our eyes. Therefore, it is important to describe or visually show these through images and videos, as is done in the first blog post. If at all possible, ensure that photos and videos are the same size or are complimentary to the overall page layout to allow for synchronicity and fluidity.

Overall, I enjoyed joining Joao on his adventures through WordPress and discovering exciting new restaurants around the Lower Mainland through his reviews. I look forward to seeing the progress and reading more content from Joao. The recipes, reviews, and personable tone leaves me  hungry for more!

Check out Live Like Joao here.

Essay 2

Reflecting on My Journey Through Pub 101 

The process of creating a blog was much different than what I anticipated. I thought that it would be a fun and straight-forward process. And while the process was fun and exciting, it was also confusing, frustrating, and sometimes aggravating. The following images illustrate what I thought blogging would be like vs. what blogging was actually like:

 

What I thought creating a blog would be like. Image source: Arts on the Horizon.

 

What creating a blog was actually like. Image source: Kennedy Institute.

One of the main things I struggled with was finding a purpose for my blog. The amount of freedom that I was given in this course was foreign to me. I think academia has conditioned me into thinking that there is always a right or wrong way to do things, and this mindset was really difficult to overcome when I started blogging. After reading Gardner Campbell’s (2009) A Personal Cyberinfrastructure, I realized that the amount of freedom afforded in this course was necessary in order for students to learn the ins and outs of cultivating an online identity. Campbell (2009) notes that by building a personal cyberinfrastructure, students will “acquire crucial technical skills for their digital lives … [and] engage in work that provides richly teachable moments” (para 7). Therefore, it is only through a hands-on, self-driven approach that students may be able to fully explore and understand the intricacies of the online realm. Overall, while I learned how to blog in Pub 101, I also learned about the “so what?” and “why?” questions underlying what is done online.

Initially, I decided that I didn’t want to set too many restrictions on the content that I would post. The theme of my blog is fairly open – I have a “blog” section for personal posts, and I also have categories for food and beauty. Later, however, I realized that having too many categories created some difficulties for me – was I being concise enough? Should I focus on one specific topic? How was I defining my audience? Had I known what I know now, I probably would have been more precise about the purpose of my blog.

In Process Post Three, I noted that my imagined audience includes someone similar to myself: female, late teens or early twenties, student, interested in posts related to food and beauty. In addition, I think that my blog might attract other South Asian females because culture is discussed in some of my personal blog posts. Conversely, my real audience comprises my close friends, some of my classmates in Pub 101, and of course, professor Norman.

Keeping My Audience in Mind

I did not have a distinct audience in mind when I created my blog. Instead, I followed Warner’s (2002) suggestion to “put on a show and see who shows up” (p. 82). Unfortunately, I failed to understand the importance of defining my audience. Now, however, I realize that keeping a potential audience in mind is an integral component of the blogging process. At the same time, this is a personal blog first and foremost. Therefore, my decisions are mostly informed by my personal preferences, and my imagined audience is a secondary consideration.

I decided to stick with a minimalist theme because it is trendy and easy to navigate. This is ideal for my target audience because I expect that most individuals in their late teens or early twenties are comfortable with a clean design. With regard to my content, I kept a casual tone and tried to include personal anecdotes where possible. In addition, I included a sidebar with an image and description of myself. I did this because my blog is personal in nature and I wanted my audience to feel like they could relate to me.

After Mauve’s lecture on design principles and Heather’s peer review of my site, I decided to incorporate a seafoam green accent colour. Unfortunately, the theme that I am using does not allow me to include an accent colour. In order to do this, I had to make changes to the CSS using the editor tab. By doing this, I realized how malleable themes really are. I think that an accent colour enhances the consistency of my website and is also aesthetically-pleasing for my audience. In “How To Survive the Digital Apocalypse”, Travis Gertz (2015) raises concerns that we have designed ourselves into a corner by being reliant on design choices created by machines. To address this concern, I customized my theme to reflect my personal taste. As a result, I believe that my audience is better able to get a sense of my personality and style.

Moving Forward

Pub 101 has inspired me to do a better job of linking my existing social media accounts to each other. In “Publics and Counter-Publics”, Michael Warner (2002) argues that “no single text can create a public… nor can a single voice, a single genre, or a single medium” (p. 420). In class, we learned that the medium we use can ultimately influence what and how we post. Thus, I think that transmedia integration is an effective way to provide my followers with a more nuanced and comprehensive look at my online self.

To be honest, I do not think that I will continue with this blog. However, I might re-structure it to narrow the scope of my content (e.g. create a personal blog, a food blog, or a lifestyle blog). Currently, my blog is a mix of personal/lifestyle content and I don’t think that will fare well if I want to expand my site. Admittedly, this blog is a bit of a mess. But, at the very least, Pub 101 has equipped me with the tools that I’ll need to clean this mess up.

References

Campbell, G. (2009). A personal cyberinfrastructure. EDUCAUSE Review, 44(5), 58-59.

Gertz, T. (2015, July 10th). Design machines: How to survive the digital apocalypse. Retrieved from https://louderthanten.com/coax/design-machines

Warner, M. (2002). Publics and counterpublics. Quarterly Journal of Speech, 88(4). 413-425.

The post Essay 2 appeared first on .

Vol. 10: Peer Review #3

Howdy!

This week, I will be reviewing Teresa’s blog: teresahanulseo.com. I want to be clear from the beginning, as per usual, that I will be examining her content as well as visual design. In light of this, it would be best to start off by trying to describe the audience persona she has envisioned for her blog.

Already from the homepage of her blog, I feel that I can quickly try to identify the type of audience it is for. Her blog title, “The Confusing, Jumbled Life of Teresa Hanul Seo” already denotes that her blog is intended for a more young, fun, and lighthearted audience. Right away, humour is present within her blog, denoting one should view this without taking anything too seriously. If I were to give an ideal demographic audience, I would say that it would be roughly between the ages of 15-20, either male or female, and closely tied to attributes of Millennials.

Right away, I’m presented with a humourous picture of Childish Gambino. I would say that in terms of designwise, it seems out-of-place, but it ties the theme of her blog together in the beginning. The one thing it does correct is that it entices me to want to see other things for a possible laugh or smile. The colours used are vibrant pops of red and yellow, yet are on the softer side to ease the eyes. I’m glad she didn’t use overly vibrant colours or I would’ve commented on it. Her text is also a different colour, and gives a nice contract to everything. I would say the tagline under her title is a little hard to read, and possibly reworking the title a bit could have it feel more balanced.

The red pop of her menu bar struck out at me too much in the beginning, but once I realized some text inside her blog was the same colour, it was now consistent with the rest of her blog. I would say maybe now the blue of her title might be out of place–I personally find 3 colours that are very different from each other hard to handle. But, nonetheless, the carefree nature of her blog might say otherwise.

Here’s what I’m talking about:

Teresa also has a calendar at the bottom of every page in her blog. Though the it is nicely presented, I found it kind of off-putting since there was no real use for it–we can quickly view the calendar from our mobile devices or laptop.

Teresa’s about section already sparks her style of writing for her audience. It’s very conversational, and I find it warming. Her ability to be this loud helps me realize how much she can be that dependable friend, or the main character in those tween movies we adore. This is her voice, and I find it quite powerful!

Though the design is sleek on different pages, I find that it is not creative enough for the intended “feel” she was going for. Maybe Teresa ought to put pictures in posts too, to at least bring some colour to her text.

I can’t say too much about her content, as none of it resides outside of pub101 posts or peer reviews, but I will say if she did post any content, I wish for her to include the quirkiness she has in her language, some colour to denote the fun and silly atmosphere, and to be creative! Overall, I find that she was able to pinpoint her audience well with her design and whatever content she has on there, but I am rooting for her to include more and post more for her audience!

’till next time, homies!