The Making Of GirlGamer

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

• 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.”

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?

Blocking the Layout

• 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?

Determining Interactions• 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.

Coding the design

• 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.

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.

Programming

• 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.

Final Content

• 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.