journey through web development

Author: kat codes (Page 1 of 6)

katvonwiesendorf.com redesign

Hey folks! Long time no see, eh? I have a perfectly good explanation for this dead season here on the blog though. Between work, uni assignments and keeping a 4 year old alive and content, I had barely time to breath.

Anyway, it’s been 5 years since I have created a custom theme for my little photography venture, katvonwiesendorf.com.
It became a bit dated, and I have gained so much more knowledge in the past few years, so I thought I will redesign and redevelop a brand new theme for this website. I also do not post there as often as I did, but don’t have a heart to delete it as it’s still a big part me, therefore I’m planning on changing the purpose of it from a blog, to more of a portfolio site, where anyone can cherish the beautiful memories immortalised in a photograph.

Before

Here are some screenshots of how the website is looking at the moment:

The design is minimal and most elements are working nicely, although under the hood doesn’t look good at all πŸ˜‚ I’ve made it with no prior knowledge on WordPress, so you gotta forgive me that haha.
Saying that, I have learned so much in the past year, I would say it is necessary to amend my past mistakes and create a shiny new theme that would actually show my present abilities.

The Design

The new design has been created in Figma. I got used to be handed a ready made design to develop, so the task of designing everything on my own was a nice way to let the creative juices flow.
I still like the original header, so I have decided to keep it. As mentioned before, the new KVW is more of a portfolio, therefore the blog section and everything that comes with it (archive etc) had to go. In it’s place- a carousel slider with a good selection of shots from all of the categories. Call to action button and a short info about… me πŸ˜€
I use tailwind and tailwindUI components at work all the time (ok, most of the time) and they are so good I could not not add a bit of tailwindUI magic here too πŸ™Š


Design ready, now it’s time to develop! Stay tuned! πŸ”œ

Liked this post? Share:

January reads

A little bit late, but oh well. I have read quite a lot of interesting books, so I thought I’d share. Do we have any book worms present? It’s time for a monthly book club.

1. Non obvious. How to think different, curate ideas & predict the future by Rohit Bhargava

The title took my interest, and although the topic was great and worthy of few evenings, the narrative got me annoyed after few chapters. Instead of presenting the insights, it felt like an author massaged his ego of what did he achieved. The tone is very patronising and very self-congratulatory. In other words: way too much “I”. And for that reason, finishing this book become mundane task.

2. Hug your haters by Jay Baer

Great book, mainly focused on business and how they can deal with complaints and unhappy customers, but I think the knowledge can easily be transfered onto personal brand or even personal relations. A must read for any entrepreneurs or business owners .

3. They ask you answer by Marcus Sheridan

Another great position in the marketing field. The author explains how content can help you bring traffic (and revenue) to your site. Again, it is mainly focused on businesses, but I think anyone creating some form of content will benefit from reading this book.

4. How to be a Productivity Ninja: Worry Less, Achieve More and Love What You Do by Graham Allcott

Nice and easy read that will help you be more productive and deal with mental overload.

5. The Mental Toughness Handbook: A Step-By-Step Guide to Facing Life’s Challenges, Managing Negative Emotions, and Overcoming Adversity with Courage and Poise by Damon Zahariades

Apart from the longest title ever, I would recommend this book to anyone ( especially now, with never-ending lockdown and the toll it takes on everyones mental health). I aims to help you deal with the challenges the world brings you and not creep under the pressures of negativity of hard times.
I always say that situations and struggles we overcome makes us stronger and better equipped for future challenges, and this book follows the similar direction.

6. Reaching down the rabbit hole by Allan Ropper and Brian Burrell

I’m gonna be honest here- I’ve downloaded this book on my kindle, purely because I loved the design of the cover πŸ˜‚ πŸ™ˆ
Although the title got me thinking it will be a totally different kind of reads, the stories are really interesting and intense, making you attached to the patients the authors writes about. Unfortunately after the story of a young woman diagnosed with Lou Gehrig’s disease, it got a bit too intense for me and I still haven’t finished this book.
For anyone interested in medial stories- it’s a good one for you.

