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

"Website a Week" Is now "Weekend Web Dev"

posted Thursday, August 4 2016 @ 10:05 am EST

Just a quick announcement here, which was mentioned in passing last post. Because I'll be starting a new job shortly, and won't have as much time to spend on hobby projects, this blog will be moving from weekly to weekends-as-time-permits.

That said, it will also be ongoing with no planned end date. Moving forward, projects will see longer development overall, starting with "A Dark Road" (because I want to keep on that one until it's totally done).

(Click to read more)

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.

Screenshots:

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)

Week 5: 'MetaFeed' Project Shelved

posted Friday, July 22 2016 @ 11:05 am EST

Long story short, I am putting this project indefinitely on-hold, and will revisit it sometime in the future only if Facebook decides to make their API worthwhile and usable again.

As frustrating as it is to admit after spending nearly two weeks on it, this project is going nowhere fast. It was supposed to be about learning more AngularJS and working with various site integrations, but what happened instead is the whole thing got hijacked by just how long it takes to do a properly implemented, best-practice, and fully "Angular way" Facebook API integration.

Even then, if you survive the odyssey and come out the other side with your product intact, the end-result isn't all that worth it. Facebook has discontinued actual support for full feed integration; all you can embed now is your own posts and content, not the full news feed or anything posted by your friends / liked pages.

This, I suspect, is why most of the "social network aggregators" on the market all-but-omit Facebook integration nowadays. It's just not worth the trouble. Most of the ones I've tried let you put in the name of one or more pages, but then all they do is give you a link to it on Facebook. They're not offering anything your browser's bookmarks list can't already do.

Next week: Entirely new AngularJS project planned, which should be a lot more fun to do and far more compelling as a portfolio demo.

(Click to read more)

Week 5, Day ???: Miscellaneous Delays

posted Sunday, July 17 2016 @ 7:23 pm EST

So, due to various circumstances and a whole lot of unforeseen delays (mostly concerning the time and complexity involved with creating a Facebook API integration from scratch in AngularJS), it's looking like this project definitely isn't going to be done tonight.

Rather than continuing to rush this, and consequently rushing the next project as well, I'm just going to give it another week and take the time to really do it right. As it stands now, this one is nowhere near where I want it to be.

Blog posts will probably be on hold until done, and I'll post the finished implementation whenever it's ready. I'll also have another updated calendar at that time. For organization's sake, I will continue to refer to this as the "week 5" project, even though it's of course spanning more than a week now.

(Click to read more)

Week 5, Day 2: UI Development

posted Wednesday, July 13 2016 @ 7:09 pm EST

Since I'm creating a social network feed, Bootstrap seems sensible. After all, it was originally developed at Twitter for exactly this sort of thing. That said, we need to do a little bit of extra setup to get it playing nicely with AngularJS.

To this end, I'll be using AngularStrap, which provides "a set of native directives that enables seamless integration of Bootstrap 3.0+ into AngularJS 1.2+".

...

This took a lot longer than I would have liked. First, I got caught up in playing with AngularStrap, which is fine because I need to know how to use it. Then I ended up sending close to an entire day on functionality that I decided not to use, which is less than ideal.

Mockups are done now at any rate:

Login message. Settings modal. News feed.

Next post: completed implementation, hopefully.

(Click to read more)

Week 5, Day 1: Research and UX

posted Tuesday, July 12 2016 @ 7:53 pm EST

Going to try and keep this brief, as I haven't got a lot of time today.

Our Company: MetaFeed is our fictional company of the week. Their product will be an online data aggregator which pulls down data from a variety of social networking sites (Twitter, Facebook, Google+, etc.) to show all your important news in one convenient location.

Our Audience: Anybody using multiple social media sites will find this helpful, especially if they're using three or more.

