fabiochiu/medium-articles huggingface dataset:
Sketch Visual Design Exercise
By: Alexis Frantz
Tags: UI, UX, Design, Ironhack, Sketch

Step by step we are going somewhere. This exercise it’s simple to understand but hard to master: you just have to copy a design and make it the more exact as possible.

The Image

This is the original image that Ironhack has given to us.

Since I had 0 experience with Sketch (except for the previous exercise), I didn’t know what to expect. I thought it was going to be hard as hell but once I started to figure out how to do some things, it went well. It’s been a really good practice, so good that I am already doing it every day, it helps as a warm-up routine.

The Process

It easier to show it than to explain it, right?

The Result

After maybe 3 hours of work that’s what I got:

Except for twitter and facebook icons, everything is made by “hand”. The plane was so hard to build, but I learned a lot.

The Challenge

62 elements, I counted it.

One of the things that surprises me more is how important is to get everything organised.

Just for the sign up page are TONS of different things, having everything well organised with a system is a must.

I am not an expert but I am so happy about how much I am learning. I would have said that doing that was impossible for me without even trying, and now I find myself thinking about when I’ll have free time again to spend on Sketch. Simply love it!
Yes, I will miss her
By: Megha Kalia
Tags: Impression, Thoughts, Sketch, Short Story

She was not beautiful strictly by the norms of beauty. Still there was something very attractive about her which was hard to pin point. I can call it a spark in abstract and pretend that I can tell but that would not be right. Today also, while sitting on the long dining table, she is the one who seems to be the most happy. No it’s not her birthday we are here for, neither she is surrounded by the love of her life, but she is happy; visibly so happy that people from the neighboring tables seem to be more entertained by her than their own companies. She is talking and gossips are spreading like wild fires among all sitting around the table. The dining table has turned into an orchestra and she the conductor. Following her gestures everyone is taking the lead, one by one, to present their side of the story, with pride. There is a music to the laughter that follows each time.

I remember when I first heard of her. She was not there, she had won some award and was travelling to some conference in another continent. All the hear say, built in me some anticipation about her. I was excited to meet her. And finally, there came the day when someone introduced me to her. She was standing in front the lift looking up at the minute digital screen displaying the number of floors one after another. To be honest, I was disappointed. The Sarah in my mind was no where near the Sarah saying hello to me amicably. Sarah in my head was skinny, brunette, firm and taller. She used to speak with conviction by looking straight in my eyes. On the other hand this Sarah was with black hair, her English accent was not “perfect”, she was soft spoken and above all she was always “trying” to be social. But I was happy to be disappointed. I was looking forward to meet her more often. And we did meet many times after that. She was not slender yet a fitness freak. She used to laugh at my being vegetarian without offending me. That was her charm. The most amusing was to see her talk about her dates. The redness of her cheeks was a proof how much she enjoys attention of opposite sex. In her stories the men were crazy about her which I always took with a grain of salt. It was hard for me to imagine her physically more beautiful than this. But am I not already enthralled by her without ever telling what is it that makes me think about her this much. It perhaps is her doing the most mundane with utmost excitement, sprinkled with fragility yet contrasted with the boldness of what she says. She will be gone soon. I will miss her.
Sketch Exercise Kata | Ironhack Lisbon
By: Daniela S. Ferreira
Tags: UX, UI Design, Ironhack, Sketch, Ironhack Prework

Sketch Exercise Kata | Ironhack Lisbon

This third exercise from Ironhack’s Prework was intended to help me get comfortable with the Sketch software and tools.

And it worked! Now I just hope tomorrow I still remember what I learned. I know… it’s just insecurity of whom is entering in a new world. Some people (not only designers) might roll their eyes if they come across this post, but for me, a person with no design background, it was super important to learn the basics and start from the beginning, like a kid with new pencils. Because it was my first time with Sketch. Thanks for this, Ironhack.

How was your first time facing this new tool / How easy/difficult you found it to understand the interface

With the instructions given in the Prework platform and with a little bit of patience it wasn’t hard. Ok, of course I was wrong in some procedures and was blocked a couple of times trying to understand why a certain task was not working (it took me a while to deal with image mask), but I think it’s normal for those who are at “first class”. I forgot several times about the shortcuts, to name the layers and how to set the width and height of several shapes at the same time. But the good thing is that you can always delete and doing it again, because the point is learning by doing. I hope in a couple of Sketch sessions I’m going to be much better and, who knows, a Sketch expert.

How did you feel it compared to other design tools you may know

As illustrator, I know a little bit about Photoshop and InDesign. My knowledge about these is not profound because I’m an illustrator who does almost all the work by hand. But although it was my first time with Sketch, I found it simpler and more intuitive than Photoshop, who has no-ending multiple tool layers. In my perception, Sketch is made for designers not to waste time looking for the right tools: the interface is minimal and in your sight. When I was wrong, I didn’t waste much time realizing where and I always had this problem with Photoshop. Limiting options is crucial not to rambling.

