Display Text Typography Projects

Continuing with my ongoing education in design, I focused recently on typography and layout. And I went through two Lynda.com courses to do it.

Those courses are called Learning to Set Display Type and Learning Graphic Design: Set Perfect Text. They are both taught by John McWade.

The classes John McWade teaches are exceptional because he is such an excellent instructor and quite good at explaining the concepts he is trying to get across. I recommend both of the classes I mentioned above, as well as other classes in the Lynda library by this instructor. Here are previews of these two courses.


Neither of these classes include exercise files. But after watching both of these courses I was inspired and motivated to try my own type projects, to put his advice into use.

Type Rules I Learned

It sounds basic, but I wasn’t aware that some fonts have additional glyphs that can be used instead of the regular font. Bookmania is an example of a font with tons of extra options for letters.
I also learned about justifying text, using hyphenation and spacing to help words fit. I also learned about using hair-spaces and thin-spaces, and using drop-caps.
Actually, the class doesn’t go into how exactly one would create a dropcap. So, I turned to YouTube – or as I like to call it, the second internet – to find another tutorial.
And I found one. This one is actually by another Lynda instructor, Anne-Marie Concepcion. She makes it look so easy.

 As soon as I learned how to do this, I wanted to try it right away. Voila!

Type Stuff I Made

dropcaps

Now we’re getting to the fun part. First is the dropcap I made after watching the YouTube video.
Drop cap and Display type
Used Bookmania and a Lynda tutorial to create a dropcap.

In this one, I was able to move the text corners so that the text flowed around the dropcap R. Looks cool.

I was inspired to use the extra glyphs in Bookmania to create my own name. I used the smallcap version of the letter ‘A’ in the word, “alliwalk”.

Projects with Images

I like to collect stock photos – I know, it’s a bad habit – because I think that someday I’ll use one for a project. So, I end up with many stock photos that I don’t use. (Sometimes I use them here on my blog.) Well, I was finally able to put a few to good use.

All Dressed Up

The first is this nice “Man in a suit putting on a tie”. I wasn’t sure what I was going for. Maybe a book cover or magazine spread. But, I think what I have is some sort of flyer concept.

This image uses Bickham Script Pro and Didot.

This image uses Bickham Script Pro, which has tons of fancy glyphs, and Didot. Didot has a certain fashionable sense to it, and I think it works. I wanted this to have a bespoke aura about it, yet still masculine. The italicized Dido, and the extra swirls from Bickham Script Pro help to get that across.

New rules of computer technology

BarryW90-Black, BarryW90-Thin, Futura Medium, and Minion Pro

In this case I wanted to use justified type, as John McWade had shown in his course. I stuck with Minion Pro, because it was easier to work with. And I added in a few random elements – a few numbers, some quotes, some pronouns – just to incorporate some of the lessons from the course. One thing I wasn’t able to replicate was keeping the subsequent letters from the word in the dropcap closer than the other words on lines 2 and 3. InDesign just wasn’t cooperating for me.

But I did enjoy this project. BarryW90-Black and Thin are highly stylized, very technical-looking fonts. I was inspired to find a new stock photo for them. Something computer-oriented.

 

Next time…

In my next post, I’ll talk about a few more projects in InDesign, and another type/logo(!) project I made for a fake company I invented called Apex Travel.

7 Web Design Articles

At some point, I came up with the idea that reading 10 articles on one topic was a good idea. Well, I only made it to 7. But these 7 articles, on LESS and 404 pages, were very helpful for me so I’m still glad I read them.


Learn LESS in 10 Minutes

15 Interesting JavaScript and CSS Libraries for April 2017

Related:

  • http://lesscss.org/features/#features-overview-feature
  • http://less2css.org/

I really enjoyed learning LESS, although I think it would be easier to use with a task runner.


15 Interesting JavaScript and CSS Libraries for April 2017

http://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/ 

 


34 brilliantly designed 404 error pages