Use Cases:
    • Catching up on a bunch of different social networking sites.
    • Keeping logins all together for easy access. (Password storage on client's browser.)
    • Sort and search aggregated content with ease.

Content Strategy:
    • Content pulls in data from various APIs.
    • Update the page live when new updates are found. (No need for user to to refresh.)
    • Passwords are handed directly from end-user to social networks, not stored by our server.
    • I want to do some more portfolio work with AngularJS, so I'll probably be using it here.

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

• Top Navigation
    • Logo, product name
    • Username and logo for each signed-in social network.
    • Settings - just opens a modal.

• News
    • If no networks are logged in, show a basic message instructing user to do so in the settings.
    • Newsfeed, sorting options, search.
    • Label for network, who posted it, time posted.
    • The post content itself.
    • Reply from MetaFeed, or go to post on originating social network.

• Settings (modal)
    • List of all supported networks.
    • Click an entry in the list to log in.
    • OK / Cancel

Flowchart:

Flowchart

Wireframes:

Login message. Settings modal. News feed.

Tomorrow: mockups!

(Click to read more)

Freelance Project: Wisdom of Astrology

posted Tuesday, July 12 2016 @ 2:00 pm EST

This took quite a bit longer than I would have liked, and I didn't have time to add every little thing I wanted to, but overall I'm happy with how it came out. So, with permission from my client, here's a look at what I've been working on for the last couple days.

Live URL: http://www.cathypagano.com/

Key Features:
• Bolt CMS for content management.
• Theme built from scratch in Zurb Foundation.
• Imported all content from client's old website, overhauled layout.
    • 61 newsletter pages, which were brought over automatically using JSON, Selenium, and PHP myAdmin.
    • Custom interface uses Blogger API to pull down content from three different blogs.
    • Integration with PayPal for service charges and donations.
    • YouTube embeds (both single video and playlist).
• Filters for imported content:
    • Change all "Comic Sans MS" to significantly better "Comic Neue".
    • Enforce a minimum font size to correct unreadably small text.
    • Change broken links on images to nice Magnific links (where applicable) or otherwise remove them.

The homepage, with main navigation and sidebar. Astrology is the largest section on the site. One of the three Blogger blogs included, in list view. The books section is fairly straightforward. The Services page, with PayPal integration. The Astrology Videos page, with YouTube integration.

Later tonight: Week 5 research, spec, flowchart, and wireframes!

(Click to read more)

AFK July 5th - 10th: hiatus extended

posted Monday, July 4 2016 @ 8:00 pm EST

Due to the numerous tasks involved with catching up with after a long trip, the fact that I still need to promote my last project, and various business-related errands I had to run today, there simply wasn't any time available to start on project 5.

Additionally, Sam appears to have found my next freelance client for me, work which will likely consume the next couple of days at the minimum. As such, I will be returning to "Website a Week" next Monday instead of today:

Week 5:July 11th - July 15th
Week 6:July 18th - July 22nd
Week 7:July 25th - July 29th
Week 8:August 1st - August 5th

I have big things planned for the remaining projects, and I want to do the best work I can on all of them. As much as I'd have liked to start "project 5 on the 5th" and have this all done by the end of July, it's more important that this is top-notch portfolio work at the end.

afk
(Click to read more)

AFK June 27th - July 1st: one week hiatus

posted Saturday, June 25 2016 @ 4:22 pm EST

As mentioned briefly in my first ever post on this blog, I will be taking the next week off. In observance of Independence Day, project number five will begin on July 5th.

afk
(Click to read more)

Week 4, Day 4: Front End

posted Friday, June 24 2016 @ 7:50 pm EST

There's still a few things left to do here, but finally the website is pretty much done. Nothing like feature creep to keep you working.

Live URL: http://sstilesphotography.com/

Key Features:
• Templates, plugins, and content managed via WordPress 4.5.3.
• Heavily customized theme built from the ground up in Bootstrap 2.3.2.
• Photo galleries:
    • Offload image hosting to Google Drive to reduce load on site.
    • Accommodate one large preview image.
    • Up to 7 smaller thumbnails at once.
    • Any number of additional images as well.
    • In "Project Gallery" mode, List View shows all images in gallery.
    • Click the large preview image to see modal popup with full image.
    • Click any other thumbnail to jump directly to that image.
• Social sharing toolbar supporting Twitter, Google+, and Facebook.
• Page embed integration with Sam's Facebook page.
• Custom plug-in to provide PHP contact form in Home view.
• For ease of use, Project galleries and Blog posts are created the same way
    • Just make a post in WordPress, write some text.
    • If it's for the Blog, that's it, just publish!
    • If it's a gallery, add images, a thumbnail, check 'project' category.
• Project list: attractive thumbnail view using 'featured image' from each post
• Blogs and galleries both have well-formatted comments sections supporting nested reply threads.
• Archive view, accessible from the sidebar, shows all the posts from a given month, both project galleries and blogs.
• Download view automatically pulls in a specified archive from Google Drive to provide downloads of commissioned works.
• Scheduled backups via Gmail run automatically three times a week.
    • Google Analytics for traffic monitoring.

What's left to do:
• Write usage guide for Sam.
• Set Sam up as an additional admin on the WordPress site.
• Associate Sam's domain name with the site.

//www.youtube.com/embed/cNp65uFfxK0?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0 Home view. A list of Project galleries, shown as thumbnails. A project gallery. The list of blog posts, but there's only one here at present. A blog post. Archive view shows both galleries and blog posts. The download page.
(Click to read more)

Week 4, Day 3: UI Development (cont.)

posted Thursday, June 23 2016 @ 7:37 pm EST

It took a long time, but things are starting to look a lot more complete now. The site is currently using placeholder images, as Sam only just recently got his photos over to me, but all the layouts are complete at this point.

Front page, contact form, sample gallery. List of project galleries. Gallery with placeholders. List of blog posts. Single blog post view. Multiple comments to demonstrate nesting. The archive view displays both projects and blogposts. Projects display their gallery thumbnail. Download page.

Next time: finished implementation!

(Click to read more)

Week 4, Day 2: UI Development

posted Tuesday, June 21 2016 @ 7:56 pm EST

I didn't get very far into implementing this mockup before hitting my first snag: Neocities does not support the uploading of PHP files for free accounts. This is a problem because most of WordPress consists of PHP files! As such, it was necessary to find a different hosting solution, which can be challenging because most free WordPress hosts won't let you use custom themes or layouts for free. I ended up settling on Byethost, which allows you to manually install WordPress, add custom themes, and even run a MySQL database, all for free.

The next sticking point was getting custom JQuery scripts set up with WordPress Enqueue, which would have taken much less time if I hadn't been missing a simple typo and pulling my hair out over every technical solution I could think of.

Overall, far less progress than I would have liked, but here's where we are:
• Set up hosting with Byethost, including FTP and MySQL.
• Installed WordPress 4.5.3
• Installed and began configuring a custom theme using Bootstrap 2.3.2.
• Got custom JQuery scripts working, after much trial and error.
• CSS fix for WordPress admin bar overlapping theme's top navigation.

Not going to bother with screenshots tonight, because the site currently just looks like any default Bootstrap demo. I'll be AFK for a large chunk of tomorrow, but I should hopefully have some time to work on this in the afternoon and evening. Next post will most likely be Thursday evening.

Next time: finished mockups!

(Click to read more)

Week 4, Day 2: UX Design

posted Monday, June 20 2016 @ 8:00 pm EST

Because I'll likely be busy tomorrow, I'm looking to get something of a head start today. Ideally this will be the first of two blog posts.

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Home
    • Projects
    • Blog
    Not 100% certain a top nav is needed this time, may decide to skip it later.

• Home (/)
    • Background will be several large, high-rez photos from Sam's portfolio.
    • Small sample gallery and intro video.
    • Contact information (name, email, phone #) readily available.
    • Email form to contact directly via website.

• Projects (/projects)
    • List of projects, each linking to a gallery page.
    • Thumbnail for each.

• Project Galleries (/projects/<project_name>)
    • Loads project images from Google Drive.
    • Current / previous next view
    • List view

• Blog (/blog)
    • Sam said he isn't looking to blog much, but it would be good for SEO.
    • Basically just the usual WordPress news page, themed to match the site.

• Download (/download?id=<download_id>)
    • Accepts a URL parameter to provide a download of a corresponding ZIP file on Google Drive.
    • Loads project name, customer name, from accompanying XML in same folder, displays on page.
    • Gives an error message without URL parameter, or if ID is not found.

In interest of expediency, I'm doing the flowchart and wireframes by hand this time.
It doesn't look quite as nice, but it's a lot faster.

Flowchart:

Flowchart

Wireframes:

Later today: mockups!

(Click to read more)

Week 4, Day 1: Research and Planning

posted Monday, June 20 2016 @ 6:40 pm EST

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

Our Company: My brother Sam is a photographer, and in addition to working for Motif magazine, runs his own small business "Sampson J Photography". He has asked me to create a WordPress site to replace the very rough-around-the-edges Wix portfolio he's using currently. I've been planning to include a WordPress site in this challenge regardless, so this seems a good opportunity to actually help out, rather than just making another fictional business demo.

Our Audience: Sam has done work for assorted special occasions, weddings, and even a documentary. There's probably more I'm not aware of. Our audience is anybody looking to hire a photographer for their event(s), so primarily I'm creating a platform where Sam can showcase his work and demonstrate his talents.

Use Cases:
    • View galleries of Sam's work and assess his skills as a photographer.
    • Availability and contact information.
    • Provide download of completed photo work to customers.
    • Needs to be easy for Sam to update and add new content without doing any coding.
    • Google Analytics.

Content Strategy: The front page will have his contact information and a sample of his work readily available. A selection of galleries from various projects will be available as well. Customers who have hired Sam will be able to access their files via a password he provides them with.

To start with, the site itself will be hosted on Neocities, the photos on Google Drive, and the videos on YouTube (which is to say, much the same as was done with Kūsō Neko Pāku). When Sam is ready to make the move to WordPress.com, that will be as simple as just copying the files over from Neocities.

As WordPress sites go, this one isn't really going to involve very much blogging. We primarily need it to act as a CMS for Sam to create new galleries and add photos to them. Since this is the first website I'm doing for a real business, it seems prudent to hook up Google Analytics tracking for visitor statistics, too.

Tomorrow: spec, flowchart, and wireframes!

(Click to read more)

Week 3, Day 5: Front End

posted Friday, June 17 2016 @ 7:12 pm EST

Everything should be just about nailed down now. See screenshots and video demo below.

Live URL: http://havinsurance.neocities.org/

Key features:
• Signup and login process.
• Modals on Home page for each insurance type.
• Modals on Quote page to add policies to account.
• Fix for page content horizontal shift resulting from modal's removal of the scrollbar.
• Account page data from XML for selected policies.
• In lieu of having an actual database, browser cookies are used for temporary account info and policies selections.

//www.youtube.com/embed/KK7keK_UIgo?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0 Home view, top. Home view, with lightbox. Policy quotes view. Policy quotes view, with lightbox. Account management view.
(Click to read more)

Week 3, Day 4: UI Development (cont.)

posted Thursday, June 16 2016 @ 7:39 pm EST

Live URL: http://havinsurance.neocities.org/

As mentioned previously, this project uses Zurb Foundation 6 for its responsive layouts.

Home Layout

Quote Layout

Account Layout

Tomorrow: finished implementation!

(Click to read more)

Week 3, Day 3: UI Development

posted Wednesday, June 15 2016 @ 7:17 pm EST

Still working on this, got caught up in fussing with Equalize, so this has all taken much longer than I would have liked. Here's what I have so far:

Update: The home layout is mostly done now, but the other two will have to wait until later.

(Click to read more)

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 3, Day 2: UX Design

posted Tuesday, June 14 2016 @ 12:41 pm EST

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Products: links to home#products
    • Quote
    • Log In
        • If not logged in, opens login / signup popup
        • If logged in, this is hidden.
    • Account
        • If not logged in, this is hidden.
        • If logged in, clicking directs user to /account
    • Contact Us: links to home#contact

• Home (/)
    • Hero image with marketing message.
    • Products: Homeowner's Insurance, Renter's, Flood, Vehicle
        • Clickable tabs expand to show more info on each.
        • Compare policies now!: links to quote page
    • Assorted other 'FAQ'
        • Accordion menu
    • Contact Us
        • Explain the site's purpose as part of the Website a Week challenge.
        • Provide links to my profile, the blog, etc.

• Quote (/quote)
    • Tab select at top for different insurance types.
    • Table comparison of different plans / coverages for the selected insurance type.
    • Select plans, one per type for a total of 1 - 4.
    • "Buy" selected plans, adding them to the account page.
    • "View my account details"

• Account Management (/account)
    • If not logged in, no account into is displayed.
        • "Please log in to continue."
        • Open top nav login / signup popup
    • View insurance currently on account: coverages, pricing, etc
    • Adjust coverages to a different level for that insurance type
    • Cancel insurance policies, removing them from account

Flowchart:

Wireframes:

Homepage view Homepage with login popup and 'Homeowners' section open. Comparing Insurance Quotes Popup shown when selecting a plan. Account Management

Tomorrow: mockups!

(Click to read more)

Week 3, Day 1: Research and Planning

posted Monday, June 13 2016 @ 6:55 pm EST

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

Our Company: This week's site will be an online insurance sales company. (Property insurance: home, auto, flood, fire, etc.) I'll be reading up on a few actual sites of this type to inform my filler content a bit, but the main purpose here is to spend some time working with zurb-Foundation, as most of my prior framework experience is with the ever popular Bootstrap.

Our Audience: Our broad demographic is anybody buying property, or having property already, which they need insured.

Use Cases:
    • Finding and comparing available insurance plans.
    • "Buying" insurance. (See below.)
    • Log in, manage purchased plans.

Content Strategy: The main homepage itself is mostly for informational and advertising purposes. It functions as our sales pitch, and also provides general info. (Though being a fictional business, much of this will be lorem ipsum.)

There will be a way to search for available plans and "purchase" them. I say "purchase" in quotation because I'm not going to charge anybody money, but I want to have (what looks like) working payment forms and account management. (I'll make certain nobody thinks they're really buying free insurance. Don't want to get anybody in trouble.)

Tomorrow: spec, flowchart, and wireframes!

(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)

Week 1: Butter CMS Blog

posted Saturday, June 4 2016 @ 12:21 am EST

Because the first 'week' of this challenge is really only today and yesterday, I started with a small manageable project, but one which is nevertheless essential: the creation of this blog! Butter CMS handles the content storage and publishing duties, so most of the work required was layout and styling. Here's a short list of the highlights:

- For better SEO, the blog is integrated as a subdirectory of the main portfolio site, which runs on Rails.
- Content hosted and managed via Butter CMS, which is communicated with using calls to their API Ruby Client.
- Custom JQuery function allows posts to be sorted "newest first" or "oldest first".
- Custom JQuery to load and scroll to a specific post indicated by hash location.
- Index page lists all posts, but does not load the full body content until a post is clicked.
- Inherits CSS3 animated backgrounds, smooth scroll, and colorbox popups from the main site.
- Responsively switch to reduced-width mode for mobile and small windows. (Supports width as low as 320px.)

Not to worry, the other seven sites will include more detailed process tracking, consisting of multiple posts over the course of each week. This project just wasn't quite as involved as what's coming up next.

(Click to read more)

Introducing the "Website a Week Challenge"

posted Friday, June 3 2016 @ 10:57 pm EST

Hello and welcome to my blog! In the following two months, I will be developing a new website weekly, for a total of eight counting this one. My objective is to brush up on and expand my existing skill set, learn more about what's new in the UI/UX scene, and build out a wide variety of quality portfolio content. I'll be making a post each workday to detail my process and methodology, as well as catalogue any behind-the-scenes tidbits I deem interesting.

Tentative schedule as follows:

Week 1:June 3rd - 4th
Week 2:June 6th - 10th
Week 3:June 13th - 17th
Week 4:June 20th - 24th
~one week hiatus~
Week 5:July 5th - July 8th
Week 6:July 11th - July 15th
Week 7:July 18th - July 22nd
Week 8:July 25th - July 29th

This omits weekends, as it's intended to mimic a typical Monday - Friday routine. That is to say I will do my best to take days off, but I reserve the right to work late nights as needed.

If you have any feedback or suggestions, feel free to contact me at zachary_stiles@my.uri.edu or (401) 225-5673. I'm excited to see how this goes, and I hope you are too!

(Click to read more)