Week 30 – Learning Activity – Building a Mobile-Friendly Website

For this activity I was asked to:

  • Write a detailed brief. (You may use a real client or a fictional one.)
  • Use the information from the brief to build a wireframe for the website.
  • Choose a WordPress theme for the website.
  • Customise the WordPress theme to fulfil the specific needs of the client.
  • Make sure that the site works on both desktop and mobile devices. (It does not have to work perfectly, but I want to see that you have considered it.)

As I have been working in the development of  arte50.com  and the site is build up from a wordpress theme, that I later customized to fulfil the specific needs of the client and work both  on desktop and mobile devices. I decided that I could explain a bit of the process of the  site development here.
  • Write a detailed brief. (You may use a real client or a fictional one.)

Brief arte50.com:

Client service

  • Provide High School students studying Media and Communication with learning tools about art history.
  • lead you through a brief history, concepts and names of the most renowned associated artist from abstract expressionism, Swiss style, pop art and psychedelia’s
  • Within this site you will find a collection of links and references to books
  • The site might develop further and incorporate more art styles
  • Create a network or art interested people to collaborate and expand the site content

Requirements

The website facilitate access to art styles, contacts, statements, concept images related to each art style, books references, links for further reading based on history archives. Further on it will incorporate a section that describe how an specific style is used in today’s graphic design.

Objectives

Spread and share free knowledge, research the market and check positive feedbacks on people interest on the site further development.

How are you going to achieve this goal?

If people request it the site will start increasing its content and broader its art styles, in conjunction with people interested in collaborating with the further development of the site. The information should be filtered and based solely in history facts and well supported by books and references links from reliable sources. Getting in contact with art history organizations.

Website architecture 

architecture

Style

The site need to be neat, simple, consistent and functional offering inspiration to achieve new ideas

Suggestions for marketing the site

The site will be shared in locations where art students might frequent, graphic design meetups, using social media, creating network groups in social media, contacting academic entities.


 

  • Use the information from the brief to build a wireframe for the website.

I need a navigation menu that count with a tab where you can choose the style you are interested in, a search bar for finding and specific style, contacts and about the site .

The site will also include pictures related to each art style that acts as identifying icon that travel with the user and is changing for each style. It will also have boxes for related artist, referance books and links.

home
Wireframe PC home

 

mobile-home
Wireframe mobile home

 

  • Choose a WordPress theme for the website.

I chose a theme called: Blue Sequence By Joen Asmussen

This template offers attributes similar to the requirements of my wireframe. The downside is that it offer little customizations by default so I need to work a bit deeper with codes to adjust it to my clients needs.

wp-theme

 

  • Customise the WordPress theme to fulfil the specific needs of the client.

As result after customizing the site I ended up with the following  result

edited-theme

  • Make sure that the site works on both desktop and mobile devices. (It does not have to work perfectly, but I want to see that you have considered it.)
Here how it looks on a mobile:
mobile-site

Final Product

Final product

Direct link Arte50

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s