http://www.creativebloq.com/web-design/best-404-pages-812505

Getting inspiration and a sense of best practices while creating my own 404 page. I have to say, Bloomberg’s is hilarious. (Creative Bloq, October 10, 2016)

 


How Do I Create a Custom 404 Error Page?

http://www.htmlgoodies.com/beyond/reference/article.php/3472591/How-Do-I-Create-a-Custom-404-Error-Page.htm

Yes, I did create a 404 page, which is located at alliwalk.com/404/. But given that my current website is only one page, it’s hard to get lost.


Should I use a video as a background?

https://css-tricks.com/should-i-use-a-video-as-a-background/

(CSS Tricks, Dec 2015)


Create Fullscreen HTML5 Page Background Video

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video


CSS Filters

https://css-tricks.com/almanac/properties/f/filter/

This is one of the coolest things I’ve seen in a while, but it’s still experimental so don’t use it for anything important.

Incorporating UX Audit Tasks into a User Research plan

The Beyond User Research presentation, from World Information Architecture Day, got me thinking about a related article called The UX Audit: A Beginner’s Guide, from Usability Geek. My other blog post about World IA Day was long enough, so I didn’t mention it then. But, the similarities in the article and the presentation were close and I wanted to mention it.

Alternative Methods for User Research

Unlike the article, the Beyond User Research presentation isn’t a strict guideline. It doesn’t mention any particular research methods to follow. It shows that a UX team can schedule different research methods within a UX research plan. The presentation mentions at least two types of data sources: web metrics and user research.

Web metrics examples included: search query data, logs from a call center, data from analytics reports, voice of the customer reports, CRM applications, and so on. A web analyst might try to reduce the volume of calls to call centers. A user researcher might want to know what most people are calling about. Rather than use this information as a web analyst would, a UX team can use this data as UX research.

UX Audit Methodology

The UX Audit article, being a guide, does mention several methods, including:

  • Review of business and user objectives
  • Conversion metrics
  • Customer care data
  • Sales data
  • Traffic/engagement
  • Compliance with UX standards

It suggests using, for example, conversion metrics this way:

Conversion rates or sales figures: If the premise of your site or app is eCommerce, sales or download figures can be useful to a UX audit. For example, here at Justinmind, we measure how many blog readers download our prototyping tool and from which particular posts…

It breaks down an audit into individual steps and mentions 3 goals that should be clarified before getting started: audit goals, time limit, and resources.

There are a lot of resources in this article, including links to Usability.gov, and even a sample UX audit report. There’s definitely a cross-over between these two information sources.

Differences

The article warns that a UX audit can be time-consuming and expensive. For an external team, which they recommend, it states that a UX audit can cost “upwards of $1000 for a couple of days with a one-person team; the full monty of a UX team coming in for four weeks and providing in-depth, goal-orientated insights could cost up to $10,000”. It presents a UX audit as an official stage of a design cycle, and should be completed early on.

The presentation, meanwhile, makes the case that teams can incorporate a variety of user research methods as an ongoing part of their UX activities. Rather than conduct a full-fledged UX audit, for instance, a UX team could schedule one of these methods periodically. The research cost, in time, money and resources, depends on the method and the goals.

Discussion

Quoting a high price tag for a usability study could be a limitation for teams eager to get started on conducing user research. The article mentions that a UX audit is most beneficial at the beginning of a project. Even with everyone knowing that, the high costs might dissuade a team from getting behind the research. What sounds like a boring activity might push them to just start designing.

And it’s a rare opportunity to have the time and resources to publish an official report, like this. There’s a lot of other work to do.

Instead of treating UX audits as a costly, one-time activities, why not use UX audit methods throughout the year?

Conclusion

These two information sources can work together as complements. The article is very informative with specific guidelines. But the presentation shows how to ‘break the rules’ a little, by conducting research on a regular schedule. This allows a team to keep up with their product throughout the year. A custom approach, such as doing repetitive quick hits seems like the best option.

