Interactive Media Web Authoring Part 3 of 3 (Responsive WordPress Site)

This is the final stage on the module Interactive Media Web Authoring  and charts the design of the website http://studio-gra.esy.es/

For this project I will be describing the process of designing & building a WordPress website. This website is to have at least 5 pages and include a gallery/slideshow of work from my portfolio. It will also become the primary presentation of my design work for potential employers.

Below I will lay out my research on other sites & some theory on design approaches such as colour theory & menu layout.

I will then show my early thoughts on layout design & features of the finished site and while they may not fully represent my completed site they will have informed my choices for each stage along the way.

I will explain my design choices both with a view to my own personal preferences, my target audience and also usability on mobile platforms.

Lastly I will conduct a critique of the website, stating issues I found with both the design of the finished site and also the usability of WordPress as a platform versus sites designed with HTML editors.

 

RESEARCH

I had a look at a number of sites that I thought best showed the style of design that I like best, namely, as clean & ordered as possible, almost minimalist. These include the following:

http://www.gregormcguckin.com/ This site is very WordPress in it’s appearance but is made using a HTML editor. It has a very stylish look due to both the muted colour palette used and also the limited amount of text & other elements used. It’s a very simple but very effective site.

site3site2site1

 

 

 

 

 

 

This site here has a lot of elements that are in the minimalist style which I have always liked. A lot of the effects are achieved using Javascript too which we covered in this module.

site4

 

site6

 

The work of the New York based photographer Satoshi has been a favorite of mine perhaps since I took up the study of photography and his website probably embodies everything I enjoy & aspire to in design. It mirrors his work in it’s simplicity and minimalism, it’s clean, easy to navigate and it only has some of his best work on display. His earlier works of minimalist still life images will probably remain in my list of favorite works of all. This site is just a straight forward display of his work both in style & content, a small Bio and contact details.

site5

As a portfolio site, I intend mine to have sufficient information for visitors to understand what services I am offering and explaining where I have come from, but in a way that keeps the design clean and well spaced and offers the information in small enough packets to be able to read quickly while on the move.

Unfortunately, as a designer, I do not yet feel I have the track record to be able to present a website like Satoshi above where he has a lot of history. He doesn’t need a lot of information about who he is or what he does, he is simply Satoshi. Ideally I would prefer to design such a minimal site but feel my brand has to be developed first.

 

Menu

When deciding on the menu, I decided to place it to the top right which is where the majority of users expect to find it. In my research have only found 1 or 2 instances of it being on the left. I also placed the Home link to the left of the menu & the Blog to the right. So the order being…

Home – About – Work With Us – Portfolio – Contact – Grá Blog

However, through my research I have found a number of discussions & studies suggesting that visitors to a site remember for longest those items on the left end & right end of a menu. This suggests placing the most important links, Home & Contact, on either end. (Unless of course I considered the Blog to be an important link). These studies can be found here.

http://uxpajournal.org/examining-the-order-effect-of-website-navigation-menus-with-eye-tracking/

menu-research-6menu-research-4

 

 

 

 

 

These studies aside, through my own observations I found that very few of the sites I visited either had these links on each end of their menu, or even had a menu at all. I did decide to change my menu to have the Contact link at the far right but it does highlight a change in trend towards a much more minimalist look where even on a full website the menu is reduced to an icon. Conversely there are a still a lot of sites out there that have a very confusing menu layout or even more than one menu, as I have shown in the images below.

Here are some of the sites I reviewed.

 

This slideshow requires JavaScript.

 

Deciding on the colour palette for my site was relatively easy as I had conducted a lot of research into colour theory & psychology for my dissertation and had already decided upon a colour palette for my Brand Identity Module. The predominant colours being Orange, Cyan & Black.

Orange, being close to red gives a sense of heightened awareness & energy, a sense of fun & enthusiasm. It’s not the Red of danger, warning or stop.

Cyan or Blue, gives a sense of loyalty, competence, friendliness, trustworthiness and calm.

Black give a sense of professionalism,  authority, class & exclusivity.

So in designing my pages I used a combination of the orange & cyan in both the panels, links & buttons. This also complimented the branding on my site.

Button design is something I also had a look at in terms of the colour used. Again there are a lot of opinions on this subject as to which colour CTA button will give you a boost in conversions etc. Here is an example of one of those studies. And here also.

DESIGN

Early Site Map
Early Site Map
Site wireframes

Site wireframes.

To begin, we created a WordPress.org account which we installed on our Hostinger site as set up in Part 2 of this module. After exploring the options for a choice of theme it was decided to use the Vantage theme, before customizing it’s style & layout features.

I chose a template for my homepage & removed most elements from it, leaving a title image, 2 colour panels with introductory text, and a section about who we are.

I removed most of the extra padding around the top menu panel as it was very clunky lookin, I added my logo to it which left just it on the left & the main menu on the right.

I removed the standard footer content from the pages also and replaced it with 4 elements. Blog post list, Social media links, a pages list & a simple quote. There is a trend of placing a companies contact details in the footer rather than in the top menu but I decided against this & kept with a traditional contact page.

I then added the list of pages to my menu & made a list for each one of the elements & text I would need to populate them. This made it easier for me to pull together the content I needed to gather & found it a simple matter to construct each page from this plan.

I added a blog to the site as I find this a much more convenient way to post content on social media. When you can only post 75 odd characters on the likes of Twitter and Facebook isn’t my preferred medium, it is much easier to compose a blog post with exactly what you want to say and include images & other rich content and post a link to that on what ever social media channel you like. It also drives people to the website.

The contact page was customised from a template and has a map, contact information & link, and also a plugin contact form from Live Site This is a cute little plugin that collects contact form information and collates it in a dashboard setup. It also allows you to place a floating call to action button on the full & mobile site which will allow people to ask for a call back or even begin an instant chat. However, when I tested this on a mobile device it took up quite a bit of space & attention and took away from the clean look I was aiming for with the site so I disabled this option.

 

Through further research I was able to find the method for adding a Parallax effect into my site. I used this on both the Home page and the Work With Us page. I feel it adds an extra dynamic to a site though I will probably remove one of them as I don’t like to over use an effect. I found the information Here.

 

DESIGN ISSUES

I wanted to create a uniform look across the website, however, with all the options available to you in each widget, tabs, master page layouts etc, it was easy to get confused and perhaps miss a section that utilised a different font family than the rest of the website. Through some research I managed to find a string of code that would let you define a global font choice. I placed this code in the custom CSS panel & was able to choose the font I wanted to run throughout the whole website. I found the code here.

I found it very frustrating that unlike building a website through CSS & HTML it wasn’t easy at all to make simple changes by using code. For example, on some of the widgets if I wanted to float an element to the center of the box I would have normally used a small piece of code but with WordPress I was unable to find an intuitive solution. I tried placing a widget which allowed me to justify the text to the left but this forced me to use a separate widget to place the icons on. While this looked great on the pc, when I tested them on a mobile device the icons were ordered together & the text separate. So on the phone you would see 3 icons on top of each other followed by 3 paragraphs, then another 3 icons followed by 3 paragraphs. I decided to go back to the original design where the text was center justified, it’s not a huge amount of text so should not be too difficult to read.

 

CRITICAL REVIEW

Overall I am reasonably pleased by the look and flow of the site. The blog integrates nicely with the website and because the theme is the same it gives a unified feel.

I feel there are some areas that could have been improved by using a platform that allows more use of HTML & CSS. For instance, the ability to justify text is really easy in some widgets but impossible in others.

 

 

 

Advertisements

2 thoughts on “Interactive Media Web Authoring Part 3 of 3 (Responsive WordPress Site)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s