Have you read anything interesting lately? Share with me in the comments! πŸ‘‡

*Featured image by Thought Catalog on Unsplash

Liked this post? Share:

How to stay motivated in 3 simple steps

In my opinion, motivation and focus are the keys to success. No matter what your end goal is, when you are motivated, you have a perseverance to keep on going. Being focused also helps when things aren’t as smooth as anticipated.
In this blog post I will share 3 simple steps that help me stay motivated and focused. Those tips work for anything you would like to achieve in your life, career goals, education goals, fitness goals, money goals etc.

1. Set a goal

This is probably the most important thing you can do to help yourself. When you know what you want to achieve, you are able to find a way to do it.
And remember, every big goal is in reality a bunch of smaller ones. So dream big, and then set much smaller goals that will help you reach your dream.
For example, let’s say you want to run a marathon. You need to start running first. (1st small goal) When you have a routine in place (2nd small goal) , then maybe run in a local 5k (3rd small goal), 10k (4th small goal) and then reaching your big dream of running a marathon might be next! Smaller goals are amazing. They give us a boost of confidence and power to go further. They are also less overwhelming, meaning we have a bigger chance of not abandoning them. Those small goals are essentially a little bricks that are building your path to the big dream.

*I noticed that small goals sometimes have a side effect: they may open the doors to unexpected opportunities, which you haven’t even thought of. From my experience, it’s good to say “yes” to those opportunities. You never know what they might bring.

It’s also worth mentioning, that sometimes it’s OK to abandon our goal. We change and grow all the time, and growing apart with the goals we set in the past happens. The important thing is evaluating WHY we want to abandon it. Is it because we found a new goal we feel more passionate about? Or is it just because we find it hard to achieve it? Be true to yourself, and if it’s the first, leave the goal in the past and don’t feel bad, but if it’s the latter, maybe try to set yourself a path of much smaller goals.

2. Don’t overthink

It may sound weird, but it really works! (for me at least) When you know you have to do something, just do it. Do not start to think how much you don’t want to do it or how tired you are. Like the shoe ad says: JUST DO IT. Let’s go with our running example again. So you have started running, and set yourself a routine to go for. a jog every day after work. It 5 pm, you had a busy day and you much rather just sit on the couch and watch a movie on Netflix. Instead of trying to think of every possible excuse not to go for a run, or bargaining with yourself that you will go after just one episode (yeah, right), just put those running shoes on, and leave the house without thinking.
If you are really struggling, then tell yourself to do that thing you’re really dreading to do for a shorter amount of time than usually. I can bet with you that once you have started, you might actually finish it in a regular time.
Our brains will find a way to stay comfortable, even at a cost of jeopardising our goals, so don’t get into a fight with your brain and just do what you set yourself to do.

3. Celebrate

Celebrate EVERY little goal. When you accomplish something, recognise it and reward yourself! Order a take-away, run a bubble bath, buy a box of fancy chocolates… What ever makes you happy. It doesn’t have to be huge or expensive, just something for you to feel special. Celebrating releases a dopamine, a feel-good chemical. This will give us a boost of confidence and motivation to reach another goal in the future.

And remember, forward is forward, no matter how slow you’re going!

Illustrations used in the post are Croods collection from Blush.design

Liked this post? Share:

Give me gif, Slack – case study

The aim of this case study has focused on creating a contemporary design concept that would solve the issue of poor accessibility to gifs on Slack.

Emoji and animated messages have become a part of our writing culture. Sceptics might have thought that it is a step backwards in evolution (back to the time when people use hieroglyphs, perhaps?), but there are a lot of positives about this change. Using emoji can lighten the overall mood of the text, is understood across different languages and adds the ability to quickly express thoughts or emotions. According to Contactually, “your brain processes what it’s seeing on video 60,000 times faster than it processes text.” Sending a gif or a meme can also help improve communication between co-workers and is a great way to tighten the relationships.

