The Making Of GirlGamer Alexandra Mokh

Alexandra Mokh

13 Step Process Defining the Audience Creating the Style Finalizing Features & Sitemap Blocking the Layout Determining Interactions Creating Wireframes Creating Design Mockups Coding the Design Logic & Linking Database Details Programming Testing Final Content

Defining the Audience

Creating the Style

Finalizing Features & Sitemap

Blocking the Layout

Determining Interactions

Creating Wireframes

Creating Design Mockups

Coding the Design

Logic & Linking

Database Details

Programming

Testing

Final Content

Defining the Audience Who are they? What do they value? How do they use the web? Where do they spend time?

Who are they?

What do they value?

How do they use the web?

Where do they spend time?

Creating the Style What colors work? Choose descriptors. Retro? Modern? What emotions should be conveyed? Choose style elements. Gradients? Textures? What associations will the users have with the site? “ smooth, depth, slick, tangible.”

What colors work?

Choose descriptors. Retro? Modern?

What emotions should be conveyed?

Choose style elements. Gradients? Textures?

What associations will the users have with the site?

Finalizing Features & Sitemap What sections do you want? Home, Community, Calendar? What are the main features? Forums, Profiles, Game Files? What are the types of page layouts? Homepage, article, feed?

What sections do you want? Home, Community, Calendar?

What are the main features? Forums, Profiles, Game Files?

What are the types of page layouts? Homepage, article, feed?

Blocking the Layout Break up the page into 4 to 6 areas. What content areas are required? Navigation? Adspace? Content Areas?

Break up the page into 4 to 6 areas.

What content areas are required?

Navigation? Adspace? Content Areas?

Creating Wireframes Break down the Blocking in more details. Determine content details. What functions need to be where? What image sizes will you need?

Break down the Blocking in more details.

Determine content details.

What functions need to be where?

What image sizes will you need?

Determining Interactions How will your features work? How will the functions flow? How does the user get notified? Break down the feature details.

How will your features work?

How will the functions flow?

How does the user get notified?

Break down the feature details.

Creating Design Mockups Bring the styles, wireframes, features, and details together into a full design for each page.

Bring the styles, wireframes, features, and details together into a full design for each page.

Coding the design Convert the Mockups into HTML & CSS. Create all the pages as code. Fill with sample content.

Convert the Mockups into HTML & CSS.

Create all the pages as code.

Fill with sample content.

Logic & Linking Detail functions. Link pages & content. Explain interactions. Explain logic.

Detail functions.

Link pages & content.

Explain interactions.

Explain logic.

Database Details Determine all data that needs to be saved. Organize by main entities such as users, events, games, etc. Determine the type of data and values.

Determine all data that needs to be saved.

Organize by main entities such as users, events, games, etc.

Determine the type of data and values.

Programming Integrate the functions, design, interactions, logic, HTML & CSS. Connect functions to the database.

Integrate the functions, design, interactions, logic, HTML & CSS.

Connect functions to the database.

Testing Test the site by using it. Record bugs, issues, things that look weird, etc.. Have friends and potential users test it and record feedback.

Test the site by using it.

Record bugs, issues, things that look weird, etc..

Have friends and potential users test it and record feedback.

Final Content Setup sections and details. Input the real content to replace the sample content. Launch site!

Setup sections and details.

Input the real content to replace the sample content.

Launch site!

Thanks! These are the steps that can be applied to making any website or online business.

These are the steps that can be applied to making any website or online business.