What do you want to learn next

From now on it’s going to be more problematic, with wireframes and prototyping. I’m afraid when my layer list will have a hundred artboards, layers, with different groups and masks, some hidden and others locked. But for now, this exercise gave me the confidence to get to the next challenge, and step by step learning to make with ease beautiful and workable UI design. By other words, I want to learn everything Sketch can give me.
UI Design: Wireframing & Interactive Prototype
By: Amanda Low
Tags: UI, UX, Sketch, Wireframe, Design Thinking

UI Design: Wireframing & Interactive Prototype

During my journey deep-diving into UX and UI Design, I will be documenting my progress throughout the Ironhack UX/UI Design Bootcamp.

Wireframing: BerlKönig

To complete the UI section Prework, it was now the time for creating an interactive prototype. For the purpose of this exercise I chose the Berlin rideshare app BerlKönig. I chose this app because:

Whenever I use this app, which is approximately weekly, it’s usually in a situation where time is of the essence . For example my train hasn’t arrived and I’m late for an appointment, or I’m standing roadside late at night. So usability is quite important .

. For example my train hasn’t arrived and I’m late for an appointment, or I’m standing roadside late at night. So is quite . I’ve am always impressed how user friendly it is, despite having to take a myriad of things into account in order to get you from A to B.

Task Flow: Journey Search

The task required by the user was searching for a rideshare journey in the app, to inform themselves before deciding to book, including:

establishing current location ,

, entering pick-up location

entering drop-off location

receive information regarding pick-up time and price of journey

Lo-Fidelity Wireframe: Drawn

The first step was a lo-fi sketch to show the user flow. Although this is an app I regularly use, because I often use it without much thought, I had to reiterate the user flow for my wireframe a few times so as not to miss any steps.
HOOMAN | Case Study
By: Sara Domingo
Tags: Invision, Design, Case Study, Sketch, Ux Ui

WOOF WOOF GRRRR WOOF teik mi to da street hooman, ai want to plei.

We want to relief the anxiety and nervousness of dogs by spending many hours alone and not meeting their needs.

Hooman was created with the idea of ​​helping all those people with dogs who spend many hours away from home because of his work. It is primarily intended for people who live in cities where it is more difficult to get their dogs to nature or have large houses with gardens to run.

With this app, we want to alleviate the anxiety and nervousness of dogs by spending many hours alone and not meeting their needs.

With Hooman you’ll go from this

Demodog from Stranger Things

to this

We had a main problem where Marc, our User Persona, needs more attention with Ohana (his dog) because he works many hours away from home. So we wanted to create a tool to establish a better bond, commitment and care with your best friend: your dog.

RESEARCH INSIGHTS

People believe that his dog has all the needs covered

“ I want to have a balanced dog, I don’t want him to be anxious”

“A calm dog doesn’t have to be a happy dog”

RESEARCH NUMBERS

52% Dogs are anxious when they are home alone

63% He hasn’t found a solution when his dogs spend many hours alone at home.

+6h On average, dogs spend more than 6 hours alone 5 days a week.

USER PERSONA

We have to empathize with our users in order to offer them a tool that really meets their needs.

“I love being with Ohana and knowing what she needs but I don’t have all the time I would like to”

CONCEPT SKETCHING

Once the features have been established, we carry out a concept sketching to prove that the application really meets the needs of people. This section produces Low-Fi Wireframes.

Concept Sketching

SITEMAP

So that the application has an intuitive, logical and efficient structure, an information architecture is made which, previously, has been developed thanks to the card sorting.

FLOWCHART

Main user flow of the application. The performance of different types of exercises serves to keep a balanced dog, which is the object of our application.

MID-FI WIREFRAMES

After these two processes (UX / IxD) we perform the Mid-Fi Wireframes to make usability tests. We realized that there were features that were not well structured, so they were removed and/or moved to another level of information architecture to make the app natural and easier to use.

Mid-Fi Wireframes

MOODBOARD

STYLE TILES

We focus on the colors present in nature, mainly the warm ones. The typography is rounded so that everything is more friendly and according to the line of the application.

HI-FI WIREFRAMES

As a final result of the process of both UX, IxD and UI are the Hi-Fi Wireframes. Wireframes that have evolved from the concept sketching in pencil to a processing of images and styles by sketch.

Symbols — Sketch

ONBOARDING

HOME + ACHIEVEMENTS

WEEKLY GOALS

TASKS + SHARE

EXERCISES
3 New Trace Features You Need to Know
By: Morpholio Trace
Tags: Drawing, Morpholio Trace, Sketch, iPad, Architecture

Upon your many requests, we’re VERY excited to introduce the following 3 new super features! Plus, check the end of the article for 5 additional updates you might enjoy. Give them a try and don’t forget to share your work on Instagram and tag #MorpholioTrace to be featured.

01. Smart Hatch

See how “Smart Hatch,” is propelling the hatch experience into a new era of digital hand drawing. As an addition to “Smart Fill”, this incredible tool lets users hatch intelligent details, plans, and sections effortlessly. Current hatches available for the initial launch include line and cross hatches, dot hatches, material patterns, and much more.

Hint: You can change the tolerance, color, opacity, scale, or invert your hatch with the settings toolbar!

.

02. Roller Brush

Want to see some true sketch magic? Now you can color entire regions, add shading and much more with a single brush! Just select the “roller brush” icon as your pen to get started.

Trick: To overlay your shadows, change your Paper Blending to “Multiply” in your layer settings.

.

03. Super Ruler

The ruler you love just got super-charged! Turn on your all-new “Super Ruler” to draw effortless straight lines anywhere in your project. In your ruler settings, you can also adjust your angle snap to 15, 30, 45, 90 degrees or select infinity to draw a straight line at any angle!

Tip: To switch between a specific angle snap and infinite angles while you’re sketching, just tap one finger while drawing a line. Remember to turn “Tap Toggle” ON in your Super Ruler Settings.

.

Want more? Here are 5 updates you might love!

Full Resolution Export

From your PDF Manger, select “Save as full resolution PDF” to export at 100% full resolution, including your PDF underlay.

.

Crop Imported Images

Now when you import an image, tap the Crop button to crop it to the perfect area!

.

Zoom Rotation Lock

Want your drawings to stay upright? Toggle “Zoom Rotation Lock” to keep your drawing from rotating when you zoom in and out!

.

Left Hand Mode

Our left-handed users have been asking for this one for years–and now it is here!!! Toggle on “Left Hand Mode” to flip your brush and layer toolbars.

.

Stack Layers

Turn on “Stack Layers” to keep all of your new layers the same size as your base layer.

.

Learn more about Morpholio Trace.

Download Morpholio Trace for your iPad or iPhone.
How to Export Sketch to React
By: Anima App
Tags: Design, Reactjs, Design To Code, Sketch, Sketch To React

How to Export Sketch to React

Overview 👇

Anima is on a mission to help designers and developers collaborate smoothly and deliver products faster, with nothing getting lost in translation.

Anima helps designers to create high-fidelity prototypes right from Sketch, Adobe XD, and Figma. When it comes to developers, Anima helps by converting design to React code, and saves precious time by automating front-end developers’ grunt work.

The end result? A clean component-based code that you simply cannot believe you didn’t write yourself.

Read on to find out just how easy it is to get React from a Sketch design.

How To Export Code ❓

You can Export code in two different ways, either by syncing your design using the Anima Sketch plugin, or simply by importing your Sketch file directly in our web app. One option is geared toward designers and the other toward developers.

Option 1️⃣ — sync your designs from Sketch

Start by syncing your design to Anima:

Get Anima plugin for Sketch

Click Preview in Browser → Sync

Sync your design from Sketch to Anima

Option 2️⃣ — Import Sketch file directly to Anima

On the Anima platform, select import file

Select the Sketch file to import

Select the artboards you want

Click import

Want a step-by-step guide on how to Import Sketch designs to Anima? Learn more here.

Import Sketch files directly into Anima

Pick the component and the React code

In your Anima projects, select the code mode

Select “code mode”

Select the component that you want to get the code for. You will automatically see the code (React/HTML) in the bottom code panel.

Get code for specific design components rather than the whole file

What you get in the code 👩‍💻

We work hard to make sure that the generated code you get is of the best quality. We make sure that the code is developer-friendly, with a clear layout, and with no dependencies. Click here to learn more about Anima’s code quality.

We are continuously improving

Generating developer-friendly code is at the core of Anima’s mission. We work hard to improve the code you get more and more. We love hearing your feedback and encourage you to join the discussion. Follow us on our social media Facebook, Twitter, Instagram, and be part of the movement!

Ready to get started ❓
UX Design Challenge 2: Wireframing
By: Brigitte Ng
Tags: Ironhack, Sketch, Wireframing, UX

My next UX task was to recreate a few wireframes and make a basic prototype from a popular app. At first I was stumped, because it seemed like all the apps I used actually had very boring flows, and all the good ones had already been done! In the end, I decided on an app that I’m trying to use more frequently for saving my cooking inspiration: Evernote.

User Flow

For this task, I began with a basic user flow. This shows the steps that a user would take to create a new image note. I wanted to take a closer look at this task because I’ve actually been adding photos of my meals to the app in order to keep track of what I’ve cooked recently. I wanted to look at how Evernote’s design uses various elements to make the seemingly simple task of adding an image into an intuitive process.

Task flow for Evernote (excuse my handwriting!)

Within this flow, you start on the home page and end up with a new note that contains an image, ready for your annotations and notes. The total flow is seven screens long.

UI Elements

Example of my annotated Evernote screenshots

