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

Category: week2

Week 2, revisited: Polish

posted Wednesday, June 15 2016 @ 1:33 pm EST

Technically I'm supposed to be done with the Kūsō Neko Pāku site, but after getting some feedback from a friend, I wanted to go back and polish up the color scheme a little bit. I'm a lot happier with it now:

• Harsh whites softened.
• Use of accent colors made more consistent.


I'll still be doing the week 3 mockups today, but it's looking like this will be another late night.

(Click to read more)

Week 2, Day 6: Front End

posted Saturday, June 11 2016 @ 6:19 pm EST

Today is implementation day, so step one is to get the site running online somewhere. I want it to be its own little website, and not a sub-directory of my portfolio. Additionally, I'd rather not start adding a bunch of new apps to the Heroku account, because that might cause it to run out of Free Dyno hours and have everything go down near the end of the month. (It's not incredibly likely that will happen, but I'm not fond of the possibility existing.) Long story short, I need to find a totally separate web host for this.

My requirements:
• Free indefinitely, no subscriptions or anything like that.
• Stable and low maintenance.
• Raw HTML/CSS/JS, so that any content management system I may decide to add is strictly optional.
• Decent storage and bandwidth, but it doesn't need much.

After searching for a while, my best option overall appears to be NeoCities. In just a couple minutes of drag-and-drop upload, my mockup from yesterday is running no problem: http://nekopaku.neocities.org/

The following features have now been added, as well as a plethora of other small functions I wouldn't be able to list off the top of my head..

Key features:
• galleries for each cat
    • images offloaded to Google Drive to keep NeoCities bandwidth use down
    • load cat image URLs and info from a directory of XML files
    • pictures can be flipped through using thumbnails
    • support for embedding video from YouTube
    • links internally to 'Reservations'
• pull news posts from a directory of XML files
• functioning calendar page for reservations
    • info popup for each date
    • lists "cats available" and hours

//www.youtube.com/embed/5JONKljgfPI?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0

(Click to read more)

Week 2, Day 5: UI Development (cont.)

posted Friday, June 10 2016 @ 1:52 pm EST

More UI work today, it's looking like I'll be ready to finish implementation tomorrow as previously expected.

Cats Layout (new lightbox)

Now includes a section for the calendar. More responsive than before.

News Layout

Random article text for demonstration purposes.

Reservations Layout

This calendar will be replaced in implementation. Desktop lightbox. Mobile lightbox.

Tomorrow: finished implementation!

(Click to read more)

Week 2, Day 4: UI Development

posted Thursday, June 9 2016 @ 7:48 pm EST

Being more of an engineer than an artist, I'm be doing coded mockups in HTML / CSS. One thing that's especially nice about this is I can see how my responsive design looks with various window sizes. Additionally, this will reduce my workload for final implementation significantly.

Because I got started late, I'm now writing this edit at 6:50AM on the 10th, but I decided I'd prefer getting this done to sleeping. I have completed the 'Home' layout now, and am proceeding with the 'Cats' page next.

Home Layout
An actual mobile device won't be as tall as this, but it's the width that matters for the layout.

Thanks to <a href='http://zoetakitty.tumblr.com/' target='_blank'>Zoë Anderson</a> for the excellent logo. Cats shouldn't be given coffee. Minimum width 320px layout. That's already a live map. Sections collapse neatly.

Cats Layout

These will eventually be different cats, of course. Desktop cats layout with lightbox gallery. Compact single column. Mobile with lightbox.
(Click to read more)

Week 2, Day 3: AFK

posted Tuesday, June 7 2016 @ 8:05 pm EST

Unfortunately, as much as I'd prefer not to take a break this early on in the project, today I have a business meeting in Boston and a family function following that. In lieu of an actual blog post, here are my plans for the rest of the week:

Thursday:UI Design - mockups
Friday:UI Engineering - implementation
Saturday:Misc polish and finish-up.

Since I'm not working on this today, I intend to work Saturday if necessary. That said, I am hoping to be finished by the end of Friday.

(Click to read more)

Week 2, Day 2: UX Design

posted Tuesday, June 7 2016 @ 5:07 pm EST

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Home, Meet our Cats, News, Reservations
        • the page you're currently viewing is highlighted on top nav
    • Language select: English / Japanese

• Home (/)
    • Above the fold:
        • large photo of café interior
        • marketing message which is also a cat pun
        • "scroll down for more info"
    • Below the fold:
        • graphical links to Cats, Reservations, and News
        • hours, location, directions
        • menu, pricing
        • summary

• Meet our Cats (/cats)
    • single image for each cat with their name
    • access lightboxed gallery pages for each cat
        • 2 to 4 photos, possibly a video
        • brief personality bio
        • calendar of cat's availability
            • internally links to the calendar page
        • link to cat's adoption page (if applicable)

• News (/news)
    • birthdays
    • adoptions
    • holiday and misc closings
    • general promotion stuff

• Reservations (/reservations)
    • for each day, list cats expected to be present
    • note any days with closings or irregular hours
    • make reservations to visit for a given timeslot
    • can link to a specific day using hash location

Flowchart:

Flowchart

Wireframes:

Home page. Cat galleries page. Cat gallery lightbox.
News page. Calendar and reservations. Date information lightbox.

Tomorrow: away from keyboard..

(Click to read more)

Week 2, Day 1: Research and Planning

posted Monday, June 6 2016 @ 7:22 pm EST

This project is now complete!
See it here: http://nekopaku.neocities.org/
Or, keep scrolling to read more.

Our Company: This week's site will be promoting "Kūsō Neko Pāku" (Daydreaming Cat Park), a fictional cat café in Tokyo. Originating in Taiwan and very popular in Japan, these theme cafés allow patrons to lounge with a veritable clutter of friendly cats while sipping tea or coffee. Aside from adorable feline employees, the main thing these businesses have in common are their terribly designed websites. Unformatted HTML, error pages, and broken links abound. We'll see if I can do better.

Our Audience: Because land is so scarce in Japan's big cities, most of the population lives in small apartments, and pets aren't allowed. Between this and the country's obsession with all things 'kawaii', we can target the broad demographic of anybody that loves cats but can't spend time with them at home.

Specifically, a more focused target would be students and young workers with busy schedules; members of this group that require stress relief and companionship to cope with their day-to-day grind.

Use Cases:
    • Basic information: quickly access hours, location, directions, and summary blurb.
    • See the cats, get to know a little bit about each of them.
    • Calendar to work with your schedule.
    • If I have extra time, it may be prudent to implement Google's Website Translator for the tourists.

Content Strategy: Pictures and profile pages for each cat in a gallery format allows users to build a preliminary attachment with the feline staff. A quick and easy-to-use calendar system allows users to plan a visit when the cats they want to see are likely to be available. Reservation and prepayment allows us to guarantee them a spot.

Tomorrow: spec, flowchart, and wireframes!

(Click to read more)