Tag: web

Codepen – React JS making Bootstrap Components

Below is a simple React app to show how Twitter Bootstrap components can be broken down into components with props passed between functions. The Start button with dropdown, and the modal window, are meant to evoke a desktop OS – it’s like having a tiny and totally ineffective computer!

Also, check out the essay worth of Javscript code it takes to make… this…

Ultralite – News Home

Ultralite – my new series of personal web projects

The actual working versions of the links:

CodePen – Ultralite News Home

GitHub – jhmwkg/ultralite_news_home: Ultralite demo web layout project.

Ultralite is a series of tiny web projects based on responsive layouts. It is also something of a personal organization project. Each of these pages will have a CodePen entry where you, reader, can open it in a new window and stretch it around to watch the responsive layout do its laying-out. In addition, each page will also have a Github repo it lives in so you can see the full code by itself. You can copy and paste it into your favorite development environment, make changes, mess around with it, and generally come up with new ways to let your friends and enemies know what an inspiration I am.

I will pretty much be posting them as I make them.

Fun Fact: The new logo actually says “WHID?”

Really, it does.

Not only that, but the headers aren’t just there to look nice, although I can not deny that they certainly do not fail in that aspect. The headers also demonstrate the dynamic visual capacity of the new logo, which rides the contemporary tide of flexible brand identity. Plus, messing around with it entertains me.

ux course uglies

This post is a little out of order….

It’s not a story the average designer would tell you….

But…. in between lo-fidelity and hi-fidelity….

There is ugly-fidelity.

And by in between ugly, I mean that I got to a mental block, had to back up a few steps, before continuing on that branch of thought to get to the correct result.

Put on your seatbelt, reader… I’m gonna do that thing again… where I use this blog to group together Instagram links…

View this post on Instagram

PROTIP: If you're starting your project in low-fidelity, your starting fidelity is still way too high. I realize this image doesn't look like much to any regular human being but… Sometimes it is necessary to go backwards before going forwards. My brain is turning into a knot on this project, and I ain't no boy scout, so what I decided to try was to make an "ugly" version with base-level geometry only. See that little orange thing on the far right? Do not be deceived by its simplicity, for even that is a seed that will germinate into a forest of excessive complexity. Time for me to stop messing with this for a bit. Current homework "Roar Cycles" UX Design Essentials by Dan Scott on Udemy.com @bringyourownlaptop #uxui #uxdesign #udemy #userexperience #webdesign #adobe #adobexd #wireframe #wireframing #wireframes #prototype #prototyping #prototypes #whidone #whathaveidone #oroborosmosis

A post shared by Joseph King (@whidone) on

more homework progress – in situ mocks

View this post on Instagram

In situ mockup of my prototype. on a tablet. Photo is from Unsplash, by LinkedIn Sales Navigator. Including my Photoshop panel to show evidence of my nefarious tinkering. This guy doesn't know it yet, but he is exactly the kind of youthful, independent free-thinking person who is using the internet to buy himself a sick new fixie. Current homework "Roar Cycles" "Roar Cycles" logo provided by instructor. Icons are from Google Material. UX Design Essentials by Dan Scott on Udemy.com @bringyourownlaptop #uxui #uxdesign #udemy #userexperience #webdesign #adobe #adobexd #photoshop #adobephotoshop #wireframe #wireframing #wireframes #prototype #prototyping #prototypes #whidone #whathaveidone #oroborosmosis

A post shared by Joseph King (@whidone) on

ux course progress hi-fidelity mockup

View this post on Instagram

Hi-fidelity stage of course project. This image shows prototype view of product page. As I have previously posted about, I used Photoshop to make "warm" and "cool" color versions of each product. this enables the interaction where the user can select the thumbnail from the gallery and see a bigger version. Current homework "Roar Cycles" "Roar Cycles" logo provided by instructor. Icons are from Google Material. Unsplash photos by Robert Byet, and Sabina Fratila. UX Design Essentials by Dan Scott on Udemy.com @bringyourownlaptop #uxui #uxdesign #udemy #userexperience #webdesign #adobe #adobexd #wireframe #wireframing #wireframes #prototype #prototyping #prototypes #whidone #whathaveidone #oroborosmosis

A post shared by Joseph King (@whidone) on

ux course progress

“…And if you look out the window to your left, you’ll see the first trilobites have evolved…”

View this post on Instagram

Some more sketching for micro-interactions in my project. Product page intentions included: photo gallery swaps out on color radio button select; stats expand and collapse; FAQ is a stack of accordions. The last two I don't have working yet. I laid out everything on the same page, with stats and FAQ ending up below the viewport. However, XD doesn't do overlays outside the viewport. What I might end up doing is splitting up the Product page into two pages with a "More"/"Back" transition, and setting up stats and FAQ on the second page. Current homework "Roar Cycles" UX Design Essentials by Dan Scott on Udemy.com @bringyourownlaptop #uxui #uxdesign #udemy #userexperience #webdesign #adobe #adobexd #wireframe #wireframing #wireframes #prototype #prototyping #prototypes #whidone #whathaveidone #oroborosmosis

A post shared by Joseph King (@whidone) on

Lo-Fi Micro-Interactions in UX Course

Homework post “Roar Cycles”

I’m still in that UX course. Current project is UX for “Roar Cycles”. Project brief expects at least a home page, category page, and product page. Lo-fi screens, hi-fi screens, at least 3 microinteractions, and user testing.

Here’s a roundup of my latest progress from Instagram:::::::

drivel

As I’ve mentioned before, I’m working on a UX course

I’m posting my comments on my blog bc tbqh rn I dun care what anyone thinks lulz

The next homework I need to complete is a user testing exercise. I’m supposed to perform moderated and unmoderated user tests, and post a comment on the course about what happened. I intend to actually do it for the sake of the experience, but like anything else, my efficiency is roughly  glacial.

Executing a test means I have to design appropriate tasks. Best way I can describe things right this second – I am cursed with galaxy brain. The course has already gone through how to do research, and figure out what elements that customers will expect. Thing is that Adobe XD is not about programming, and as such doesn’t have memory of variables. (If anyone wants to correct me go ahead!) A real website has to account for a variety of blended situations related to sorting/filtering of lists, color choices, quantities, radio button options, and text fields. Adobe XD can  display those UI elements just fine, but — once again, maybe I just haven’t figured it out yet — can’t create dynamic progression of page states.

So maybe someone wants a chair, and they want it red instead of blue, and they want three of them, and they want it to be shipped to Citytown instead of their usual default of Countryville, and they want to pay with their Visa instead of their AmEx, and they want it shipped 2-day. An Adobe XD prototype cannot account for all these zillions of possible combinations.

Thus I am still in the stage of deliberating how I am going to drastically simplify this into something that has some of the expected features of a real website, while obviously missing lots of stuff, while still making a path for the user-tester to take from start-to-finish to complete the task.