To make my task easier, I then took my screenshots from Evernote and began making a list of the UI elements on each screen. I did some annotations for each screen using the red text as shown below.

I ended up with the following list:

Input controls:

Text input

Buttons

Icons

Drop down buttons

Navigational controls

Search field

Icons

Evernote includes several other UI elements such as tags, which is a key function of the app, but as these elements were not part of my user flow, I did not include them in my list.

Wireframing

The next step was to start wireframing using Sketch. I broke down the elements on each screenshot into basic lines and shapes. Where icons were not necessary, I simplified by using placeholder images instead. It was a little difficult to find a balance between detail and simplicity, but I’m quite happy with the final wireframes I ended up with.
Instantly Add Photos to Your Sketch Designs with the New Pexels Plugin
Tags: Design Process, Plugins, Design, Plugins For Sketch, Sketch

Instantly Add Photos to Your Sketch Designs with the New Pexels Plugin Pexels Follow Oct 15, 2019 · 2 min read

Every designer knows the struggle of creating image-heavy designs—sourcing, curating, and downloading images for your work is a time suck. Even if you’re sourcing beautiful free imagery from a site like Pexels, you often still have to go through the work of importing those images into your design software of choice.

We’re excited to announce that, for users of Sketch, this process will now feel like a breeze. Sketch has just launched a free Pexels plugin, enabling users to access our library of over a million high quality, totally free stock photos.

The Pexels plugin can do all the heavy lifting of image sourcing for you, with the option to have Pexels randomly select a great image to give new personality to your design. No more time wasted searching for filler images! And of course for those projects where you need specific imagery, you can easily search the Pexels library right inside Sketch to find the content that fulfills your needs.

Don’t just take our word for it — here’s what designer, developer, and Youtuber Jessie Showalter had to say about the Pexels plugin.

You can even use one keyword search to quickly source several different images around the same theme, saving tons of time on projects where a lot of imagery is essential. And of course, for those UIs that require profile avatars, this option is going to be a lifesaver. You can download Pexels photos within Sketch in seconds and add them to your designs with the Data menu or Overrides panel.

Download and install the Pexels plugin for Sketch here.

Want to integrate the Pexels library into your software or app? Get in touch!
To Figma or not to Figma, that is the question…
By: Preyesh Chauhan
Tags: Design, Prototyping, UX Design, Sketch, Figma

My first exposure to prototyping was in 2013 where a client of mine was using Axure to create wireframes and User Interface specs. I was fascinated and it re-ignited my desire to be in the UX field. At that time part Business Analyst, part Information Architect.

These UI specs became increasingly complex as time went on but were very useful for the development teams, as it combined a number of document sources, like business rules and content matrices, into one.

As I continued my extra-curricular pursuit to become a UX designer, I picked up other tools along the way. Sketch and InVision became the way I was able to convey my designs in a more interactive way. Hotspots were amazing!

As time went on it was a battle between the two but in 2018 that I was exposed to something new, something that did not require plugins or additional software to make hi-fidelity prototypes. That all-in-one solution was Figma.

I downloaded and started playing with it immediately. The learning curve was relatively shallow, as the canvas and layout was similar to Sketch. The tools were all there to create pixel-perfect mockups and hidden under the prototype menu were the tools to create the interactions.

When I became a student at General Assembly, London, on their User Experience Design Immersive course, I requested that I could continue using Figma, as they were teaching the class how to use ‘industry-standard’ Sketch.

When we began the group projects, the limitations of Sketch became even more apparent, as there was no way to collaborate on one document at the same time with the team. Figma, however, allows live collaboration and commenting.

Pre-empting the difficulties that the class would face, I asked the tutor if I took the time to teach the class about Figma and conduct a lecture on it. This was accepted with open arms. The confidence I gained from teaching the class was invaluable because it cemented, for me, that I have the confidence to share knowledge with others and answer any question related to that topic.

The full version is at portfolio.
How to create a duotone icons font
By: Abhinav Bakshi
Tags: Design, Sketch, Icons, Duotone, Web Development

Now we’ll import our icon in icomoon app, select it and click on Generate Font

6. Creating icon font in Icomoon App — Part 1

6. Creating icon font in Icomoon App — Part 2

You’ll see a warning in page 2 about multicolor glyphs. This is perfectly normal since what icomoon is doing is creating two icons for bell, one for each path, layering them together and providing a common CSS class to render the icon. Download the font, unzip it and open demo.html file from the directory. You should be able to see the generated icon font used live in your application… How cool is that!

7. Generated Icon font used live in app

Now let’s try applying some theme to the icon. As seen in image below, we have created a duotone icon which is resistant to theming.

8. Icon font with failed theming

To fix this, open the style.css file from same directory

9. Generated icon font’s style.css file with failed theming

Here, you can see color: rgb(216, 216, 216) applied to paths inside icon. These will override any theming applied to icon itself due to CSS specificity hierarchy.

10. Generated icon font’s style.css file with fixed theming

