Skate E-shop

7sk89

school project: skateboards and clothing for girls

Second quarter in Graphic Design program at Seattle Central Creative Academy, we were given individual creative briefs for sport clothing brands. The task was to create logo, brand's visual guidelines and website prototype according to the target audience and brand's objectives and strategy. I was happy to get this amazing creative brief: skateboarding clothing and gear for girls ages 8-15. The brand's mission was stated as building confidence in girls who want to go into this boy-oriented sport, and also to build a community of this girls. It was very inspirational to research for this project.

Website on my server space

7sk89
7sk89

Given:

Creative brief:
7SK89 is a casual yet stylish brand of street and skateboarding gear, shoes and clothing toward younger girls (ages 8 to 15). The examples brands to seek inspiration are Vans, Vision Street Wear and Stussy. 7SK89 uses designs from artists in the skate scene: wild prints and loud colors establish a sense of individuality in a typically male centric yet changing realm.

Adjectives to work with were: cool, individualistic, colorful, stylish.

Task:

create a home page, product grid and product page based on creative brief.

Skills used:

Developing Information Architecture, wireframing in Sketch, Bootstrap, CSS3 animation, jQuery.

Time:

1 month

Process

My process included the following steps:

  • Creating a logo for a brand.
    I went through several iterations of the logo, including peer review of my sketches. First, I created several iterations of the logo:
    Second, I've added color in several iterations. 72k89 logos The final version can be found on the website and above in the introduction to the project. Also, in the beginning of the work on the project, I've created a styleguide for the future website. The styleguide can be found here.
  • Wireframes.
    I've created a basic wireframe for a home page in Sketch application to define the sections of the website.
  • wireframe
  • Visual design
    I designed the website in the browser and using Adobe Dreamweaver. I didn't create a visual reference in Adobe Photoshop or Sketch because I've already had enough information for me in style guide and wireframes, to start coding.
  • Technologies used.
    The audience of 8-15 likes motion on the web, as well as sport, especially skateboarding, is all about movement. So, I've decided to use a few opportunities to add motion to the website prototype. I animated the logotype, so the hero character of the logo moves on mouse hover. Also, I've added background video and some other animations on hover.
    Home page of the website can be seen here.
  • Product grid and product page.
    Product grid and product page are more about a good UX than wonders of new CSS animations. I tried to include all necessary buttons and opportunities to learn more about the product. I think that opportunity to add an Instagram picture of the look is a very pleasing for any girls, and also it is good for potential cusstomers because they can see how products looks on real girls.

Reflection

Among the things that I found especially important:

  • Move it.
    It is not easy to design a website for such young audience, I have never done it before. I've learned some of the new things to do it better. For example, I've never animated .
  • Community.
    I had never experienced skatboarding except for seeing skateboarders in the streets of all big cities I've ever traveled to. So, I've never thought about the struggle that girls might experience when they try to enter this sport. While I was doing my research, I found out that there is not many websites that sell skateboarding gear and clothing for girls. Even some popular brands that everybody knows about have skateboarding clothing and gear for adults and for boys, but not for girls. Just 3-4 websites that I've found were advocating for girls and skateboarding, and I even consider reaching them out with this project to help the community that they try to build.
  • Learning things on the go.
    When I came to the office first day, I was presented with a set of requirements. Some of the technologies were rather new for me, for example, developing the Wordpress website in the Vagrant environment (virtual machine). I've learned to install Vagrant and use it.
  • Flexibility.
    Making changes in the initial wireframe layout while developing it, depending on the comments and goals of the end users.
  • Thinking of end users.
    Developing a one-page Wordpress layout was a challenge because I needed all sections to pull the information from CMS logically.