StumbleUpon frontpage prototype assignment

It's time to update this blog again. It's been a while. I completed a range of small assignments, which don't worth to be even mentioned. A lot of HTML, CSS, ExtJS, Prototyping and Photoshoping. But here is the one interesting, which proved to me the importance of HTM5, and showed how much development can rely on frontend, how much processor work now is performed on client's browser, and which direction UI technologies are moving.

StumbleUpon contacted me for frontend position, and gave me an assignment. I did not express too much enthusiasm professionalism motivation aptitude to work in this cool fast paced San Francisco shop, I guess. I completed the assignment, and never heard from them again.
Here is the result of the assignment: http://portfolio.kardash.net/StumbleUpon/.
Demo prototype of StumbleUpon frontpage.
HTML is very simple. Utilizing semantics of HTML5, tags such as <header>, <nav>, <aside>, <section>, <footer>. All the formatting is done by css files. Special condition for lower than 10 versions of Internet Explorer which do not support new set of HTML5 specs tags:

I used jQuery as a basic JS library.
What is really cool about this demo page is that nothing is hard coded. I mean all the content is taken from JSON-like structure located somewhere else. For the demonstration purposes, it's sucked from this javascript file: http://portfolio.kardash.net/StumbleUpon/demo_data.js.
Styles, text truncates, icons - everything was carefully detailed and polished.
Primary Content Block, Secondary Content Block, Followers section - they all are just empty placeholders in HTML!
<!-- Main stumbles go here -->
<!-- Favorite topics go here --> 
<!-- Followers avatars go here -->

Another cool thing is sorting by Views, Title, Category of the data taken from the data.js above file. Pure javascript implementation. Quite a work was done here: http://portfolio.kardash.net/StumbleUpon/demo_su.js.


These were StumbleUpon requirements.

It's a history now.

Comments

Post a Comment

Popular posts from this blog

Conceptual design

Image
Consider this post is about visual design. A duct taped banana. This piece of art was sold for $150,000 in December 2019 at Miami's Art Basel . Actually $120K x 4 + $150K = $630,000. Not bad for 10 cents banana and few inches of duct tape. This became a sensation of 2019-2020. Why and how it happened brings up some questions about modern society and economy. How artists (or art dealers, or anyone else) create value from nothing? And emphasize the importance of the idea. In this particular case it's nothing more than an idea. Is this the art we'd like to see? Probably not. But perhaps it's the art we deserve.
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project, which goes t
Read more

How do I use InVision

Image
Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company.  I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined.  I sync designs via the plugin in Sketch made by Invision, called Craft .  When they are in InVision, we call those designs prototypes .  It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intensely and re-publish
Read more