Ad

Monday, February 4, 2013

Studying websites by wireframe - Shopify.com pricing plan

As a part of my wireframing class, I decide to study a few popular websites and understand why their design/visuals are so great. Here's what I came up with after studying shopify.

I found this exercise very helpful. Wireframing (what I call reverse engineering wireframing) helps crystalize existing design ideas, simplify it to help the student understand what elements of design are present. Doing this exercise helped me realize that a seemingly simple page contains a lot of well-thought-out components. See full conclusion below after 3 screenshots.





Conclusion

I would argue that the seemingly simple shopify pricing and plan page is very well designed: encompasses many variations of call-to-action, presents relevant information keywords and FAQ, highlights desired outcomes. That’s a lot of information on a small seemingly bare page, with all the right elements but more robust information.

No comments:

Post a Comment

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid