Go Native

Until recently, my role at work has been to design for responsive. Designing native apps was something new (but exciting) to me. So when at the end of 2015, a mobile app designer left the team I decided to raise my hand and take on her work. Little did I know that designing for responsive is very different vs. native apps especially when you throw iOS and Android into the mix.

Late 2015, I participated in a Hackathon. The idea that my team chose (and worked on) was creating an internal LinkedIn, where employees can connect with each other on the go. Although our idea did not win (LinkedIN released lookup at around the same time!) it was chosen as an app to be designed and released to employees this year. As I am one of the UX designers on the employee side and I wanted to work on native apps, I was tasked with designing this app for employees, a task I couldn’t wait to sink my teeth into.

I started by utilizing the work done at the hackathon and researching similar to get a sense of what some possible design combinations may look like. In addition, I had user stories from the product owner that I needed to incorporate so that was a consideration in design.

My first design (wireframes) was iOS focused which meant incorporating the bottom navigation into the app. The design worked well on iOS and received positive feedback from employees that looked and interacted with the app (via a clickable prototype). When designs were presented to the stakeholders however, there was one small detail that was left out; Android.

Android vs. iOS can be quite different. For starters, droid has a physical back button. In addition, droid doesn’t use a bottom navigation element, it tends to rely on a hamburger or top navigation. These surfaced as some of the more common aspects of droid design, ones that I missed because I was iOS focused as I am an iPhone user.

To understand Android vs. iOS and avoid creating two sets of designs, I did some quick desk research by comparing various apps in both devices. In addition, I read blogs about iOS vs. Android and got up to speed on material design. This quick research helped me develop a design that worked for both platforms. The result? I removed the bottom navigation from the app and added a

hamburger instead. In addition, I added the back button for iOS where necessary but made a note to the developer to not add a back button to the app when building for Android. In addition, confirmation/action specific screens had to be designed for both platforms. This design decision enabled the app to truly be platform agnostic, able to be ported to either OS with ease. This design also eliminated the need to have two completely different designs while providing a consistent user experience to iOS and Android users.

My designs (wireframes) enabled developers to get a head start on building the application for both platforms. This head start will also enable gathering of feedback earlier via an alpha version; feedback that will go back into the application in order to improve the user experience. In addition, my design decisions enabled a seamless transition to a visual designer who is currently working on the visual design aspect of the project. Visual design is the last step to creating a rich and engaging user experience and once complete, the application will be ready to go into beta testing.

Button Inspector

My Problem

While working on my project, I spent an inordinate amount of time trying to figure out how to center the search button on my index page which was frustrating. Even more frustrating was the fact that all of my google searches about the problem yielded a frustratingly simple solution, pieces of code like these:

button{
    margin: 0 auto;
}

or

div{
    text-align:center;
}

I tried both of these approaches in my CSS, but for reasons unknown to me my button was still clinging to the left side of my page.

Solution

I finally found the solution to my problem by injecting the style values I wanted for my button into the html rather than through the style sheet with this piece of code:Screen Shot 2016-04-27 at 4.53.36 PM

I am not sure whether injecting styles into your html is a very good practice, because it would make restyling them more complicated in the future, however it did get the button into the middle of the page.

Button Inspector

Trying to figure out why my button wasn’t rendering the way I wanted I checked out the inspector for that element on the page:

Screen Shot 2016-04-27 at 4.26.21 PM

For whatever reason, I seem to have a lot of styles still remaining from the User Agent Stylesheet [default browser settings], I’m not sure if that means normalize isn’t functioning correctly or if I just need to override those settings. Looking at other websites, however, it seems that most sites leave very few of these default styles in. For example a button from J. Crew’s website:

Screen Shot 2016-04-27 at 4.24.49 PM

Here the only thing left from the User Agent Stylesheet is the cursor, and seem to be working off of only 2 style sheets. I also checked the hamburger button on Google’s Material Design Guidelines site and found that they were working from 11 different stylesheets as well as the User Agent Stylesheet [makes sense as they design Chrome]. This was very overwhelming and I couldn’t really make sense of it. I would definitely check out the website though because it is the basis for a lot of Android design and also pretty.

Google Material Design

 

Class 8: Show and Tell!

Add a comment with the link to your project in Cloud 9. It should look like this, but with your name and username:

https://final-project-lara-laras126.c9users.io/index.html.

Final projects due Monday at 11:59 PM

Email me (lara@notlaura.com) a zipped folder of your site’s code, and the Cloud9 link (see above).

To upload your project to Cloud9:

  1. Create an account at http://c9.io
  2. Create a new workspace, name it “final-project-yourname”, and make the description whatever you like
  3. Select HTML5 for the template
  4. Select your project files in Finder and drag them into the project folder in Cloud9
  5. Open index.html and select Run (the green arrow above the tab)
  6. Copy the URL that shows in the window at the bottom of the screen (the way it is formatted above)

Demos from evening class

Centering a button on top of an image:

Google Font Pairing

With around 650 different typefaces, google font is known to be one of the most popular web font used. It is open source and easily available online. When I was researching how to use google fonts on my projects, I realized it is really hard to browse through specific styles to determine what sort of typeface I could use. It is also really hard for me to find match multiple fonts on the webpage as the search process on the google is not that visual. Coming from a graphic design background, I have a strong interest and preference on fonts as I believe that they could change the look and personality of the whole page.

I came across Aesop Fables. This project offers inspiration of font pairing so that users can see how other designers utilize this diverse font database. It is fun and inspiring to see how other users utilize these fonts and typeset them to different contents. Each design has a completely different feel and this project makes it much easier for users to visualize these typefaces. 

Here is the link to Aesop Fables: https://femmebot.github.io/google-type/

Here is an example of the fun font pairing! It is interactive too when you browse on the website !
Screen Shot 2016-04-27 at 2.19.23 PM

Blog post: Give me a

So I wanted to title this blog post, “Give me a <br>” but WordPress would not accept the arrows in the title bar. So should I blog about that? How am I going to interest you in anything I have to say as we all strive to create beautiful code?

Aha moments

We Google, find a piece of code to try in hopes it does what we want it to do and aha! It works! We smile – phew!

This has been my experience with coding in general. There is always this little thing that isn’t quite the way I would like it and I find myself watching time pass as I hunt and search and go down rabbit hole after rabbit hole until I find the solution. Cmd-Z, Cmd-Shift Z, Cmd-S, and Cmd-R have become regular keystrokes as part of the process.

The HTML entity

At least an hour went by as I inserted a background image into my final project page and figured out how to make it NOT repeat, but I did not like how the black and white image made reading the content difficult. I was able to change the opacity for the body content, but not the image. I gave up. Cmd-Z.

Then I thought about trying to put an image inline with the headline (like a favicon) and could not figure it out. Hmm. Frustrated and not frustrated at the same time, I had to do something to ease my creative challenge. I googled “HTML for dog symbol” and there it was! Another solution! Not the one I was looking for, but I clicked on fileformat.info and discovered a dog emoji with an HTML entity code! I entered it into Sublime Text, Cmd-S, Cmd-R in Firefox, and aha! It worked! Let the happy dance commence.

Code injections

For my personal site, 2Dog Design (shameless plug), I use Squarespace. I love helping friends who also use Squarespace for their sites, but find there are limitations within the templates – and sometimes you have to cross your fingers and do a code injection and hope you don’t break the site. The experience is exactly the same: hunt, rabbit hole, solution, aha!

Down the rabbit hole I go

So as I learn more about HTML, click through web inspectors, review source code, and dive deeper into CSS, I have come to realize that there is so much to learn, so much to discover, and a lot of trial and error.

If someone were to ask me, “do you code?,” I will probably hesitate for a moment and smile as I recall the journey. I think I can honestly say, “I know enough to be dangerous… but isn’t it beautiful?” 🐰

Class 5: Programming…ugh.

Discuss

  • Any links from the week?
  • Requests for demos

Work time

For the first half of class, we will work through the checklist for the profile page project (due tomorrow). Feel free to request any demos or clarification on any concepts.

Programming

  • It’s a very different beast from HTML and CSS
  • A small metaphor
  • Using JavaScript in the console
  • Libraries, plugins, and open source

Homework

Email me a zipped file of you profile page by noon 4/7. You should have everything in this checklist accomplished.

Final Project

Write a paragraph about the functionality and interactions in your web app. You should have content for the following screens:

(coming soon…)

Profile Page Checklist

Checklist for Profile Page Grading

Examples of the files we worked on in class are available either from a class email or linked to within a class blog post.

You should name the folder “firstname-profile-page”. Compress the folder as a .zip (right click on Mac, select “Compress”) and email to lara@notlaura.com by noon on April 7.

HTML to be used:

  • img
  • ul with lis
  • ol with lis (more about lists here)
  • h1
  • h2
  • A .wrapper class for responsive layout
  • section
  • Link to other HTML page
  • At least two classes for differentiating elements
  • An embed e.g. Wufoo contact form, Google map, or Youtube video

CSS:

  • The image does not overflow on a small screen
  • Two column, responsive layout (one columnn on phones)
  • At least one media query (to change the one column to two columns)
  • A border
  • A clearfix (.cf)
  • Link styles

Other:

  • normalize.css
  • A webfont
  • Responsive meta tag
  • Two HTML pages e.g. contact.html
  • If your code formatting is messy I will send it back for you to fix and resubmit. Refer to the files from previous classes for examples of proper HTML and CSS formatting.

Bonus:

  • animate.css
  • Three column layout
  • Rounded corners
  • A footer separate from the .wrapper
  • A grid of images

Class 4: Responsive Design

Here are the completed files from this class.

Discuss

  • Look at links from the week

Lecture: Responsive Design

  • Solutions for mobile websites (link)
  • What is RWD and why do we have it?
  • Mobile First (silly metaphor)
  • Discuss performance

Demo: Breakpoints

  • Changing the background color with a breakpoint
  • Changing the layout on our profile page
  • Enhancing the design with mobile first

Demo: Adding new pages

  • Review stylesheet organization
  • Create a “Contact” page
  • Embedding things
    • Wufoo contact form
    • Google Map
    • Youtube Video

Homework

Coding

  • Email me a zip (lara@notlaura.com) of all of your profile page files by 12pm on April 7 (we can discuss questions the day before)
  • See this file for a checklist of what must be in your code Coming soon.
  • Double check your code formatting

Tutorials

  • jQuery – note: this is very different compared to what we have done in class so far. Never fear! Remember, the point of the tutorials is to familiarize you with a few terms will cover next class.

Misc

  • Get into the habit of resizing your browser window when you visit a website. Keep an eye out for breakpoints and spot them inside the Inspector.