Advanced Web Apps, final project

I had been dreading this project because I still have so much to learn in PHP and Javascript, not to mention the other many topics we’ve touched on at warp speed. A lot of the time, it actually does feel like I’m sitting still in a protective bubble as code is being hurled in my general direction. Since I’m shielded, none of the knowledge gets in.

Counter to Thomas’ instruction, I attempted many different things: first trying out several different Mashape APIs without success before attempting to fiddle around in Aframe VR (since we had a still-forthcoming homework assignment using this framework), also without much success. For the discarded APIs, in the end, I wasn’t really sure what the APIs did; there wasn’t much documentation to be had (or maybe I didn’t know where to look), and they seemed harder to execute than the Yodaspeak example we did in class. When I did get a server response, it was an error. I think it was a 503 error (Service unavailable); even after looking this up, I still had no idea how to fix it, or if it was even a problem with my work or with the API itself.

So, into the Aframe VR experience I went. Looking through the work we did in class, there wasn’t a whole lot of code to be written, and it seemed fairly user-friendly. There was a good amount of documentation, though most of it not current with version 0.4.0. I tried several tutorials, following them line-for-line while substituting my own images. Only about 50% of the time did all of the assets I brought in to index file appear. I did successfully bring in a few equirectangular images to create 3d images, but couldn’t achieve anything beyond that. And since bringing in the image is literally just one line of code, I couldn’t feel too happy with that. I’ll have to go back to that next week.

And so, back to the APIs I went. I found yet another API to try out (a grammar app) and after much tinkering, I did manage to get a response that wasn’t an error. It wasn’t the response I was expecting to get, so I asked my husband to help. He helped me to get over the hump so that I was able to get it working. I prettified it in class today, and added a very modest CSS animation. View my app here.

In order to improve this app:

  • Must-have: currently the user will get the same response whether there is no text entered for grammar checking or if there are no grammatical errors. This is an obvious flaw and some more specific conditions should be put in rectify this.
  • Nice to have: sometimes the app doesn’t provide a useful response; it often just says “there may be a problem”. With such a vague response, it would at least be helpful if the app could indicate which words it suspects as being incorrect.
  • Nice to have: a better loading animation. I had envisioned something else but it is beyond my skill level.
  • Version 2: what would solve many of these issues is if the API were a little better and gave the same amount of detail for each suspected grammatical error.
Advertisements

Vector portraits

Over the holidays, we were asked to work on our final vector portraits. Luckily, we were able to work with any image of our choosing; that image taken at the beginning of class was not my finest moment.

I used an image from a photo shoot from May, taken during my Photography of People class at George Brown. That week, we were able to bring in our own model or have a portrait done; I opted for the latter since it was unlikely I’d have access to a beauty dish again in the near future. I was lucky enough to have Stephanie Cliche (our photography teaching assistant and a fantastic photographer in her own right) to shoot and direct me.

This project was interesting and provided some challenges I hadn’t been expecting. Deciding exactly where to place the highlights and shadows on the face in order to create the structure of the face was tricky. Having only 3 tones to work from for the skin, I had to reinvent some of the shadows around the nose and mouth in order to provide the definition I was looking for.

The most difficult parts of the project for me were all parts that were covered covered in hair. I selected art brushes for the hair details, highlights and shadows, which created an interesting shaggy texture, but controlling the colours of the brush strokes was confusing. Since art brushes rely on a colourization method of tints and tones of grey to apply the colour, I found that it often yielded unpredictable results.

Next up were the eyelashes and brows; I tried to use the art brushes in a similar fashion to create texture in these areas with varying degrees of success.

For the recoloured portrait above, I wanted to achieve an Andy Warhol-esque effect, but again encountered unpredictable results. The colour harmonies offered were initially very drab, so after some experimentation, I first changed the vector portrait above to a one-colour image (resulting in a coral-coloured portrait), then used the colour harmonies to arrive at the final result, a triad colour harmony. Since this was not really the effect I was going for, I won’t say that it represents my personality exactly.

A vector portrait using a triad colour harmony.
Another vector portrait based on a photo by Stephanie Cliche.

Web typography assignment

While I was away on a short trip to Quebec City, I missed the class dedicated to Web typography. Luckily, Mark was kind enough to record the class for me. Being a print designer and having worked in the magazine industry, I am already familiar with typographic contrast and hierarchy, but review is always welcome.

After a quick summary of the major typographic concepts, it was time to start  styling the articles we had selected. In the spirit of the subject matter, I chose to style an article on Paul Rand, a graphic design icon, and as a side benefit, got to learn more about him.

I enjoyed working on this project; it was pretty painless and although I struggled a bit with (up-to-now) seldom-used elements (table and definition lists), it turned out as I envisioned. Check out the result here.

