Creating an Online Store with Symfony – Part 2: Design

This part contains only mockups and designs. There are some hand drawn sketches but almost all design is created with Adobe Fireworks.

The Grid Idea: product grid spans the entire width of the browser. This applies to home page, category listing, search results, filters, etc.

Design Sketch online shop step 1 - the grid idea

Product details page and shopping cart (together with checkout page):

Design Sketch online shop step 2 - details and cart


Design Sketch online shop step 3 - grid

Layout: Categories grid item (with filters) and cart always come first. They are followed by products:

Design Sketch online shop step 4 - red grid

Added advertising for realism, plus some cuts, splashes and scratches here and there:

Design Sketch online shop step 6 - red grid complete

The final layout of the product list (on the third row you can see what happen when you hover over an item):

Design Sketch online shop step 6 - green grid complete

Product details page:

Design Sketch online shop step 7 - product details page

Shopping cart and checkout:

Design Sketch online shop step 8 - shopping cart and checkout


Design Sketch online shop step 9 - detail

6 Responses to “Creating an Online Store with Symfony – Part 2: Design”

  1. makabaka says:

    When will you publish the next part of that article? It’s good and i’m waiting for more! :)

  2. Squirrel says:

    thanks, i’m working on this but as a side project, so it may take a while. release date for the project should be the beginning of march…

  3. adrian says:

    salut, nu am gasit nici o pagina de contact, asa ca am sa te intreb aici: ai putea sa ma ajuti cu niste raspunsuri referitoare la symfony? mi-am batut capul de cateva zile cu o chestie, si nicicum nu reusesc sa o fac. ti-as fi foarte recunoscator :)

  4. Squirrel says:

    salut, trimite-mi la square arond si incerc sa raspund

  5. Gawrrell says:

    Salut, mai ai codul sursa pentru proiectul asta?

  6. Squirrel says:

    E ingropat printre alte proiecte intr-o arhiva pe DVD-uri… Dar e foarte vechi si incomplet, nu l-as mai recomanda nimanui. Am avut experiente foarte bune cu CodeIgniter si diversele lui extensii, daca vrei sa construiesti o aplicatie. Daca vrei un magazin online, recomand cu caldura WooCommerce si WordPress, chiar daca putin “umflate” cu feature-uri uneori inutile, sunt usor de extins si poti livra rapid clientului funcitonalitatile dorite. Spor.

Leave a Reply