Change that to apply color in line 22 and remove color property from both icon paths. Let’s save this and retry the theming from demo.html

11. Icon font with working theming

…and there you have it. A very basic implementation of duotone themeable icon font. You can take this to the next level by implementing custom CSS properties like Font Awesome has done to allow color theming individual icons by inline styles.
My current Figma vs. Sketch
By: Itay Dreyfus
Tags: Design, Product Design, Sketch, Tools For Design, Figma

Usage & Performance

When I was working on Sketch on a regular basis, it tended to crash a lot and files were gone without having an up to date version.

Figma solved this issue as it works very smooth, fast and doesn’t crash often if any. The biggest bonus is that you don’t need to worry about saving your files as it always keeps your files saved and up to date.

Having said that, I think Sketch is more convenient, more software than an app, as it was built in a traditional way, it feels more like a native app.

xoxo back to you

RTL support

I’m aware of the fact this might not be a top priority for both of the companies, but still, none of them is perfect for RTL usage.

Although Sketch is better with RTL writing, it still has some issues when combining texts and numbers together in the same layer.

As Figma still lacks RTL built-in support, I’m waiting to see if and how they’re going to add it.

Collaboration

No question, collaboration is what made Figma so popular and successful.

Although the new Sketch for teams is an improvement, it’s still not there yet. It increases the price of using the software in that way.

Update: Thanks Daniel Duke for the pricing heads up.

Also, I don’t like the repo method (like Abstract/Github). I get it for code but not for design, it just doesn’t make sense to me. Working simultaneously in the same place is so much easier and efficient.
A list of my most essential Sketch plugins
By: Tom Doidge
Tags: UI, Plugins, Design, Sketch, Workflow

Sketch Runner Pro

Runner pro is like the Alfred for Sketch. You can launch, search, and execute actions with your keyboard. Adding this plugin to Sketch has had a huge impact on my workflow, especially when searching for symbols and adding them onto the artboard.

Comma

Supplied or pasted copy is often not in the right format, Comma adds some really helpful text commands to Sketch which allows you to format text layers quick and easy. It includes simple formatting options like lowercase, uppercase, title case and sentence case, to more complicated commands such as character and word counts.

Zeplin

Zeplin is my goto app for design handoffs, you can find more info about how it fits into my workflow here. This plugin allows you to export your artboards, symbols and styles straight from inside Sketch.

imageoptim

Automatically compress images exported from Sketch? With this plugin you can! When you hit the export button imageoptim seamlessly compresses your images without losing any quality.

Merge Duplicate Symbols

For reasons unknown, Sketch has a habit of duplicate symbols without your knowledge. This plugin scans for any duplicates, then gives you to option to select and merge the various instances. It’s a premium plugin, but it’s well worth it for the headaches it saves.

Symbol Instance Renamer

When you update the name of a symbol it only renames the selected instance. This means the consistency of your symbol naming can quickly slide into disarray. This plugin makes the managing of renaming symbol instances a breeze. It gives you various ways to handle it, but I tend to use the master symbol command which renames all symbol instances on all pages to the name of their master.

Craft

This is an essential plugin if you use Invision. It allows you to sync your artboards and prototypes straight from Sketch. It also has some pretty cool real data import options and allows you to hook into the Invision DSM system.
How to Create a Sketch Style Guide, Library, and UI Kit
By: Miklos Philips
Tags: UX, Design, Style Guides, UX Design, Sketch

Every design project can benefit from a well-thought-out style guide. Use this tutorial to build out a UI kit and simultaneously create a custom (and reusable) library for rapid prototyping.

Whether a Sketch expert or new to Sketch, designers will find that creating style guides in Sketch can be a valuable resource for their design toolbox that can save a lot of time.

A style guide not only helps keep things consistent but also allows updates to elements like colors and icons across multiple documents with a lot less hassle. This tutorial walks through the step-by-step process of creating a style guide and UI kit and will give designers a better understanding of Sketch symbols, referencing a Sketch library for their designs, and confidence in the organization of their design assets.

Creating Your Sketch Style Guide

“A style guide is a comprehensive ‘living document’ that keeps track of all the repeating elements for a project, from branding rules down to the amount of beveling for call-to-action buttons,” according to UXPin.

A style guide can include anything from simple visual elements to vocabulary and approved imagery. This tutorial covers organization, colors, icons, fonts, text styles, and assets.

Step One: Organization

Create a master folder to hold sketch files, plugins, and other necessary assets like fonts and iconography. (Plugins will be discussed at the end of the tutorial.) Start a new Sketch file and name it “Client name Library.” For example, if your client is Toptal then your file should be named “Toptal Library.”

Step Two: Colors

If colors have been already selected, the next step is to convert your colors into symbols.
Challenge 02 : Wireframing. Ironhack UX prework UX/UI March 2020
By: Noum Ben
Tags: Ironhack Prework, Sketch, Invision, UI

Challenge 02 : Wireframing

Wireframing the ARTE.tv app

For this challenge I kept the same app as the exercise 02. I like this app as I use it a lot. It’s a streaming video service from the french/German Tv channel ARTE. It’s proposing interesting documentaries. It’s also promoting young directors and independent programs. And the most important, IT’S FREE !

Screenshots from the 5 screens replica done for UI : exercice 02

Reverse engineering

Disassembling the components of the app :

Input control : Buttons / Drop down button

Buttons / Drop down button Navigation components : Search field / Icons / Image carroussel / Video player / Kebab menu / Alt burger menu

Search field / Icons / Image carroussel / Video player / Kebab menu / Alt burger menu Information components : Containers

Understanding the app structure :

ARTE.Tv navigation is insured by a footer menu to navigate between the main pages and a header menu dedicated to user profil, parameters and an alt burger menu for fast navigation in the categories.

Each page needs a lot of scrolling to navigate in. both footer and header menu disappear when scrolling to release more space for the content.

In each category, it’s also possible to scroll vertically to discover it’s content.

User Flow

We worked on what seems to be the main user scenario for this kind of app. It’s about navigating different sections, looking for something interesting to watch. ARTE.tv is a Netflix like that push user spending more time looking for a program than watching it.

Scrolling the main page trough the featured categories

Having a look on the Tv program

See what’s on Live streaming

Searching from categories or from the search field.

Wireframing

It’s about bringing all the elements to their most simple representation to reveal the structure.

The first iteration of the wireframe was limited by the size of the screen. However the displayed part of a screen is only the emerged part of the iceberg. In this app, a page is actually a long vertical content as the main navigation is based on vertical and horizontal scrolling.
Relationships: Sand, Shells, and Gems
By: Darren Lee Yong
Tags: Sketch, Relationships, Friendship, Poetry

Eyes glistened, footsteps hastened at sight of the beach,

Cupped hands breaking the surface within reach.

Little resistance met through the smooth soft sand,

Scooping up as much with your two bare hands.

Loose grains and small bits fall through the gaps.

Not important nor mattering much, perhaps?

What remains, gorgeous stones and precious seashells in palm.

Greedy, you plan to keep all within that clump.

All these stones and gems so dazzling from the sea.

Not noticing, you let go some while in a state of glee.

A jolt of pain from what seemed like a cut —

Jabbed into your flesh, a sea glass shard.

Hurt yet wanting to keep the beautiful ornament of the shores.

It pains with each passing second, to hold, you’ll only be left upset and with multiple sores.

Letting go of what seemed precious reluctantly along the way,

The load is lighter, the pain is less — you’re gonna be all okay.

You return to make your count,

Expecting disappointment having lost a great amount.

With little in hand compared to the very start,

You’re satisfied with these few precious gems — a happy heart.

Multiple trips made to different shores,

Collecting new treasures, also picking up pieces once lost.

My hefty collection expanded over many Springs and many Falls,

Memories of each, fret not — for I will always, always recall.

My prized bunch through the years,

You stuck through tough times and helped me overcome my greatest fears.

To my closest and dearest of friends,

This is how I know that you are my gems.
Redesigning the DMV experience for the Washington DC government — a UX case study
By: Amanda Thomas
Tags: General Assembly, Service Design, Washington DC, Case Study, Sketch

User Profile Design Process

We started off with a design studio in which we used rapid prototyping to sketch out various concepts and test out their usability.

Wireframing in Sketch

We started with simple wireframes to map out a few user flows including creating a profile, accessing existing user profile, uploading official documents, and messaging a DMV representative.

Prototype Usability Testing

Once our wireframed user flows were ready, we starting testing with users to identify our design flaws before moving to a higher fidelity prototype.

User test with our wireframe user profile feature

As a result of these tests, we learned that our users needed clearer calls to action, more specific language, and more familiar design patterns. We made these improvements in our final prototype which was also fully designed in Sketch.

Interactive Prototype

Next Steps

After this two-week project, here are our final takeaways and suggestions for next steps.

Conduct more user research : While our interviews did provide a multitude of insights, are more concentrated, extensive research initiative would help us to learn more about what is causing inefficiencies and user frustration throughout the DMV processes.

: While our interviews did provide a multitude of insights, are more concentrated, extensive research initiative would help us to learn more about what is causing inefficiencies and user frustration throughout the DMV processes. Explore adding a chatbot: This feature could help users quickly access assistance on DC.gov and relevant resources within the DMV website.

This feature could help users quickly access assistance on DC.gov and relevant resources within the DMV website. More Comparative Research: research specifically how kiosks are working for other DMVs, and look into beginning design and development of these devices in The District.

Photo by Jacob Creswick on Unsplash

DC is a beautiful city with strong ethnic, cultural and economic diversity. If we continue to make the effort to speak to our residents and learn about their pain points, D.C. can help all of its residents prosper.
I’m a Rocket Man
By: Gretchen Young
Tags: Design, Ironhack, Sketch, Ironhack Prework, User Experience

The only experience I’ve had with design software is an application called Procreate, when I used to doodle things for fun. No vectors, and only available on an iPad or iPhone, finger drawings only. So Sketch was a completely new experience for me. Even so, I found it wasn’t too difficult to pick up the basics, and I expect to only get more and more comfortable with the interface.

I had approached Photoshop and Lightroom in the past for some minor photo editing, but with limited experience I felt overwhelmed by all the options, and only learned enough to make a few tweaks until I was happy. With Sketch, the options seem straight-forward and not overwhelming at all. The interface is simple and clean, and I think it’s a great starting point to trying to figure out more complicated software again.

For our first Ironhack prework project in Sketch, I had to design a rocket ship using the shapes available. For my first ever attempt, I think it’s pretty cute:

It only really took a grand total of 5–10 minutes. I can’t wait to see what else I can do when I commit more time to the program.
First contact with Figma
Tags: UI, UX, Sketch, Ui Ux Design, Figma

Trainer asked us to choose one Spanish autonomous communities (since I study in Barcelona, it makes sense no? haha), I chose La Rioja. My flatmate is a wine amateur, also an architect, he always told me how great these wineries are. Also, we have lots of Catalans in our class, of course, Catalonia is for sure my favorite autonomous community, I rather not to be a snob in front of the experts.

The first thing I´ve done is go to their recent website, I have to be honest, I see it pretty well-done. However, my style is always more basic and clean, and that´s why I only used two fonts (Georgia and Abril Fat) with some masks all in greyscale color plus a white background. I found some nice winery photos on Unpslash, and some icons from icons 8.

At first, I put ¨La rioja, more than a winery¨ a bit more transparency to integrate with the image (image above), trainer pointed out it is not clear enough. She preferred it a bit darker, I told her I wish those letters won´t conceal the images since I am a more visual person. I always try to let the images itself tells the story, to be the most outstanding one in my all kind of project. Nevertheless, I do believe what she has changed about my work is pretty rational, because it is not a ¨beautiful photo website¨but a ¨La Rioja tourist website¨giving the right information and clear key points are important.

To sum up the first contact with UX UI practice, it was pleasant, but don´t know that if it´s only me or people without MOUSE also encounter this issue, after 2 hours practicing, my fingers pained a bit haha.
How Welcome Pickups Grew 300% Year Over Year – a UX Case Study
By: Marko Vuletič
Tags: UI, UX, Design, Prototyping, Sketch

The scope of work included User Experience, Interaction Design, and Interface Design.

What would you do if money were no object? I’m sure traveling the world would be somewhere on top of the list. But why do people love traveling so much? Before the agricultural revolution, humans were always moving around. There’s been quite a change of lifestyle since then, but the need to move around is still profoundly rooted in our biological apparatus.

By traveling, we get to learn about different cultures and gain new perspectives, which helps us to better understand the world around us. While travel can bring many benefits, not everything is pleasant.

The most annoying thing for me is getting from the airport to the accommodation of choice, not knowing what bus to take, or which side of the metro to stand. In places where there is no Uber, it’s even harder because I never know if the taxi driver is exploiting me by being a tourist.

Project and role overview

I remember one day looking at Angel List and seeing a product designer job posting from Welcome Pickups. Welcome Pickups strive to provide a relaxed, friendly, and personal travel experience. I fell in love with the product, and I decided to apply for a job which I eventually got.

My goal was to make the booking experience of our pickup service more delightful and frictionless as well as improve conversion rates.

The product has business to business as well as business to customer components. Welcome Pickups is first partnering with taxi and sightseeing companies (B2B), which then provide a service for travelers (B2C) through the platform.

Acquiring the right drivers

Our primary goal was to provide a friendly and straightforward travel experience for our users. That meant it was crucial for us to partner with the proper taxi drivers as they are an entry point of our service. For this reason, we handpicked every driver that applied through our online form. That ensured us to provide a high-end professional service.
Pet Yo — UI/UX Case study
By: Anri Iaganashvili
Tags: UI, UX, Case Study, Sketch, App Design

🐶🐱

Pet Yo — App for those who love pets.

Research 🔎📈

A research conducted by “ACT” has found that 20% of the Tbilisi population owns domestic animals / birds.

The most common pets appear to be dogs (60%). The second most popular were not cats (10%), but parrots (28%).

ACT conducted the online survey. Through random sampling method, 400 adult residents of Tbilisi were interviewed. Statistical error of the data does not exceed 4.9%, interviewing method — face-to-face interviews

There are many groups on facebook, where people join to share their experience about their pets. According facebook we have many pet lover clubs.

-Dogo lover clubs

-Cat lover clubs

-Parrot lover clubs

Problems 🛑

A lot of people wants to get in touch with experienced pet lovers.

To share or see lovely pet’s stuff.

Find the trusted vet’s and food for our lovely friends.

It’s important to feed your pet regularly, so people want to track food/water.

Competitors 📱🔎

People like to share their pet’s stuff, there are main big competitors. Their key problem is geolocation, content is from around the world, user can’t understand who posts, people want to see local pet lovers. Another problem is messy IA. I found that you can add only one pet on “yummy pets”.
UX/UI BOOTCAMP: DESIGN PRACTICE WITH SKETCH
By: Camille Brodin
Tags: Ironhack Prework, Sketch, Design Process, UX Design

The challenge

Get comfortable with the Sketch software and tools by selecting an app of your liking and learn design software by trying to mimic its look-and-feel.

In order to start understanding Sketch the assignment was to copy 5 screens of any app we enjoy. I have chosen “En voiture Simone” an app that I should use every day.

Sketch is a vector drawing application intended for screen design which has become the go-to software for user interface design. There are other software Figma, Adobe XD, and InVision Studio.

Screenshot 1

On the left the original & on the right the mimiced one

Screenshot 2

On the left the original & on the right the mimiced one

Screenshot 3

On the left the original & on the right the mimiced one

Instead of downloading icons from the Noun Project, I tried to redesign them as much as I could. For the one who were too complicated to reproduce I used free icon websites. With regards to typography, I noticed that the typefaces offered by Sketch did not always match the one (used by the company) specifically needed.

Conclusion

I’m a complete beginner with any graphic tool. I’ve found copying a very good exercise. It’s satisfactory even if the result is not perfect. But with more practice, I guess it could be better and faster.

Special thanks to the nounproject and flaticon for some of the icons.

Thanks for reading me !
Where’s that Sketch symbol?. I’m fairly certain that I created an…
By: Alexander Miller
Tags: Sketchapp, Symbols, Image Classification, UX Design, Sketch

“Im fairly certain that I created an icon for Safari in Sketch before, but where on earth is it” (or which sketch file is it in — to be more precise)? 😳

Finding text based documents on your computer has pretty much been solved on a mac you can use finder and search for any word or phrase contained in the document. However when it comes to searching for images thats a bit harder.

For Sketch projects I always use a library preferably shared between myself and other designers via Abstract.

Great but this does not solve my question ‘where is the thing I designed before’, I haven't saved every object I have ever created individually and given it a title in the filename to recognise it by and its unrealistic to do so?

I could create a giant symbol library with everything in it but this is also unrealistic and would probably create more challenges than is solves.

I could find a plugin for sketch that publishes my work to a searchable library — I don't think it exists today ill have to google it.

NB Libraries and libraries Since a library in sketch is a specific thing I need to use a different term to describe my library of all my sketch files and images (sketch symbol finder) — confusion avoidance

My Draft Solution:

It would be two parts, a plugin to sketch that extracts all of the symbols and a copy of the artboard and saves them to a location on the computer or cloud and then tags them by the original project name the symbol name and the date created. There would then need to be an interface to be able to browse all of the items see fig.1

There would be a separate application the ‘Sketch symbol finder’ where you could see you history of what you created. you would be able to search by date project name or main colours used in the image, perhaps even specific hex colour.

As you can see above the screen layout would be similar in layout and function to a photo gallery app tithe a few extra features such as: the artboard would be on the left and the individual symbols on the right (recognition over recall).

You would be able to click on the image and either get a link to the file or the svg code for the image to be able to past into your sketch.

Is this a problem you have experienced? How do you get around this? or is there no good solution to this currently. Please leave comments :-)
Ironhack’s Prework: Design Practice_Exercise 2
By: Ipek Bogatur
Tags: UI, UX, Turkish Airlines, Sketch, Ironhack Prework

Sketch is a design toolkit built to help you create your work — from the earliest ideas, through to final artwork.

Getting to know UI

Another task before we start the bootcamp aims getting familiar with UI Design Software Interface; exposure and attention to detail when analyzing UI and discovering some tricks and aesthetics we can relate to and prefer.

Task

Picking an app that we use consistently or one that we like

Taking screenshots with our phone an importing them to Sketch App Mimicking the UI: pick colors with an eyedropper, etc.

Goal is to copy the design. Try to accomplish a perfect clone of these five screens.

Mimicking Turkish Airlines App

“Turkish Airlines is the national flag carrier airline of Turkey. It operates scheduled services to 304 destinations in Europe, Asia, Africa, and the Americas, making it the largest carrier in the world by number of passenger destinations. Turkish Airlines flies to 122 countries, more than any other airline.

Designed by Imagination’s unique approach to this work was to define an innovative “experience identity” called ‘flow’. Inspired by Turkey’s energy, culture and created to represent the Turkish Airlines’ travel philosophy, flow embodies a customer experience that is effortless, seamless, and uplifting. These values have been applied to all of Turkish Airlines’ touch points, from the new logo to the airline’s Istanbul airport lounge, above the line content and in-flight interiors.

Screenshots