I must admit that I do wonder about  the timing of this typography lesson. We have already built numerous websites and it kind of feels like this lesson and assignment should have come much earlier on in the semester. I’m sure it’s information that would have been beneficial prior to composite one.

Design-to-code assignment

This was a seemingly simple assignment that got way out of control for me. I thought I was pretty decent at the basics we’ve tackled so far and haven’t struggled too much with css and responsive design using the 960 grid, aside from the dreaded navigation bar, and in particular, the dreaded mobile navigation bar.

But this layout was actually built at 1024px, so I decided to nest a 960 grid within that. I managed to get the static desktop site mostly coded during class except for the form, and thought I was in good shape to make it responsive. I had already set some of the widths using percentages so it should have already been resizing fluidly, at least a little. But it wasn’t. Not one single part of it. So after trying to tweak things for a little while, I decided it might be better to start over. And over. And over. I think this final version is version 4.

To get to this stage, I have broken nearly every single thing, and usually more than once. I’ve had every block level element collapse on me, elements not centering when I thought they should, both vertically and horizontally. I’ve had trouble deciding whether an image should be applied as an image tag or a background image, and I’ve gone back and forth trying out each option. I’ve been on the verge of giving up on this assignment several times.

This isn’t perfect, but I have to stop working on because 1) I’m now growing to resent it and 2) I’m falling behind on all of my other assignments. That pesky imac illustration overlaps and doesn’t resize because I made it a background image. Maybe I could at least tweak the position, but I’m going to live with it now. I’m also pretty sure I was supposed to replace the images with their higher res 2x versions for retina screens, but I didn’t do that either.

Here are the final results: http://denisechan.ca/design_to_code/

To answer the Design to Code questions:

2. The layout uses the 960 grid…sort of.

3. The 12-column grid works best for this layout.

4. The main sections are: intro, services, portfolio, contact, footer.

5. I created body, header, nav, articles.

6. The full width of the site is 1024px.

7. Typical 960 grid has 10px padding and 10px margin all around. I didn’t have too many of the elements adhering completely to this convention though.

8. I probably could have wrapped the entire thing in a main tag, but I kind of thought they were all of the same importance so I didn’t use one at all. All of my elements are outside of main tag, though I don’t think it would be odd to have the footer, and maybe the nav outside of the main tag.

9. The only graphical elements i created were buttons. Now I’m wondering if I was supposed to make more? Maybe a favicon?

10. The “view my work button” was 140px wide x 50px high, while the “view project button” was 109px wide x 50px high.

11. I created the buttons using css a tags instead of creating a graphic.

12. The main colours used in the design were: #B9383E (dark red), #F64ES2 (lighter red), #E8E8E8 (light grey), #FFF (white), #000 (black).

13. This could have used a little letterspacing on the h2 tag in the contact section. The capital T and E are touching and that doesn’t look great. I find that letterspacing isn’t as subtle as kerning so I’ve mainly stayed away from it unless I want it to be really obvious that I’ve manipulated the spacing, but maybe I’m doing it wrong.

 

Composite one: 5 page responsive site

For this project, a concept came to mind immediately.

The last project I had worked on at Canadian Tire before I left was a trio of brochures for the high profile relaunch of the Premier paint brand.  It’s a project I was specifically chosen to work on, and one that I’m immensely proud of. It consumed much of my life from January to May, and in that time I:

  • learned from my brilliant husband (a certified colour management specialist) how to get paint colours translated into values I could work with for accurate colour reproduction in print and online
  • learned about paper stock, finishes, coatings
  • learned (at the eleventh hour) how best to arrange the paint chips in a brochure to minimize the risk that they will rub against and deposit colour on each other
  • attended photo shoots where I was able to use my newly developed photography skills to help with art direction
  •   worked with an amazing and passionate cross-functional team of brand  and product managers

I wanted to create a sister website to these brochures; there was  just one problem. I don’t own the rights to any of the assets used to build the brochures. I went back and forth for a while, thinking that it might still be okay to use these with enough disclaimers, but eventually I gave in to that little voice at the back of my head that told me to just make up my own paint company, especially since the site had to be hosted live. So I did, it just took me a while to get there. Until Wednesday, to be exact.

I had completed some wireframes and mockups by that time but they were taking so much longer than I expected, even with me knowing the programs. I’ve struggled with transitioning from print to web for years and I still feel a creative block when trying to tackle a mockup or wireframe for these major assignments.

I wasn’t optimistic of the kind or quality of free images I could find to compliment the content I was planning.  Luckily, I found this article  which led me to Unsplash.com, where I found about half of my images. For the other half, I looked to Flickr and discovered Emily May, a multi-talented marketing specialist and DIY decor/ design blogger, who has generously posted a lot of images under the CC BY Creative Commons license which allows for modifications and commercial use as long as the original creator is credited.