In any case, I recommend taking a look at the UX audit article. It links to many useful usability resources and websites providing analytics data.

World Information Architecture Day 2017, Slides

In a previous post, I mentioned attending World Information Architecture Day 2017, in New York City, and how I connected with a few of the presentations. I also mentioned a decision to put together a post collecting videos and links from other cities.

Since I only speak English, I’ll only include the videos and presentations that are in English. But, presentations took place all over the world and there are presentations in other languages, so do your own search if you are looking for more presentations.

It was a little difficult to find presentations, but I found some from 5 cities. I’ll post more if I find them.


New York, NY USA

Flag for New York City
Flag for New York City

line drawing of a woman in marker on a sticky note
From the presentation activity
 Leading Creative Ideation – World IA Day (NYC) 2017

 

Washington, D.C., USA

Coat of arms for Washington, DC.
Coat of arms for Washington, DC.

Monterey, CA USA

Flag for Monterey, California
Flag of the city of Monterey, California

Also available as an essay on Medium.

Okinawa, Japan

Flag of Okinawa Prefecture
Flag of Okinawa Prefecture,  Japan

Vancouver, BC, Canada

Flag of the city of Vancouver, British Columbia, Canada
Flag of the city of Vancouver, British Columbia, Canada
Older man with brown skin standing by a road
Not an image from the presentation
Empathy is Not Enough – Designing Systems for Emerging Markets

I like this insight: “When we look at our products in North America, trust is generated by institutional cues, like how well a company did the past year, how many awards a product has won, etc. But in others cultures, people’s trust in a system is highly dependant[sic] on already uses it.”

Impressions: World Information Day 2017 and Meetup

Several weeks ago, I attended World Information Architecture Day, held at Bloomberg. In case you’re wondering what World Information Architecture Day is, here is an explanation from their website:

“World Information Architecture Day is a one-day annual celebration hosted by the Information Architecture Institute and held in dozens of locations across the globe.”

It takes place in 58 locations, across 24 countries, on 5 continents on one day. Pretty neat. As it was one day long so there weren’t that many presenters. Two presentations stuck out for me.

Favorite World IA Day Speaker Presentations

The first presentation was about team building and team dynamics. It was called Designing Teams for Emerging Challenges – available on SlideShare.

The speaker had a friendly demeanor and it’s easy to feel an emotional connection to the topic of team dynamics. I felt an easy connection to this presentation. On slide 24, the speaker talked about helping people feel comfortable being themselves. He warned that this is not the same as fitting in. He made the observation that sometimes team members can end up forming little cliques, because people like hanging out with others who are like them.

The other presentation was called Beyond User Research. It promotes using a combination of quantitative and qualitative research to continuously improve a user interface. This presentation got me thinking about the field of User Experience and remembering that it’s not all about making things look pretty. The speaker made a well-observed comment about introverts, which I connected with, too. 🙂

The presentation showed that in order to provide real value, UX designers and architects should regularly incorporate a wide variety of research into their practice. UX architects should be open to using web analytics research, in addition to traditional UX research.

I liked slide 36 because it was easy to see the relationship between the different research techniques in one view. The slide comes from an article from Nielson-Norman Group, called When to Use Which User-Experience Research Methods:

Summary: Modern day UX research methods answer a wide range of questions. To know when to use which user research method, each of 20 methods is mapped across 3 dimensions and over time within a typical product-development process.

Another Speaker Event, Meetup

Meanwhile, I’ve been trying to get out more and attend more Meetups. Shortly after the World IA Day event, I attended a Digital Product Design Meetup for the first time. The speaker for this event gave a presentation called Evolving the Design Game. There is a link to a video of the presentation. (This is video is expertly produced. Very well done.) There is no link to the slides themselves.

I didn’t have the same takeaways with this presentation as I did with the other presentations. However, the presenter did get across that he felt his work was misunderstood and under appreciated, and he felt that was true across the industry.

