If clean and maintainable code is at the heart of a great product, an intuitive and seamless user experience and user interface (UX / UI) is the soul. In order to have great UX, technical considerations must go into design. In order to express great UI, development teams must give as much attention to their front-end code as they do to their system architecting. Continue reading “A guide to our design process”
Why would anyone care about a barebones wireframe? Because basic layouts can help you demonstrate your competency to potential clients. Oursky’s working relationship with a client begins with understanding the problem they want to work and developing a user story. We share our early designs in the conversation to demonstrate our working style before they make their decision. This small investment builds trust with potential clients, helps secure contracts, and begins great working relationships.
The best part is, everyone can create a wireframe. Continue reading “Why Wireframes Win Over Clients”
In addition to our reputation for clean and sturdy code, Oursky is known for our thorough design process that produces products such as Cococolor and Artstack. In this post, we’re annotating our internal web design guideline document for you to use.
We’ve refined this process of the years and going on our ‘don’t repeat yourself’ rule, we’d love to share our process transparently with you. These web design best practices are applicable for client and in-house products. Below, we’ll show you the web design for Skygear‘s sign up web portal (try our BaaS for free!). to show you how we do things in-house.
Where do you start for visual identity? So much meaning is crammed into a name, logo, and 16 x 16 icon. If you want a quick review of some design principles, check this article on effective logo design. Today’s post is a transparent sharing piece on how we developed the toaster logo for an Oursky in-house product, MakeAppIcon.
The first iteration of MakeAppIcon (MAI) was a simple web app that helps users make icons for various platforms. We were sick of resizing, so we created an app that would help us do that. We don’t get too hung up on names, so we just used something people could remember. People remember smart and short, or descriptive and obvious. We went with the latter, and with the name decided, we moved on to visual identity. Continue reading “5 Logo & Icon Tips for Visual Identity (With a Product Case)”
I went from a part-time designer in a local Hong Kong tech company to one of its partners. Before I joined full-time, I taught myself CSS when I worked as a web designer for a number of agencies and clients. Since joining this company 6 years ago, I’ve been involved with 50+ projects (including in-house ones), including Apple’s Best New App 2016.
As our development team grew, I couldn’t just pass my Sketch design files with “a common understanding” to our senior developers, so I wrote this CSS checklist for the company. I’ve added additional notes on the concepts behind the checklist items. Continue reading “5 Front-End Design Essentials for Developers”
Wireframing is a vital tool in the app or website development process. It allows you to map out where the most important elements on the page should be, it simplifies communication between you and your client or development team, and it helps the designer spot potential issues in the structure or flow of your site.
These days, tools like Balsamiq® Mockups and Axure RP make it easy to continue the process from wireframe to interactive prototype without writing any code. However, knowing the basics of paper-based or whiteboard wireframing is an essential skill for the workplace. The following are 8 essential tips to remember when wireframing.
Have you ever dreamed about random strangers showing up your storefront and walking away a happy customer? In the digital world, that’s called your website. Just like a well-designed store that’s a pleasure to browse through, there can be well-designed websites that are effortless to navigate.
The key to a good site begins with a good wireframe.
Wireframing is a process that helps to design a site that communicates clearly to the audience and gets them to convert to our product. Simply put, an effective wireframe is a design and roadmap to help build a great site. Today, we’re excited to share our wireframing tools with you and get you started! Continue reading “Starting Guide to Wireframe Design – 7 Steps & 3 Tools”
In 2013, not one, but two tech companies took the leap into data-driven political dramas. Only, Amazon’s got an IMDb got a 7.6 rating, and Netflix’s creation got a 9.0. Both are well-funded companies, familiar with techniques such as iterative processes, collecting user feedback, and specialized data analysis. The difference lies in their treatment of data.
In this post, we’ll be comparing the difference between data-driven and data-informed product design.
Y Combinator’s How to Start a Startup stressed two important things that every entrepreneur and early-stage startup needs to focus on: 1) building your product and 2) talking to your users. For the latter, they even got Twitch’s founder Emmett Shear to talk about How to Run a User Interview and his past experience of starting a business without running user interviews (versus running user interviews for Twitch) in a video lecture.