“Emojis have become a cultural phenomenon, shaping the way we express ideas and emotions across languages, friends, and generations.” 

Dan Rhatigan

Overview

Let’s start by shining a bit of light on Slack itself. It is a channel-based messaging platform. Create a group or accept an invitation to an existing one, and then send messages, share files, call and connect other apps (e.g Github or DropBox). Mostly used in workplaces to communicate within a team. At the agency I work for, we have one general channel and one for every project we work on. This set up helps us work as a team, whether we are based in the office, working from home or from a different city.
The current situation around the world and increased remote working make platforms like this even more important than ever, enabling communication with other members of the team.

slack desktop window
https://uk.pcmag.com/productivity-2/40141/slack

The challenge

As mentioned in the introduction, short, animated videos have become extremely popular and widely used to quickly express our thoughts and ideas. Instead of writing a long, wordy message that would perfectly describe our feelings, we can send a meme that does just that.
Using gifs and memes on Slack is possible, but extremely time-consuming and not user-friendly at all. Let’s have a look at how to add a gif to a conversation on Slack at the moment:

gifs on slack at the moment screen cast
  1. Click on the lightning icon
  2. Look for Giphy and click the link
  3. Type a word to look for meme
  4. SHUFFLE one gif at a time to find that perfect one

The issue that arises here is when you shuffle too much by mistake. You will have to spend some extra time shuffling and praying for a gif you wanted to reappear again. If you have a slow internet connection, it will elongate the search time too, as, after every shuffle, you have to wait for a gif to load.
No straight-away access to gifs also creates an issue, when the user doesn’t know how to describe the gif he/she has in mind.

Estimated time to find your meme: WAY TO LONG.

Gifs on other platforms

Facebook, WhatsApp or Twitter are only the few that have a messaging feature. All mentioned above have a gif button directly on the message tab, allowing users to quickly browse for a perfect animated message to add to the conversation. General styling and the number of extra features, like a search bar, favourite button, or grouping by a category varies throughout, but the ability to pain-free access to wanted content is present.

facebook gif
whatapp gif
twitter gif

Estimated time to find what you are looking for: approx. 10-30 seconds.

Scope and constraints

The idea that would solve the issue of poor accessibility to gifs on Slack needs to seamlessly fit into the current design of the application. The key constrain is performance. The enhancement should not lower it.
Slack is available for desktop and as a mobile app, therefore the concept needs to take into consideration both window sizes, with the focus on different users’ needs on each.

The solution

The analysis of the current design and how similar platforms are dealing with the issue have clarified, that the solution for observed time consuming and stressful access to gifs and memes should be an enhancement of the current system with a Gif button.
So many applications are using this method for quick, easy access to gifs, and reusing that familiar design is, in my opinion, the way to go.

In design, by making things that behave in a certain way appear as expected, we help our users make the most of their cognitive cache. 
In other words, we don’t make them think.”


Jason Grigsby,  Progressive web apps

The benefits of adding the gif button directly to the message window are enormous. Increased user experience will be visible on multiple spectrums:

  • access to multiple gifs at the same time to allow comparison
  • ability to browse different categories via the search bar
  • shortened time spent on searching
  • gifs visible without typing anything
  • no issue with losing the perfect meme

Design enhancement process

The process of designing the enhancement mentioned above have started from the brainstorming phase. This step is crucial to explore possible options, get inspired, and quickly iterate through different ideas.


Deliverables from this phase are rough sketches of the concept:

desktop window sketches
Desktop window sketches
mobile window sketches
Mobile window sketches

Next, the Slack window has been created in Figma. The overlay technique has been used to ensure the right measurements and spacing of the components.

slack window
Slack window. Image used as a guide from: https://slack.com/intl/en-gb/help/articles/360043092173-The-Slack-experience-for-desktop

Gif button component has been created in the style matching other buttons on the message tab.

gif button design
Gif button design

Gif button was then added onto a base layout, keeping in mind the spacing between the other elements.

base desktop layout enhanced with a gif button
Base layout enhanced with a Gif button

Lastly, the design of the open gif bar has been created for both desktop and mobile windows.

base desktop layout with an open gif bar
Base layout with an open Gif bar
base mobile layout
Base mobile layout
base mobile layout with open gif bar
Base mobile layout with open gif bar

Deliverables from this phase are desktop and mobile designs featuring a gif button.
Click the link below to view the Figma file β¬‡οΈŽ

Results

Completed designs have been enhanced with animated interactions to showcase the envisioned idea. Below, you can click on the Gif button to open up the gif bar or click on the link at the bottom to navigate to the Figma file.

Conclusions

The finished product is an enhancement of the current design, solving the problem of poor accessibility to gifs on Slack. User experience has been improved by introducing quick and easy access to gifs straight from the message tab.


Positive outcomes:
β†’ Users can now see and scroll through multiple gifs, even without typing a phrase to search for.
β†’ Functionality similar to those found in other messaging platforms means less time spent by a user figuring out how the new feature works.
β†’ The issue of losing the perfect gif or meme have been eliminated.
β†’ Time spent searching for a gif has been dramatically reduced.


Do you use Slack?

What do you think of my idea to enhance the current design and functionality of Slack with a Gif button? Let me know in the comments! πŸ‘‡

Liked this post? Share:

2020: the summary

Another year has gone by and what a year it’s been! Hell of the rollercoaster 🎒 ride for most of us, right?
As every December, I like to pause for a minute, create a list of things that were awesome that year, and also some resolutions for the year ahead.
It’s really cool to look back in the past and see how we, and everything around has changed, so let’s look into my last year’s resolutions:

Going into resolutions for 2020, I would like to:

  • attend another hackathon or two,
  • still ace at uni and learn new things (maybe another programming language?),
  • read at least a book a month,
  • travel a little
    and
  • keep on posting here about my dev journey

For obvious reasons I only managed to travel a tiny bit in January and unfortunately didn’t attend any more hackathons, but overall I think I did quite all right! πŸ˜€
If you’d like to read my full 2019 summary, you can do so HERE.

Awesome things that happened in 2020:

  • Completed 1st year at Uni ( +amazing grades)
  • Attended Work In The Web workshop in Leeds
  • Produced 2 youtube videos
  • Did Happy Hour industry talk (virtually, because lockdown happened)
  • Kept writing blog posts about my dev journey
  • Dev internship!
  • My first paid front end dev position
    so I could…
  • Leave hospitality job!
  • Wrote an article for GirlCode
  • Attended Code First, Girls course (+my project won πŸ†)
  • learned a lot!
  • Did a little RaspberryPi project
  • Saved some money
  • Bought my first stock shares
  • Didn’t get infected with Covid-19 🦠😷

Of course a lot of not-so-good things happened this year too. Both me and my husband being furloughed during the first lockdown, having family member diagnosed with life threatening condition, my sister’s wedding postponed and not able to see my family are just a few of them. However, I always try to find a bright side and focus on the good rather than bad.

What are my resolutions for 2021?

  • keep acing at Uni
  • learn!
  • read at least 1 book a month
  • save money (#housedeposit)
  • keep posting here
  • get a pay-rise
  • go to Poland to see my family
  • not get infected with Covid-19 πŸ˜·πŸ¦ πŸ™…β€β™€οΈ
  • do some photoshoots

How was your 2019?

Tell me about your wins and achievements this year, and resolutions for the next one!

*Featured image by Kelly Sikkema on Unsplash

Liked this post? Share:
« Older posts

© 2021 KAT CODES

Theme by Anders NorenUp ↑