At one point in the presentation, he asked the audience about their experience with a CEO making a color change request. He said that he did not have a solution to stop that type of behavior.


A dark brown chess piece with a gold crown sitting on top, resembling a queen.

Finding Solutions

At its heart, engineering is about using science to find creative, practical solutions. It is a noble profession. – Queen Elizabeth II (http://Read more at: BrainyQuote)

What popped into my head as a solution to this problem was slide 26 from the Beyond User Research presentation. I was thinking about research, not design.

I’ve observed a growing emphasis on the visual design skill of UX designers, including mandates for specific wireframe software. In contrast, I observe very little emphasis on research methods. My conclusion is that non-UX designers, coming into contact with the field, end up doing the same thing: overemphasizing looks and under-appreciating research.

The solution could be as simple as getting back to basics. A long-term commitment to research, treating every aspect of the work thoughtfully and deliberately, might help designers earn greater respect and appreciation for their work from their clients and co-workers. In an upcoming blog post, I’ll write about using the UX audit as a part of a UX research plan.


Old tube-style TV

Or…maybe the answer is to watch more videos from World IA Day! In an upcoming post, or on my Tumblr, I’ll post videos or links. Or you can search on Twitter at #WIAD17 or #wiad17.

 

William Kentridge: South African Artist

In February, I watched a EuroNews report about a South African artist named William Kentridge, whose work is being shown in Copenhagen, Denmark. Here’s the article video.

Link to the article on EuroNews.com

I was very interested in learning more about the artist after seeing that he uses a combination of video installations, animation, and live action. As seen in clips in the article, he’s also not afraid to explore the difficult history of his country. As MoMA puts it, “Dealing with subjects as sobering as apartheid, colonialism, and totalitarianism, his work is often imbued with dreamy, lyrical undertones or comedic bits of self-deprecation that render his powerful messages both alluring and ambivalent.”

This can be seen in the following video, which is embedded in the text of the article. It’s like a New Orleans marching band, set in a lyrically dystopian world.

When I looked up more about the artist, I was surprised to find that he was not ethnically African, because as the video shows he is using black subjects in the artwork. In my experience, it’s not that common to find an artist using the experience of another ethnicity in their artwork, although it does occur in decorative arts, photography, and performing arts.

I suppose performing artists do this because music, dance, and theater are somewhat universally accessible for all people. Photography is a little different, in that the photographer has to take a documentarian or voyeuristic point of view, as opposed to being part of the art. Wikipedia explains that Kentridge is Jewish, with attorney parents that fought against apartheid. Perhaps he felt like both an outsider, voyeur-documentarian and part of the struggle in South Africa.

What I find revealing is how well Kentridge’s use of African subjects shows his strong empathy and understanding of apartheid and this difficult period of South African history. He says, in Pain & Suffering, shown on art:21, that artists use the pain and suffering of others for their work.

Animation Style

Wikipedia explains one of his animation methods:
“in all of his animated works do the concepts of time and change comprise a major theme. He conveys it through his erasure technique, which contrasts with conventional cel-shaded animation, whose seamlessness de-emphasizes the fact that it is actually a succession of hand-drawn images. This he implements by drawing a key frame, erasing certain areas of it, re-drawing them and thus creating the next frame. He is able in this way to create as many frames as he wants based on the original key frame simply by erasing small sections. Traces of what has been erased are still visible to the viewer; as the films unfold, a sense of fading memory or the passing of time and the traces it leaves behind are portrayed.”

The video above doesn’t show one of this animation style very well, but his style can be seen in other clips. He also uses stop-motion.

Other Work

Aside from animation, he uses live video and different masking and editing effects in his work. Here’s a video of him, from the Danish museum, the Louisiana, interviewing himself:

More Resources

I won’t be in Copenhagen anytime soon. But if you’re interested in learning more about William Kentridge, there are examples of his work online.

Louisiana Museum of Modern Art

Of course, there is the Louisiana Museum that is currently holding a William Kentridge exhibition. It looks like an interesting exhibit. The site is in Danish, but Google should be able to translate.

art:21

art:21 has the most examples of him working and explaining his process. There are several clips of some of his video/media pieces.

MoMA

MoMA has an archival page documenting his 2010 exhibition, Five Themes. Also still available is a flash-site that contains many examples of his work and his process.

Wikipedia

Wikipedia also has plenty of information about Kentridge, from his bio, to listing his films and many exhibitions around the world. There are also external links, if you’re interested even more information about this artist.

Kihachiro Kawamoto: Japanese Animator

I recently watched The Exquisite Short Films of Kihachiro Kawamoto. I had never heard of this animator and I did not know what type of animation I was going to get. But, being a fan of animation, I looked forward to watching the DVD.

After watching a few, I did a little research. It turns out that Kawamoto was a well-known animator in Japan and internationally. One of his signature animation styles is stop-motion animation, especially his use of puppets. As Wikipedia points out, Kawamoto was well known for his puppet making skills and design.

The Films

I wanted to share these films as another example of storytelling. Japan has so many traditional methods of storytelling, which these films are a part of. As far as World and Character go, many Japanese stories are set in the samurai/Edo period. Most of the films below are the same. I suppose that frees up the storyteller to focus on the subtleties of how the story is told, rather than convincing the audience that the world and characters are believable. For instance, in Dojoji, there’s a scene where the woman chases after the priest. I love that Kawamoto takes the time to animate her breathing.

All the Kawamoto films were good, but there were a few that stood out to me. Here they are below:

Dojoji

19 minutes

Dojoji is a well-known Japanese play and one of the few that involves a large prop. The play tells the story of the installation of a new bell in Dojo-ji Temple. After the monks have been hypnotized by a mysterious dancer, the abbot tells the story of what happened to the first bell. The story is a woman falls in love with a priest who stays in her father’s inn every year. When the woman admits her love, the priest rejected her. She pursues him anyway, across a river to Dojoji Temple. In her passion, she transforms into a demon that kills him and destroys the bell. Kawamoto’s version of Dojoji is the story of the woman and the traveling priest. It is very tragic.

Going into the story of Dojoji more, I’d heard of this story after watching a Japanology episode on Kabuki and Noh. Dojoji was one of the examples of Kabuki, which is more elaborate than Noh and features a female dancer.

I was very impressed with the beautiful watercolor backgrounds serving as the backdrop for Dojoji and House of Flame (below). The sets are also well done.

The Demon (or Oni)

7:30 minutes

The Demon is also based on an old story, but I did not come across any versions of it as a play. The story is that an old woman, who has had a hard life, now lives as an invalid with her 2 sons. One day they go out to hunt and come home to a shocking discovery.

The postscript of the story is: “It is said that parents in their old age become demons who will consume their children.” Maybe this is the origin of the practice explored in Ballad of Narayama?

House of Flame

19 minutes

House of Flame is another stop-motion puppet animation that caught my interest. This one animates a horse, very realistically. I was quite impressed. This is also the only story with a narrator for the puppets. The story is about a woman who cannot decide between two suitors and lives in guilt forever more.

As I mentioned above, this one is another example of beautiful backdrops and sets.

A Poet’s Life

19 min

I chose this story for the interesting story about a worker who is fighting for worker’s rights after losing his job. The details of this story are too unusual to give away, but it is a very unique story.

This animation is a drawn style, though it still could be stop motion using paper cutouts. It reminded me more of The Snowman, by Diane Jackson, because of the way the pencil markings jump around frame by frame.

Pixar Storytelling in a Box (cont)

Continuing on from my previous post about my experience with the Khan Academy course, Pixar in a Box: The Art of Storytelling, the next lessons are ‘What if?’ and ‘World and Character’.

Lesson 3: What If?

Video 3 and Activity 3 are all about What if? Coming up with a story scenario, by asking “What if?”, the Pixar story tellers do a great job of putting popular movies into What if statements. For instance, what if our toys were sentient and could come alive? This is Toy Story.

Part A. What would the What if statements be for my favorite films?

  • What if unicorns still existed and could only be seen by a few people?
  • What if a couple accidentally adopted a girl, instead of a boy?
  • What if the King of England lost his mind?
  • What if the new Emperor of China was just a little boy?

The exercise is a little hard with true stories, but I guess they still work.

Part B: Come up with 3-5 What if stories

I have to admit something embarrassing. I created a list of about 30 what ifs about a week before I wrote this – but somehow, I lost them all! So I had to come up with new ones. I needed some inspiration.

Inspiration: Sanjay’s Super Team

For inspiration, I watched a short video called “Sanjay’s Super Team”. One of the Pixar storytellers mentions the movie. “Sanjay’s Super Team’s” What if question is: What if an Indian father could show his son, who loves action figures, what he sees when he’s praying? It is a pretty impressive video and it’s only about 7 minutes long, so no excuses!

My What ifs?

Sanjay’s Super Team did inspire me. I didn’t come up with as many ideas this time around, but here are a few:

  • What if my cats could be real people?
  • What if pets could give their owners advice about life?
  • What if there was a world where your imagination rule everything?
  • What if my lost What if stories came true?
  • What if there was a land of lost and found, where every lost item lived?
  • What if my search to find my lost stories took me on a quest to an imaginary land, where my cats came along as my companions but were turned into humans?

Turns out, I’ve got cats and lost stories on my mind!

Lesson 4: World and Character

Part A: Identify the main characters and worlds in your three movies.

The Last Unicorn

World: Medieval world of magic. Most action is on the road or the woods, and then in a castle.
Main Characters: Unicorn, Magician, Cook, Evil King
Connection: I definitely connected more with the unicorn, but sometimes with the magician.

Anne of Green Gables

World: Small yet idyllic town in the 1800s.
Main Characters: Anne, Marilla, Matthew, Gilbert, Donna
Connection: Definitely connected with Anne!

Madness of King George

World: England, English palaces, late 1700s.
Main Characters: King George, Dr Willis, Equerry
Secondary: Queen, Lady Pembroke, Prime Minister, Lord Chamberlain
Connection: I connected with the equerry, who’s just trying to do the right thing.

Part B: Mix characters and worlds from a different stories

Combining worlds and characters gives pretty interesting results. The first time I did this exercise, I used The Last Emperor instead of the Madness of King George. So I got Unicorn + Forbidden City combinations. The combinations that make the most sense would be Anne of Green Gables + The Last Unicorn. Helping a unicorn find other unicorns would be Anne Shirley’s life’s dream. I could also see the Evil King thriving in the Forbidden City, or the mad King George doing pretty well in the medieval world of magic.
[pic]

Part C: Pick your favorite What if statement. Imagine a possible world and character.

Going back to my favorite What if statement, I guess the last one is the most obvious. A main character would be someone socially anxious who spends a lot of time living in his head. My cats as people would be about 11 years old. One cat would be an energy-filled girl. Not that different from Anne of Green Gables, Pollyanna, or Pippi Longstocking. The other cat would be a girl that’s a little bit overweight. She would have a pleasant demeanor, but also be easily frightened. Both of them, would at times be absentminded and always ready to take naps. But they would be very loyal and supportive.

Final: Storytelling Advice

The final video in this lesson features Pixar storytellers giving advice to new storytellers. The thing that I connected with in this video, is that getting good takes practice. Even if you think you’re not getting better, what you will see over time is a stack of drawings and papers that show your progress. Sometimes what you think are mistakes are not mistakes. They are signs of the search for the right story.

It’s going to take some time for me to think about Part D of Activity 4: What would my world look like? Until then, I’m going to keep thinking about storytelling inspirations, and remember to keep chipping away at it.


I don’t know when the next section in the Khan Academy course will come out. But, in the meantime, I will post more articles about storytelling.

More artwork from Sanjay Patel, the creator of Sanjay’s Superteam, can be found at Ghee Happy. It’s just cool.

Skillshare Course in iOS Design: Visual Design

Introduction

This is the third and final post in my series of posts about a project I completed as part of a Skillshare class on iOS design. This part of the course was about visual design, via a mood board and final mockups.

Mood Board

The instructor showed several inspirational examples of mood boards, including her own example for the class. I will admit at this point that this was the second time I went through the course. The first time was a quick pass to understand the process. In that first run-through, I wanted to take part in the mood board part of the course. I used my experience on another project to create 3 mood boards. You can find those mood boards on Coroflot. (Guess this I’ll make a blog post about that!) I had a lot of information before starting and it was easy to make different visual styles. So I expected that this part of the project would be exciting.

I knew going in that I was inspired by my friend’s wedding program. But I quickly learned that, aside from that, I did not have enough information about the users or client’s goals to differentiate between one mood board and another.

My first set of mood boards included 6 different color combinations! I felt ambiguous about each one. Here’s an early one where I used a lot of blue, and clips from library websites.

Early mood board
An early mood board that I did not go with!

Returning to Personas?

At this point, I thought back to the persona exercise and I decided to revisit this part of the project. I still believe that personas that are never verified with user or market data are useless for objectively informing user workflows and interactions. However, unverified “characters” can be helpful for putting together mood boards. (Although even then it’s good to have input from the client). Initially I had 2 characters in mind, but I ended up with 3:

  • a working-professional commuter
  • a retiree
  • a skateboarding middle-schooler

Here are the mood boards I put together. These were completed in Illustrator:

 

Visual Design

I selected the retiree character’s mood board to develop. I liked the color combinations best. The instructor suggested using a UI kit from Teehan + Lax. (Looks like their site is down, at the moment!) I thought it was a beautiful UI kit that was ugly to use. My CS5 version of Photoshop may have been to blame, but using the UI kit was more difficult than I expected. I also looked for UI kits on other websites, like Behance and Dribbble. There are many of these types of UI kits for iOS online. For example, here’s a list called “Best IOS8 / Apple Watch / UI / GUI Kits 2015 – Free Downloads“, found on jackrabbitmobile.com. Who doesn’t love free?

Anyway, for the Teehan + Lax UI kit, getting layers from one psd to another felt almost impossible. I ended up finding my own components or cutting out elements I’d made in Illustrator for the mood board. I was able to use the phone background and shadow, thankfully. Maybe they intentionally created a difficult to use psd, to encourage designers from using it. Given that I can’t even get to the UI Kit today, that might be the case.

For the work, I used layer comps to create the different states of the app I was recreating. It was helpful when exporting. I could probably use tips on proper layer naming conventions.

Here are the results:

Remember what it looked like before?

Book detail
Book detail

Final thoughts

The last part of the course was a prototyping section. I decided not to participate. Maybe I will take part in the prototype portion of the course, when I create more screens.

Outcome of the app

I like the final outcome of the app. I’m sure I’d get lots of good feedback from team members on small details here and there, if I had been working with others. With a team, it’s possible would have taken on more work, too. I wanted to get this done in about 1 week so I kept it simple.

Using Photoshop

Ha, well…I didn’t like working with Photoshop. That might be due to my working with CS5, but I almost quit and started using Illustrator. I can see now why Sketch has taken off so much. Photoshop is great for image editing, but it seems pretty clunky for visual design. But, I understand why it’s still used – on a team, it’s helpful to get consensus. I like putting my little web projects together straight from Sublime Text, but on those projects I’m the only critic.

Anyway, it was a fun project. I recommend the course and doing a fun, independent project like this to anyone looking for a creative outlet.