NAFSA

PROC

ESSbook

www.treytrumble.com

March 23, 2013 © 2013

Trey TrumbleAll rights reserved

TreyTrumble

3Process Book

4

5

Table of Contents

Project BriefClient InfoObjectives

Target AudienceKey MessagesSpecifications

Home Page

Connect & Network Page

Mobile Home Page

Sketches

Computer Sketches

Final Product

Credits

4

5

6-7

8-9

10-11

14-15

16-17

18-19

21

6

Project Brief

NAFSA is in need of a new website that can be easily navigated, looks sophisticated and visually represents their image. While accomplishing these three tasks, the student must make three different layouts. One being the home page, which will be both web based as well as mobile (ipad) and the other being a Connect and Network page, which will be only web based.

Client Information

NAFSA pioneered the concept of providing professional services for post secondary exchange students. Early efforts to enhance living and learning environments for exchange students have blossomed into today’s active association of accomplished professionals whose numbers continue to grow worldwide.

Objectives

NAFSA looking to redesign their association website so that is was better architected, visually more modern and sophisticated. The new site needed to enhance the NAFSA brand and place more emphasis on people and real stories. the site also need to be scalable, template-based for easy CMS publishing and responsive to desplay gracefuly on multiple devices.

7

Target Audience

Educators, students, and administrators

Key Messages

NAFSA envisions a better world where people embrace their common humanity and work together to meet global challenges and opportunities.

Specifications

• Three screens: homepage, one, sub page, and a responsive mobile homepage.

• Site architecture to follow sitemap

• Imagery of teachers helping. international student, and international students in work and education settings.

• Do not alter logo other than color• Color palette is open to a

new direction.• No existing brand guidelines

to follow.• Visual design to be modern,

informational, clean and international.

8

Home Page

I designed the home page for easy navigation as well as a modern and sophisticated feel.

9

1Menu is fixed to

sidebar while

scrolling. Tabs &

links turn navy blue

when hovered.

2Boxes loose their

drop shadow and

press into the

background when

they are clicked.

3Every second the

banner fades into a

new image. Circles

can be clicked to

see any banner.

4Content is scrollable

withing its own div.

Titles appear in a

box upon hovering

the each image.

5Titles appear in a

box upon hovering

each image.

6Network icon/circles

turn navy blue

when hovered.

1

2

3

4

5

6

10

Connect & Network

I designed the Connect & Network page for an easy understanding of the navigation as well as a dominant use of color for rememberance of the current page.

11

1Menu is fixed to

sidebar while

scrolling. Tabs &

links turn orange

when hovered.

2Boxes loose their

drop shadow and

press into the

background when

they are clicked.

3Every second the

banner fades into a

new image. Circles

can be clicked to

see any banner.

4Content is scrollable

withing its own div.

Titles appear in a

box upon hovering

the each image.

5Titles appear in a

box upon hovering

each image.

6Network icon/circles

turn orange when

hovered.

1

2

3

5

4

6

12

Mobile Home Page

I designed the mobile home page for easy scalability, obvious large tabs, animated scrolling features and easy navigation.

13

1Boxes press into the background when

they are clicked.

2Arrows can be clicked for an animated

horizontile scroll that will not take the

viewer to a new page until “Learn More” or

the images are pressed.

3Network icon/circles bleifly turn navy blue

when they are pressed

1

2

3

14

15

Four Step Design Process

My process included four steps. The first was sketching four concepts. The second was choosing three concepts to convert to computer roughs. The third was developing two computer concepts to being nearly finished. And the fourth was the final step of developing the best concept into a final product.

16

1. Sketches

While sketching the four concepts, I tried to focus mainly on how the user interface will function as well as higherarchy of information and visual elements. I tried to make each concept different from the one next to it, progressing from moderate to what I believe web design will look like in years to come.

17

2. Three Computer Rough Drafts

I chose these three concepts to convert to computer roughs because they had the best potention for a succssful UI as well as enough space for content such as text and imagery.

This concept is based

on a modern layout that

uses newer, but moderate

animated features as the

view uses the tabs above to

navigate to each page.

Concept two becomes

more complex through the

use of a rotatiing globe for

potential students to see an

immediate visual element

that they can

play with.

The last concept is the most far

from current. It imitates a chalk

board that a student would

see in a classroom and takes

advantage of the pull-downs

for tabs to navigate through

the site.

Concept One Concept Two Concept Three

18

Concept One

19

3. Develop the Better Two

From step two, I had chosen concepts one and two. They were more modern and sophiscticated. But they would also have the best potential for scalability when it came time to designing the mobile layout. Some things that were altered were added headers in concept one and tab rearangement in concept two.

Concept Two

20

21

4. Choosing a Final Concept

Concept two was chosen as the final product. A few things were altered. Illustrations and color were added for easier understanding of which page you are on and layout was also altered slightly in order to differenciate one page from another.

22

Trey TrumbleProfessor Jun Bum Shin

James Madison UniversityGRPH 390

Credits

TreyTrumble