Now with the images handled, I looked back to the wireframes and mockups I had managed to create and although I hadn’t completed all of them, I had to jump into coding to keep the assignment on track. I quickly realized that I needed to simplify my original design. This is the first time that I’ve built a responsive site with more than 3 pages, and given the time constraints and my current skill level (and the time I had lost having to source images and rewrite content), I decided to refocus on having greater visual consistency between the pages. My biggest win on this assignment? Finding free images that actually fit the aesthetic I was looking for.

For the results, check out my site here.

Calendar project, HTML 5 + CSS 3

In the beginning…

So, I have to admit, I didn’t start this project when I should have. I wasn’t struck by inspiration when I was first given this project, so it took me a while to get moving. I found a few ideas on Hongkiat and decided that I really liked the look of the calendars where you could see all 12 months up in a grid. I also knew that I wanted something very visual, with good photography. But what should I use for my subject matter?

I initially thought I’d design a calendar featuring my horrible-adorable dog, Nibbler (named after this cutie from Futurama). My husband and I had been planning on making a printed calendar of him for years but we didn’t know if we had enough seasonally relevant images to fill 12 months. I set to work making a basic mockup of how those images would look together, and the result is below. Not bad, but I wasn’t sure there would be enough room for the actual calendar part. And it’s still a bit of a stretch on some of images, making them seem seasonally appropriate.

12 images of a dachshund
Photos by Roy Tanaka

Plus, since this is supposed to have potential as a portfolio piece, it would probably be a good idea to use my own photography. I have accumulated quite a lot of images over the 15-months that I’ve had a camera in my hand. Unfortunately, I didn’t have 12 images I liked that were:

  1. Of any single subject matter or theme
  2. All of the same orientation
  3. Had enough space for the calendar part

So, after combing through all of my images, I went a little more abstract. I chose 12 of my favourite images that satisfied 2) and 3) above, then tried to figure out how to organize them into something that made any sense at all. Here’s the result.

12 images of various subject matter
Photos by Denise Chan

I ended up trying to organize by colour and feeling first, then subject matter. The first 3 images are for colder months, so I thought dark, rich colours would work well. Plus I could kind of build it around a soup theme (the need to warmed up). The next 3 images are for the months from spring to summer, so I started with colours that transition from pale to bright, and with people as the unifying theme. For the next 3 images, I picked images with colours that go from bright to earthy, with a nature theme (sharp-eyed individuals will spot Nibbler for the month of September, his birthday month). And finally, the last 3 images move from earthy tones back to dark rich colour, with an urban feel.

The execution

I wasn’t really sure how difficult it would be to code out what I wanted; I hoped to create the thumbnail grid (as shown in my wireframe) as a navigational element (using anchors) that would take the user to a larger view of the individual month they had selected. Since the minimum requirement was to have one month completed, I worked on the individual months first, which actually went quite smoothly. My biggest hurdles here were image export (I had to redo it a few times due to poor planning) and also the positioning of the calendar info. I had created 3 classes for vertical positioning of the calendar info; these surprisingly worked out really well. I just needed to tweak that position for a few of the months, either a little to the left or right. This proved extremely challenging on the month of May. The solutions I had used on other months did not work here; after a few hours of fiddling, I ended making it work by using a negative margin on the left side.

Navigation grid for the win

At the eleventh hour, I finally decided that I really did want this navigational thumbnail grid; after all, that’s what inspired me to begin with and I would feel like the project was incomplete without it. While my unordered list transformed relatively quickly, all those little finesse things I wanted proved a bit more challenging. I was lucky to have my husband stay up to help me figure it out, but it was reassuring to know that I wasn’t far off the mark. All in all, I’m pretty pleased with my calendar. I had also wanted it to toggle with show/hide on the months using only CSS, but had to let it go. For now…

What is good design? Glad you asked…

As luck would have it, I attended a screening of “Design Disruptors” last night; it is a fantastic documentary (produced by Invision) about how some of the most innovative companies in world have used design to improve their products and gain a competitive edge in business. Rather than accept that pain points are an inevitable part of life, these companies focused on creating new products to address them. They saw opportunities to improve or simplify the lives of their users, and worked tirelessly in this pursuit. They brought design to the forefront to ensure that their users had a pleasant experience at every point of interaction.

Some of my main takeaways from this film:

  • identify who the end user really is (and acknowledge that it might not be you)
  • brainstorming sessions appear to be collaborative but can lead to group think and stifle abstract problem-solving
  • design is iterative and needs to evolve along with end user’s needs
  • conducting user testing at the prototyping stage allows you to address unforeseen flaws before official product release
  • unlike releasing printed products, you can immediately measure the success of digital products releases through analytics, social media
  • the experience is the most important thing and may require the sacrifice of visual design elements
  • design humanizes technology
  • truly great design is still really hard to attain

This quote from John Maeda will stay with me for a long time:

Design is about making solutions. Art is about making questions.