< Back
Weekend Web Development
Return to Top Top ▼ Newest First

Category: week6

Week 6, Days 3 - 5: Frontend

posted Wednesday, August 3 2016 @ 7:17 pm EST

It's actually been a week since my last post, but since several days were lost to job-search-related tasks and paperwork, I am hesitant to say more than three or four of that was actually working on this project. At any rate, this isn't going to be content-complete for a long while (because this kind of game takes a long time to write), but I'm happy to call it mostly-feature-complete and release the following in a demo capacity:

Live URL: http://adarkroad.byethost24.com/

Screenshots below. Not including the modals again, as those look almost entirely the same. Really though, screenshots can't do this kind of game justice. If you have 10 minutes, give it a try at the above link!

An unfolding game starts in the most minimal fashion possible. The long opening sets readers up to be surprised by expansion of scope. Simple name entry form. The office. Each button has been clicked once. Searching the crime scene. Second conversation with the client.

From the looks of it I'll be starting a new job pretty soon, so the "Website a Week" Challenge will be undergoing a re-brand as I switch from weekly projects to developing mostly on the weekends (when I have time). More about that in my next blog post, sometime tomorrow probably.

(Click to read more)

Week 6, Day 2: UI Development

posted Wednesday, July 27 2016 @ 6:01 am EST

Day two, here's where we are now:
• Separate layouts optimized for desktop and mobile.
• Fully responsive to all screen sizes. (Though I'll recommend 640px width.)
• Working modals for bottom navigation.


The full end-game UI on desktop. Mobile displays in two halves for readability. Mobile layout part two. 'About' modal. 'Save' modal. 'Share' modal. 'Restart' modal.

Tomorrow: continuing implementation.

(Click to read more)

Week 6, Day 1: Research and UX

posted Tuesday, July 26 2016 @ 3:07 pm EST

This week I'll be creating an "unfolding game" in the vein of A Dark Room or Candy Box. Unfolding games are a small, somewhat new genre of video game that start out very simple, almost mundane, and then expand in scope over the course of play. I feel this will make for an interesting UI demo, because it will require an interface that begins with almost nothing (a single button, a line of text or two) and smoothly evolves into something much more complex.

Our Company: No fictional company this time, I will be publishing without pretense under my own name.

Our Audience: Unfolding games are all about engaging the human curiosity, so our wide target can be "pretty much anybody looking for something to do on the internet". More specifically, this kind of experience is most likely to appeal to people in their 20s - 40s trying to kill 20 minutes to a couple of hours online.

Use Cases:
    • Online entertainment.
    • Potential ad revenue if things really take off.

Content Strategy:
    • Provide an interactive experience which is effortless and intuitive to learn.
    • Start with a single button, and gradually add elements as the player progresses.
    • Surprise users with new reveals often enough to maintain engagement, but not so often as to confuse.
    • Use non-interactive style changes such as text and background color to reflect various events.
    • I'll include Google Analytics to keep an eye on how things are going.

UI Spec:
This will be a lightweight one-page app.

• Main Interface - various lists, logs, and buttons to interact with the game logic.

• Bottom-left
    • © ZAS 2016 - medium gray font to be less intrusive, links to portfolio site

• Bottom-right
    • Save - export game data to a simple text string
    • Share - buttons for various social media platforms
    • Restart - restart the game from the beginning

Flowchart and Wireframe:

Flowchart Wireframe, reflecting fully-revealed end game UI.

Tomorrow: mockup, beginning implementation!

(Click to read more)