joanal internetauthoring designbrief

Plan, design and build a websiteJoana Liras life and work

November 27th, 2014

2Plan, design and build a website

Creative Brief

Home page

Welcome page

Media About Blog

Designer

Homepage

Introduction page

Intern Pages

Topics in the page (Suggestions)

Study/CareerHometown Carnival Why Joana?Books

Parttners

Images Audio(?)Video

Designer Portfolio

Personal info

Contact

Latest news

Link for Social activity

Social activities Links

Owl project

Clients

Joana Lira is the persona that I chose to develop a site. Joana already has her site at http://www.joanalira.com.br/. It has lots of colours and has many illustrations of her work. Her design is very distinctive, taking some influence from local artists and and the culture of Northeast Brazil.

On the other hand, we can find some usability problems such as legibility, dimensions and editing. As an example, the site offers two language options at the Welcome page but in reality the site it is not fully translated into English. I intend to plan and organise a site in a simple and direct way.

Offering a new clean design project with good usability and easy navigation will allow the best portrayal of her work, as showed at the diagram below. Preserving some of the unique and vibrant colours, patterns and drawings of the website will also help to this end. To organise the site, the header will be on the top of the page and will

contain the main menu and her logo as a link to the home page. This header will be the same for all pages in the site. The background site patterns and colours will be much more muted to highlight her illustrations more.

Her new site will give information about her life, work, influences, as well as some images and videos. In addition, Joana has many clients such as Tok&Stock and LOccitane Brazil. Also, she is involved in some social projects works such as Owl Project which is an undertaking to revitalize a square for community use.

Besides Joanas life and work, the website will show some links to other relevant websites. Also there will be also a personal page talking about myself and my work. Finally, there will be a page with the latest news on my blog.


This diagram shows the pages organization on site. First the site opens a Welcome page, followed for the home page (principal page). At this page will be presented all links on the main menu such as Designer, Portfolio, Clients, Media, Activities and Links at the main menu on the header. And also About Us and Blog at the Footer.

Most of the links will open another sub page. Some of the subpages have a direct link to another sub page such as Portfolio to Social Activities and Links pages, as showed in the diagram bellow.

Site-map Diagram

Home page

Welcome page

Media About Blog

Homepage

Introduction page

Intern Pages

Designer Social activities Links Portfolio

Home page

Welcome page

Media About Blog

Homepage

Introduction page

Intern Pages

Designer Social activities Links Portfolio


A draft of initial plans for the page layout with 960px width and 16 columns.

Wireframe

Logo

Home Designer Portifolio Media Activities Links

Designer

Hometown

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inalaksd falsdk alf asfasfs reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ocia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ellamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis autdsda a adasdsadas de irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ocia deserunt mollit anim id est laborum.



Logo


Juliana Paiva, 2014. About Blog

Portifolio

Carnival

2009 2010 2011

2012 2013 2014

Carnival

Books

Parttners

Clients

960px with 16 columns

Body

Body

Image

Image

Image

Image

Image

Image

Image

Main menu horizontal Side bar

Image

Hea

der

Hea

der

Footer


Here I put some links and screen shots of sites that have inspired me to plan, design and build this website.

Links: Ilustrativa

http://www.ilustrativa.com.br/

ionZhttp://www.ionz.com.br/

Rouxbehttp://rouxbe.com/dashboard/orientation

LabMattarhttp://www.labmattar.com/

Leo Burnett (Canada)http://www.leoburnett.ca/

Havaianashttp://www.havaianas.com.br/

Initial Research

Website Evaluation documentJoana Liras life and work

January 16th, 2015

3Website evaluation document

What changed? This project aims to have a clean design with neutral colours in the background and main menu. Some vivid colours start to appear when the user clicks or passes the mouse over the options on the main menu. Also, colours appear on the footer bar to indicate the selected page.

Grey is the principal colour used in the website background with light and medium variants. A pattern is present in the background as a watermark and is present on all internal pages (Figures 3 and 4).

What changed on the home page? The logo comes bigger with more emphasis. More items were included on the main menu, such as contact. A line was introduced into the picture and the footer, to separate areas. The footer comes with rounded corners, and a very delicate shadow was used for the page content to separate the content from the background.

A Welcome page was not considered. It is not necessary; the home page is the welcome page. The final site delivered almost 90% or more of the proposed design (Part 1).

Content was re-organized, such as:

DESIGNER Joana, hometown and career. PORTFOLIO Carnival Scenario, Carnival Illustrations, Book Illustrations, Clients, Illustrations and Patterns. MEDIA Three topics, including one with her family. But these topics change according to her work. SOCIAL ACTIVITIES Respect the same considerations as MEDIA.

Figure 3

Before

Figure 4

After


LINKS Shows at least four links but can show more if necessary.CONTACT With a simple form.

See the new organization of the pages bellow (Figures 5 and 6).

Figure 5

Before

Figure 5

After


The initial plans for the page layout (Figures 6 and 7) with 960px width and 16 columns barely changed.

The structure

Logo


Designer

Hometown



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis autdsda a adasdsadas de irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ocia deserunt mollit anim id est laborum.



Logo


Juliana Paiva, 2014. About Blog

Portifolio

Carnival

2009 2010 2011

2012 2013 2014

Carnival

Books

Parttners

Clients


Body

Body

Image

Image

Image

Image

Image

Image

Image


Image

Hea

der

Hea

der

Footer

Figure 6 Figure 7


The final website (Figures 8 and 9) followed the initial structure. Just the header got bigger than the previous one, giving more emphasis to the logo and main menu.


Body

Body


Hea

der

Hea

der

Footer

Figure 8

Figure 9


ANCHOR The picture from the home page sends the user directly to the exact position of the related text (Figure 10).

LIGHTBOX During the construction of the site, some problems seemed to resolve themselves, such as the light box legend. In the previous design, the sign for previous and next picture was in the footer bar of the light box. However, some legends needed more space, and the symbols were transferred so that they stayed over the pictures. Just the close symbol stayed in the same place (Figure 11).

On the other hand, I tried changing the symbols for new ones but the code did not accept the new ones with the same names. I couldnt understand why.

CONTACT The contact page was not designed before but for the website a contact page is absolutely necessary. I did some research on the Internet and could see different types of forms. For Joanas site, a big form is not necessary, just important contacts from the user such as name, email, phone number and a message (Figure 12).

In the meantime, the form does not work because it needs a PHP code to send to personal email or a domain.

RESPONSIVE The site can be responsive, but the code needs to be changed. However, for mobiles this site needs to be simpler with less content and more direct.

Figure 11

Lightbox

Figure 10

Anchor

Figure 12

Contact page

What worked and what did not work


Here I put final links and screenshots from sites that have inspired me to design and build this website.

Links: Fernando Jaeger Atelier

http://fernandojaeger.com.br/atelier/

The Dielinehttp://www.thedieline.com/

Rouxbehttp://rouxbe.com/dashboard/orientation

Final Research

joanal internetauthoring designbrief

Documents