Skip to main content

I deliberated on including UI customisation in my website documentation. The benefit of using a theme is that I do not have to design from scratch. The salient theme has pre-built templates, libraries, and elements which saves a lot of time designing and testing between multiple devices. However, some may argue that these customisations are minor and cannot be placed under the category of UI/UX. As a disclaimer, I have not been doing UI/UX for a long time, so I cannot claim that I am an expert. I am just writing this as a record.

I was reminded of my former employer many years ago. His goals were towards sales and efficiency. Therefore, he bought content management system (CMS) themes and asked the designers and developers to modify from those themes. As a young designer back then, I disagreed with him because it did not challenge my skills as a UI/UX designer. He explained that customisation is still important. The theme serves as a skeleton and is customised to address the client’s needs. Sometimes customising a website can be more time-consuming due to its complexities.

What does the customisation of the theme usually include?

  1. Understanding the client’s goals for having an app or web. Do they want to generate more sales or create brand awareness?
  2. Based on the client’s goals, we arrange the content into a suitable hierarchy. What do we want the users to see the first time they land on the app or website?UI/UX design involves taking all the content, creating user personas, and understanding users’ navigational patterns. This information leads to designing elements which optimise the user’s experience, which then leads to sales and awareness.

After recalling this experience, I will document my website UI customisation despite having a straightforward site.

My motivation for lianne.my

Although it is a personal site, I had to think about what I wanted to achieve on my site. It was daunting for me because I do have imposter syndrome. I doubted myself and was afraid of putting myself out there.

After much reflection, I discovered that I like to explore art. I always experimented with art to understand how an artist creates his/her work. Meanwhile, I document art because I recognise that people need context to understand art and culture.

I believe that theory and practice work together. Without either of them, art is just a hollow understanding. Theory without practice means the theory has not been tested in real life. Practical application without theory is akin to working without proper grounding and context. Therefore, I create and write about art to incorporate both the theoretical and practical aspects of art and culture.

Landing page

I maintained the structure I did in the v1 of my site but added some tweaks in v2.

Firstly, it starts with a welcome message to convey my intentions of doing art and writing. Secondly, I am still an artist/ designer. I still need jobs and money, so I am putting a portfolio to show you what I can do. The portfolio only highlights the latest 8 recent posts, with a ‘View my portfolio’ button for users to view more of my works. Thirdly, I put a recent posts section to show my writings. Fourthly, I have a get-in-touch footer. At this point, I put my Behance and Instagram accounts as these public accounts. That footer was a recent update from Salient two months ago and I like its bold call-to-action, the availability to work and options to add social media links.

Navigation

My navigation follows the order of the landing page. If you look at the order of my landing page it is as follows:

Landing page structure

Figure 1: Landing page structure.

After looking at the landing page structure, I realised that my navigation was also in the similar order with the exception of the landing text on top.

Top Navigation

Figure 2: A screencap of  the top navigation of lianne.my

You can access the landing page through my logo on the left. The reason for this structure for both landing page layout and navigation is to create consistency. Also, navigation contains links to all pages. Though the user is not on the landing page, they still can access the other content. Honestly, the structure and navigation are purely coincidental, but I do think it works.

Portfolio

The portfolio page is a standalone page, which contains all the work I have done so far. I took the salient portfolio plugin and enabled a filter so users can filter to different categories of my work. I used a masonry grid with four images in a row. The background for the portfolio thumbnails are in grey. I decided on the grey background because I like a uniform look as my portfolio can be very colourful. When there are too many colours, the website can look clashy. The grey background for my thumbnails was inspired by one of the portfolio samples from the former Werkstatt theme, which I continued to incorporate into the Salient theme.

At this point, I am still working to put up new stuff so that it looks more current. I did encounter some difficulties with the plugin which I wrote in Part 1.

Blog

Most of the blog templates in Salient were sorted based on 2-3 masonry columns. I felt that it was too messy to have so many thumbnails similar to Pinterest. Also, my portfolio uses masonry columns and I want a clear distinction between portfolio and blog. Hence, I copied the layout that I created in the former Werkstatt theme over to the current site.

In the 2/3 column, each post has a large image on top followed by the blog post title, author and the date of the post. Below the posts is a load more button. I believe the load more button is better for future-proofing compared to pagination when this website grows. The load more button looks neater than having a row of boxes that keeps extending at the bottom of the page.

The 1/3 column is filled with three widgets, which are the search bar, categories, and archives.

I put the search bar on the top of the column because most users would use a search bar rather than find through posts manually. I also discovered the top navigation disappears when I scroll down. When that happens, there is an alternative search bar in the 1/3 column, as shown in the video below.

The search bar is followed by two more widgets, which are the categories and archives. The users are also given the option to read based on categories or dates.

Contact page

This is a very straightforward page. I prefer other form plugins and not Contact Form 7. Unfortunately, most WordPress theme creators integrate Contact Form 7 as part of their theme where users can change fonts and colours. While I can install other form plugins, sometimes the forms do not allow styling on their forms. To style my form, I need to pay for a form plugin. That will be a future update once my site grows and I have funds for it.

Conclusion

Despite being a personal site with straightforward navigation, UI customisation requires reflections and information to create a website that works. Without documenting this process, I forget the amount decisions I made to achieve this. This is a work in progress, and I will make changes as I go along.

In the next and final post, I will discuss about the logo design.

Lianne

Author Lianne

Observations, experiments and processes. "I know how much you care when you get my name right."

More posts by Lianne