Design on Victor42

A funny story about AI implementation

hi@victor42.work (Victor42) — Fri, 03 Apr 2026 09:42:00 +0000

The company churns out a ton of fixed-template images daily: course covers, promo banners, printed signs, desk nameplates, arm stickers, you name it. It mostly boils down to swapping out text and picking a background from a preset pool based on the category.

Having designers do this manually is a pipe dream. The ops team doesn’t know Photoshop and refuses to learn. Outsourcing it costs 20 RMB a pop.

My day job is UI design, but this chore somehow became my gig. I built a personal project that bridges Excel and Photoshop. Ops fills out a spreadsheet, designers maintain the PSD templates, and my script automatically maps the data into the templates, spitting out images in bulk. Over the past two years, it has generated roughly 150k RMB worth of design assets—enough to hire a few interns just to do the manual labor.

https://github.com/greenzorro/excel-ps-batch-export

This Python script isn’t tailor-made for the company; it’s highly versatile. Whatever PSD template you build, my script generates the matching Excel sheet. Ops fills it in, hands it back, and boom—instant image batch.

Recently, the big boss started waving the AI flag, aggressively pushing AI adoption to “cut costs and boost efficiency.” He eyed my batch-export setup and decided to make it the flagship AI demo to set the standard for the whole company.

In terms of cutting costs and boosting efficiency, my project is already doing exactly that. There’s nothing left to push. The catch? It’s not AI. It’s just a hardcoded script.

That’s a dealbreaker. Without AI, it won’t pass the boss’s vibe check. Traditional code is seen as an outdated productive force. It needs that “AI flavor”—an overwhelming, undeniable AI aesthetic.

On the flip side, since the script runs locally on my machine, the whole process bottlenecks at me. And honestly, what boss doesn’t dream of “distilling” their employees into modular digital skills?

No problem. Distill away. Deploying it to the cloud solves that. Technically, they’re appropriating my personal IP for free, but since I don’t mind (and it’s open-source anyway), whatever.

Deploying it on the company server and slapping a GUI on it would make it a complete product. Give the ops team a quick tutorial, and it’s undeniably a step up from running it locally.

But alas, still no AI. Too primitive. Middle management vetoed it. If it’s not AI, we have to dress it up as AI. The final master plan? Spin up an AI bot on the server, give it a DingTalk account, and drop it into the ops group chat. Now, ops just @s the bot every day to generate images—exactly how they used to @ me.

Perfect! Just like that, a piece of my soul has been digitized, permanently enshrined in the corporate mainframe. Honestly, if we swapped the bot’s name and avatar to mine, it would probably be even more intimidating to the boss.

The only hiccup is that a zero-cost operation is now burning through LLM tokens daily.

But on second thought, the boss probably sees this as a massive win. Finally, someone in the company is burning tokens and actually producing tangible results! The dawn of his grand AI empire is here. Sound the charge! Who cares about unit economics? In the name of AI, cost is but an illusion.

My takeaway? AI isn’t a bubble. The doomers can rest easy. Setting aside how many real-world problems it actually solves, its mere existence is a spiritual balm, offering astronomical emotional value. It’s the new tech-bro Hermès. Between economic value and emotional value, it guarantees at least one. What a magical industry!

So yeah, the corporate grind is actually pretty entertaining. If the ship is going crazy, you might as well grab an oar and enjoy the ride. At the end of the day, having fun is all that matters~

UI Canvas Size Calculator

hi@victor42.work (Victor42) — Tue, 10 Jun 2025 17:27:00 +0000

“When designing a UI for this screen, how big should I make my canvas?”

Background

After my wife switched from UI to industrial design, she started running into all sorts of weird screen sizes. With her UI background, she was also tasked with designing interfaces for various industrial control machines. These screens often left her stumped, with no idea how large to make her design canvas.

This is a common headache. Many UI designers don’t fully grasp the technical principles of screen displays. The problem became more widespread with the advent of Retina displays and their “pixel density” concept, leaving many designers guessing about the correct canvas dimensions.

This isn’t an issue for common devices, as design tools like Figma and Sketch provide presets. But in niche areas like industrial design, smart homes, and IoT, you’ll find a bewildering array of screen sizes. UI designers used to standard web and mobile projects are often stumped when they encounter these custom displays.

Fortunately, there’s a method to the madness. The key is PPI (Pixels Per Inch), which acts as a bridge between physical dimensions and the pixel grid. You might also hear it called “pixel density”—a fitting term. Higher density means less pixelation and a sharper image.

Plenty of articles dive deep into the technical details. But honestly, a UI designer shouldn’t need a degree in display engineering to do their job. In today’s specialized world, an artist doesn’t need to know how their canvas is woven.

So, what designers really need isn’t a textbook, but a simple calculator. Input the screen specs, get the right canvas size. Simple.

The Calculation

To build this simple tool, I had to break down the math. The calculator needs a few inputs from the user:

Pixel width of the screen
Pixel height of the screen
Diagonal screen size in inches
Typical viewing distance (e.g., Touch, Desktop, TV)
Preferred design scale (based on common widths like 375px for @1x, 750px for @2x, etc.)

With the pixel width and height, we use the Pythagorean theorem to find the diagonal pixel count. Divide that by the screen’s diagonal inch measurement, and you get the PPI.

PPI = Diagonal pixels / Screen size = √(Pixel width^2 + Pixel height^2) / Screen size

Next, we estimate the screen’s density multiplier (@1x, @2x, etc.). This is done by dividing the PPI by a constant that varies with viewing distance. While real-world multipliers can be fractional, design conventions round them to the nearest integer. It’s the standard way to handle screen fragmentation.

Screen Multiplier = PPI / Divisor

The magic numbers are: 150 for close-up (touch) screens, 110 for mid-range (desktops), and 40 for far-away (TVs).

Where did these numbers come from? I reverse-engineered them by analyzing data from a wide range of devices. I noticed that for most touchscreens, if you divide their PPI by their native scale factor, the result hovers around 150. The same pattern emerged for mid-range and far-range screens, with values around 110 and 40.

You’ve probably not seen a chart like this often. It’s a box plot, and it’s great for showing the distribution of data. You can’t whip this up in Excel; I had to use Python to generate it.

If you’ve ever looked at stock charts, this might look familiar, like a candlestick chart. The concept is similar, with four key points:

Top of the thin line: Maximum value (highest price)
Bottom of the thin line: Minimum value (lowest price)
Top of the thick box: Third quartile (opening/closing price)
Bottom of the thick box: First quartile (closing/opening price)

The box plot has one extra feature: a line inside the box representing the median. I used the median value for each category as my divisor.

A quick stats refresher: the median is the middle value in a sorted dataset. The first and third quartiles are the medians of the lower and upper halves of the data.

Why use the median instead of the average? The long “whiskers” on the plot show that there are outliers that would skew the average. The median gives a better sense of the central tendency, which is what we need to represent a typical device.

Okay, back to the formula:

Screen Multiplier = PPI / Divisor

So, we have the PPI and the right divisor. This gives us the screen’s scale multiplier, which is the key piece of the puzzle. The final step is to account for the designer’s workflow. Some prefer designing at @1x (common in Figma/Sketch), while others work at @2x or @3x (a holdover from Photoshop-centric days).

We take the screen’s native resolution, divide by its scale multiplier to get the logical resolution (@1x). Then we multiply that by the designer’s preferred scale factor (@1x, @2x, or @3x) to get the final canvas dimensions.

Canvas Width = (Screen Pixel Width / Screen Multiplier) × Design Canvas Multiplier Canvas Height = (Screen Pixel Height / Screen Multiplier) × Design Canvas Multiplier

This also helps answer two related questions: what scale should assets be exported at, and what font sizes are appropriate?

Asset Export Scale = Screen Multiplier / Design Canvas Multiplier

For example, if the target screen is @2x and you design on a @1x canvas, you’ll need to export @2x assets. If you design on a @2x canvas, you’ll export @1x assets.

There’s one catch: your design scale can’t be higher than the target screen’s scale. It makes no sense to design at @3x for a @2x screen. In that case, you should just match the screen’s scale.

Font sizes scale directly with your design canvas. A 12px font on a @1x canvas becomes 24px on a @2x canvas. The same rule applies: don’t use a design scale larger than the target screen’s scale.

Is your head spinning from all the math? That’s exactly why I built this tool. Designers shouldn’t have to waste time on this stuff. A simple calculator can save everyone hours of headache.

I first built a proof-of-concept in Excel to validate my formulas. But it was clunky and not something I could share widely. So I decided to turn it into a proper web app. Since I’d already specced out the logic in detail, I figured I could hand it off to an AI to code. It should be a piece of cake, right?

Next, it was the AI’s turn to do the work. Using the logic and context above, I gave the AI the following prompt to generate a web tool:

The Task

Product name: “UI Canvas Size Calculator”.
Make it responsive for desktop and mobile.
Use vanilla HTML, CSS, and JS. No backend, no heavy frameworks.
Keep CSS and JS in separate files for maintainability.
Write modular JS with constants defined at the top.
Include robust form validation with helpful error messages and placeholder examples in the input fields.
The results should show: Canvas Width, Canvas Height, Asset Export Scale, and Suggested Font Size (e.g., 12px for @1x, 24px for @2x, etc.).
Display the results visually. Instead of just text, draw a simple diagram of a screen and label it with the calculated dimensions.
Add a light/dark mode toggle, defaulting to light.
Use #2A9D8F for the primary brand color.

The Result

And what do you know, it nailed it on the first try!

Well, almost. It ignored my request for vanilla JS and went with a full-blown Next.js, TypeScript, and Tailwind CSS stack. As a front-end dinosaur who started in the IE6 days, that stack was a bit intimidating.

I didn’t even know how to run it locally at first. But a few questions to the AI got me up to speed. I ended up getting a crash course in modern web development, and deployment turned out to be surprisingly easy.

And just like that, the app was live: https://ui-size.victor42.work/

It seems like a great new workflow for simple tools: write the blog post first, and the post itself becomes the spec for building the tool.

As a final check, I had the AI plug the screen data I’d collected into the new tool. The results were spot-on, especially for touch and desktop devices. The only place it stumbled was with large TVs and monitors, as many of them use a non-integer scale factor like 1.5x, which my simple model doesn’t account for.

But for its main purpose—calculating sizes for niche industrial design screens—it works like a charm.

Turning Photoshop into a Machine Gun with Excel

hi@victor42.work (Victor42) — Thu, 13 Jun 2024 14:05:00 +0000

I heard Marketing was tearing their hair out. The boss greenlit the new course cover design, and now they needed to update all 800+ existing covers. It wasn’t a simple find-and-replace; there were tons of small differences. Marketing has only one designer, and they were slammed. Doing it in-house? No way. Outsourcing would cost 20 RMB per image, totaling 16,000 RMB – a budget buster.

Bingo! 16,000 RMB? My ears perked up. I love automation. A data geek who knows Photoshop? This was my moment. People talk about the “value of design.” But what is your value? How do you put a number on it? Saving the company a designer’s monthly salary in half a day? That’s real value. Plus, it’d be great for my year-end review. I jumped on the task.

The Challenge

This is the template the marketing designer created. No use criticizing – the boss wanted this style. Simple. The basic need was also simple: replace three text areas and generate 800+ images.

Most designers would think, “Piece of cake! Define some variables in Photoshop, create an Excel sheet, and batch export.”

If you don’t know how to batch output with Excel and Photoshop, check out this tutorial: https://zhuanlan.zhihu.com/p/33725280

Yeah… that’s the gist. If it were that easy, you could just follow the tutorial, and this article would be done.

But, once I saw the template, I realized it was much trickier. The variations were crazy:

Over a dozen course categories, some with unique backgrounds, others sharing.
The top category wasn’t always text. Two (Taobao and Tmall) used logos – images.
Course titles: one or two lines. Single-line titles needed vertical centering.
Text color changed with the background – a tinted shade, not pure black.
The bottom description text wasn’t always there. If missing, its decorative box had to go too.
The box’s line color also changed, matching the text but brighter.

Think. Could you handle this with Photoshop variables? Sure, you could make a dozen PSDs. But I wanted just one.

Yes, it was possible.

But it needed a designer who was also an Excel expert.

Designing the Excel Data Model

The complexity meant I needed to think about the data model first.

Programmers might laugh. “Data model? For a simple image?”

Don’t @ me! I’m just using the idea. Look, if you just want to finish, anything goes. But for top efficiency, you need a data model mindset. What’s that? The operations team fills in the least info, and I do the least work per export. This was ongoing, so I needed low marginal costs. The initial setup could be complex; that cost was less important.

So, what columns did we need?

Course Category
Course Title
Description
Background Image

Obvious ones. Adding the variations, the real list was:

Filename: Controls the output filename, arranged logically.
categories: The dozen-ish categories, shown at the top, determining the template.
Title Line 1: Titles can be one or two lines, split for manual line breaks.
Title Line 2: Optional; if blank, it’s a single-line title.
Description: The optional keywords, determining if the box below is shown.
Taobao: Yes/no, toggles the Taobao logo, based on Category.
Tmall: Yes/no, toggles the Tmall logo, based on Category.
Single Line: Yes/no, controls the single-line title layer, based on Title Line 2.
Two Lines: Yes/no, controls Title Line 1 and 2 layers, based on Title Line 2.
Has Description: Yes/no, controls the description box, based on Description.
Background Image: Path for the background image.
Foreground Color: Path for the color image, used for title text color.

Explanation: I had three title layers. One for single-line, two for two-line titles.

Giving this to operations would be brutal. Most could be calculated. Operations only needed: Category, Title Line 1, Title Line 2, and Description. I made an online spreadsheet with just those four and sent it out. We had 5-6 people working, each taking categories. They finished fast.

The hard part was mine: calculating the rest, all needed for Photoshop. None could be skipped. Category was key. It determined the logos, background, text color, and filename sorting. So, I made a separate Category table, a dimension table, where each category was like a product. The image content table was the fact table, like an order. Category name was the dimension table’s primary key, a foreign key in the fact table, pulling in category info. One fact table (CSV) and one dimension table – a simple star schema, or maybe “Earth-Moon schema”?

These concepts are from data modeling and databases. Simply, it’s defining attributes on Category. Anything in a category would auto-read the background, color, etc., based on the name. This matched the requirements.

All the operations data (4 columns) was now in my Excel. I referenced it, added the calculated columns, and formed a complete table. I updated, saved as CSV, and gave it to Photoshop.

These calculated columns tested my Excel skills:

vlookup was crucial for looking up category attributes.
Filenames needed text concatenation. I could combine them freely, deciding the output order.
I used string replacement to remove spaces in titles, ensuring centering even with accidental spaces.
IF checked for empty values, preventing 0 on empty rows.

These are easy for Excel users, so I won’t detail them.

Merging Tables with Power Query

But, two questions remained:

How did operations’ data get into my Excel?
How do I update it?

First: The online spreadsheet let people work independently and update in real-time. My table was local because I needed Excel’s Power Query for merging, which most online spreadsheets lack.

For each batch, I downloaded the online spreadsheet (Course Cover Content Collection.xlsx) to the same directory as my table (Course Cover Content.xlsx). The data link would stay as long as the location didn’t change.

I used Power Query from the “Data” menu. Think of it as a visual SQL. It reads data from local tables, web pages, databases, and Azure, and cleans, transforms, and aggregates it. I used its local table reading.

The Power Query interface is both familiar and strange to basic Excel users. Familiar: “Tables!” Strange: “What’s all this?”

Understanding Power Query: It does three things:

Specifies the data source.
Sets rules and conditions.
Executes and loads data, one request per sheet.

Step two is crucial. The left list is a series of requests, executed in order.

Each needs “Use First Row as Headers” and removal of empty values.

It’s not just filtering and sorting. I used its table merging. Operations’ data was scattered. I couldn’t copy-paste, right? I queried each sheet, then created an append request, combining tables with the same format, like SQL’s CROSS JOIN.

Its merge query is also useful, like SQL’s JOIN and LEFT JOIN.

“Close” (actually save) made a bunch of sheets appear. I deleted unneeded ones. I added a sequence number for filename sorting.

All operations data was now in.

Second question: updating?

New batch? Download, overwrite, open the data table, “Data” menu, “Refresh.” Simple.

Why compare to SQL? It records query conditions, not results. Results are shown, but it’s a preview. It records requests and re-queries on “Refresh.”

After complex initial setup, the pipeline was set. Use was simple: download, overwrite, refresh, save as CSV – Photoshop’s data file.

Batch Image Generation in Photoshop

Photoshop had five steps:

Organize/rename layers.
Define variables.
Import data.
Batch export PSDs.
Batch convert to JPGs.

1. Organize and Rename Layers

Not hard. Merge, reorder. Name layers according to table headers for easier variable definition.

“Filename” is special; it’s not visible. I created it manually. Style doesn’t matter. Hide it.

“Foreground Color” needed special handling. Variables can’t directly change text color. For background-based changes: group the text, create a solid color layer, and use a clipping mask. This gives unified control.

The box’s line color? Related to text, but not the same. Add a Hue/Saturation layer for the lines, increasing saturation and brightness. Brown becomes orange, dark green becomes grass green… This needs color theory and Photoshop knowledge.

2. Define Variables for Layers

No step-by-step; the linked tutorial covers it. I’ll discuss tricky points.

Common use: “Text Replacement.” Non-text layers become “Pixel Replacement” – image change. Background is replaced this way.

Foreground color is similar. Prepare color images, define the clipping mask as a variable, select based on category.

Visibility variables are useful. TRUE/FALSE control display. Can be used with text/pixel replacement. Description text: text replacement changes content, visibility controls display.

These first two steps, though tedious, are one-time.

3. Import Data Sets

Import the CSV.

Two common errors: extra/mismatched columns, and empty cells. Photoshop doesn’t support empty cells, so I used NULL, with visibility checks.

4. Batch Export PSDs

No trick; do it like this.

Define filename format. “Data Set Name” is useful; it’s the first column, “Filename,” allowing customization.

5. Batch PSD to JPG Conversion

PSDs need conversion.

Record a simple action: open, save as JPG, close. Batch process the PSD folder.

My action set has “Save as JPG”; link at the end.

One More Table

Done? Task complete, but not the matter. One crucial table is missing.

These 800+ images (16,000 RMB) are just the first batch. More will come. Shouldn’t I know the yearly savings? Even if I don’t, the boss should.

So, a statistics table, a “bragging table.” Let’s call it “Rock and Roll Table.”

I could even make a chart, showing monthly/quarterly/seasonal value. Subtract from my salary to show my cost – hiring me is a steal! Data is there; whether I do it is TBD.

Epilogue

This was cost-effective. Half a day for initial setup. Negligible time after; I ran it during lunch.

This is my strength. I don’t reinvent wheels, but I assemble them well.

After setup, I met with operations. Marketing explained the four columns. No one found it hard. Operations thought I used AI. For non-tech people, anything amazing is AI. AI is the silver bullet. It’s funny; I’m used to it.

Finally, resources. Try it yourself:

Important Update

I have since developed a more automated programmatic solution for this workflow, which only requires a Python environment.

Details: https://github.com/greenzorro/excel-ps-batch-export

Quantifying Design Value

hi@victor42.work (Victor42) — Wed, 25 Oct 2023 10:51:00 +0000

The Story

I recently had a major clash with colleagues in a group chat. Things got heated.

I’m a designer, though you wouldn’t know it from my posts. I mostly do UI and interaction design, but I also handle data reports and PPTs. Sometimes, I even code and build websites. Our design department acts as a central hub, fielding requests from other departments. I’m juggling four projects, two of which are UI projects only I can handle. My schedule’s packed.

Why the fight? My UI work was fully booked, but another department insisted I help optimize a data report (a consumer report on jewelry). It wasn’t even advanced data viz, just finding and swapping product images in a PPT, showing it to the client, and swapping them again if they weren’t happy.

I refused. It’s intern-level work. I’d help if I had the time, but it wasn’t jumping the queue. I stood firm. They argued that since I’d done it before, I should continue, and the client was pushing. We went at it.

They ended up finding another designer. Afterward, my manager asked me to share my scheduling method. It seemed like they’d complained, but I was booked solid. A company has limited liability; an employee shouldn’t have unlimited responsibility, right?

For now, they can’t do much. But to cover my bases, in case they went to the boss, I had a backup plan. I used my work schedule data to calculate time spent on each task, assessed each task’s value, and created some charts. The monetary values indicate the salary range of a designer capable of that work.

It’s clear: their department (in brown) has a huge chunk of low-value work – finding and replacing images, adjusting alignment and fonts – and it takes up a ton of my time. The boss cares about cost-effectiveness. Having someone with a 20K+ salary doing intern work? Who knows who’d get chewed out.

The fight’s over, and I won’t dwell on it. But the data handling and analysis were interesting, so I’m documenting it.

Data Source

This analysis was possible because I regularly collect data. I organize anything I consider data in a way that’s useful later.

I created a design schedule with a multi-dimensional table tool. I set the default view to a calendar and put it in my DingTalk signature, so anyone requesting work could see my availability.

Although I add work items in the calendar view, it’s a data table. For easy recording, I kept the fields simple: project name, designer (it’s for the whole team), start and end dates, requester, and duration (in days), which is calculated automatically.

When a new project comes in, I update the schedule immediately. To avoid conflicts, I’m motivated to maintain this data table.

The raw data was ready, containing 40 workdays (nearly 2 months of data). I exported it to Excel, changed the duration from text to numbers, and started a series of analyses (from right to left) to generate the charts.

Time Analysis

First, time analysis. This tab has two tables:

The left table pivots the raw data, showing time spent on each requester.
The right table maps each requester to major business lines, summarizing the time each line takes up.

The left pivot table: filter for a specific designer (me), list each requester as a row, and sum the durations.

The right table lists the major business lines, selects corresponding requesters from the left table, and sums the totals.

Selecting data from a pivot table is easier. Excel automatically writes the GETPIVOTDATA function; you just click, avoiding SUMIFS.

Value Analysis

Next, I analyzed how well my time was spent.

The Value Analysis tab has five tables:

Table 1 is the reshaped right table from Time Analysis.
Table 2 shows the percentage of each business line’s work in different value ranges (manually created).
Table 3 pivots Table 2 for easier use in Table 4.
Table 4 multiplies Table 1 and Table 3 to calculate the actual percentage of each work type in different value ranges.
Table 5 pivots Table 4, summarizing the total percentage of work in different value ranges.

Table 1: each business line is a row, and durations are summed.

The key is the format. In “Sum of Duration” settings, I changed “Show Values As” to “Percentage of Column Total” and the number format to percentage, getting each business line’s time percentage.

Table 2 is the core, but it’s subjective. It’s not super rigorous, but good enough for arguments and review. I tried to be fair, assigning value percentages to each business line based on experience. I swear I didn’t intentionally undervalue the other department; their vendor-like nature means their low-value work proportion is high. The designer salary ranges for the value tiers are based on my 10+ years of experience.

Table 3 pivots Table 2. It’s divided by value, then by business line. This structure is for Table 4, for easier viewing and data retrieval.

Table 4: multiply data from Tables 1 and 3.

Table 5 pivots Table 4, summarizing by value.

Charts

With the analysis done, it’s time for visuals.

Level 1: Show percentages of each business line and value range, using data from Tables 1 and 5. Create pie charts, add data labels, and adjust colors.

Level 2: Show the breakdown of business lines within each value range. Treemaps are best for this two-level hierarchical proportion data. Create a Treemap from Table 4, and adjust background and label colors to match the two charts on the right.

Enable Treemap labels to show names and values, displaying each business line’s detailed percentage.

Afterword

With this value analysis system, I just maintain the schedule. I import the data, update a few pivot tables, and the charts are generated automatically.

Even with limited raw data, there’s more to analyze: monthly workload saturation, average project cycle for each business line, and value composition fluctuation over a year.

The fight’s over, and I won’t bring this up to the boss, but it’s interesting that design work can be analyzed with data.

Bricklaying and Trailblazing

hi@victor42.work (Victor42) — Sun, 28 Jan 2018 21:17:08 +0000

Developers often joke about being IT coolies, just “laying bricks.” Outsiders often don’t get what they face daily, or why they make these self-deprecating jokes.

I recently teamed up with a classmate on a WeChat H5 page with data submission. I handled design and front-end; he took care of the back-end, server, and domain. This gave me a glimpse into back-end development, and I suddenly understood the “bricklaying” analogy. I gained a much deeper appreciation for the challenges developers face. It’s a different world compared to other professions. If you’re not familiar with development, I’ll explain it in plain terms.

We used a standard front-end/back-end separation. Think: front-end is close to the user, back-end is far away, connected by networks. My work involved creating the page’s look, displaying it, and handling user-side logic. For example, email fields need an “@” symbol to be valid. My classmate’s work involved receiving user info, storing it in a database, and handling statistics.

We needed to collaborate on the “interface” – how I’d format and send user input, and what feedback he’d send back, including errors.

We were interdependent. I finished the front-end first, but how could I test the interface code? I needed the back-end to know if my code was correct. Since his code wasn’t ready, I had to wait. Of course, developers don’t just wait around. There are ways to simulate each other’s work, which is what we did.

He wrote some Python to simulate the interface locally. I knew nothing about Python and was lost. After staring at it, I got a clue. Combining it with our agreed interface, I roughly understood it. My task: turn my computer into a mini-server, run his code, and submit content to it. His code would give feedback, letting me test.

But it failed miserably. The problem? Running his Python code. Prerequisites: First, Python. macOS comes with Python 2.7, so that was fine. Then, I needed common Python modules his code relied on. Installing these threw errors.

I first thought: macOS permissions. I tried getting superuser access, but no luck. Developer forums suggested upgrading/reinstalling modules – didn’t work. Then: Python version? I installed Python 3.6, replacing 2.7, and reinstalled. This time: syntax error. Python 3 changed some syntax. I fixed it, but the original error reappeared. A module he used was deprecated in Python 3, needing replacement – beyond my skills. I gave up on switching back to 2.7. Dead end.

I switched to a tool he recommended, simulating back-end data. Limited compared to raw code, but it worked, solving the problem.

This showed me how tough developers have it. Design tools are stable. Problems? Restart, reinstall. We focus on design. Developers’ tools – languages, modules, environments – are far more fragile. Incompatibility, settings, weirdness. Like a construction worker with a broken saw or drill. Fixing these isn’t development, but they spend time on it.

Front-end, which I know, is similar. Example: mobile button press feedback, like mouse hover. Hidden pitfall: code to darken a button on press might not work. You find you need a seemingly pointless line of code. Like picking up a chess knight, waving it, putting it back. No move. But it makes the effect work. Makes no sense, but you must write it. Solving this creates nothing, but it’s common. Tedious, unrewarding. Creative work brings accomplishment.

Development is amazing. Making something from nothing. Tech gurus complain about bugs, broken interfaces. Developers get stuck on unrelated technical issues. But they’re like pioneers. Venturing into the wilderness, making tools, building houses, laying railroads. Solving countless problems, creating infrastructure for later prosperity. Our stable products are thanks to their exploration.

I don’t enjoy this. I learn enough front-end to get by. I might have made inaccurate comments. With awe, I’ll stick to design!

An Icon for "Operations"

hi@victor42.work (Victor42) — Sun, 04 Jun 2017 13:42:12 +0000

It started with a simple task: design an icon for “Operations.” We’re a recruiting company, and we needed a visual. Representing an abstract concept with a concrete image is tricky – lots of choices, but nothing feels perfect.

So, I went back to basics. What’s the core message? I’ve worked with Ops for ages, but did I really understand their role?

As a product designer, I don’t interact with Ops much. It always seemed, well, diverse. That was my vague impression. Some visual designers? They view Ops as unreliable, inconsistent, even contradictory, ignoring branding and pushing things on users. I can recall almost every time a designer I’ve worked with has vented; Ops is usually high on the list.

Of course, it’s simplistic to stereotype. My girlfriend interviewed at a startup. The CEO, in the final round, discussed her hobby, ancient Chinese history, and her pragmatic nature. He was surprised. “How can a designer be like you? Aren’t they all artsy? Concerts and museums?” I was shocked too. How far can such a narrow-minded CEO lead?

You can’t pigeonhole people or professions. You’ll miss valuable learning opportunities. You have to assume that true Ops professionals aren’t like that. I researched and talked to my Ops colleagues. It was my first real attempt to understand their work – and yes, it’s very diverse.

Operations can be split into three areas: content, user, and campaign. All are equally vital. My take:

Content Operations: Creating and maintaining content.
User Operations: Focusing on user behavior, guiding it towards business goals.
Campaign Operations: Creating growth opportunities through planning and resource integration.

Channel, community, and new media operations are categorized by medium. The specific tasks depend on the medium.

“Operations” comes from “Operate,” as in COO. “Operate” usually means to control. I liked an online analogy: If product and design build the ship, operations sails it. It’s a fundamental difference in mindset. Shipbuilders use static thinking: How’s the structure? Ideal state? Wind resistance? Sailors must use dynamic thinking: What if currents shift? Suez Canal or Cape of Good Hope? Shipbuilders can use dynamic thinking, but they can still function without it. Sailors constantly face change. Only the destination is fixed.

This is my first team with such specialized Ops roles. Seeing the business through their eyes has been eye-opening. It began with a design review debate.

We were redesigning our mobile site – a visual refresh, mainly. Functionality wasn’t the focus. Homepage requirements: “Emphasize search, de-emphasize the banner.” I agreed initially. Job seekers want efficiency, not browsing. Search is key. So, I proposed this:

The search box is larger, with a shadow for emphasis, visually dominating the banner. Mission accomplished. The 2x3 grid of job recommendations below is essentially searches for those keywords. Placing the search box nearby could transform “recommended jobs” into “popular searches,” broadening search’s scope.

The product manager loved it, but Ops objected strongly. I explained the benefits, but Ops couldn’t accept the banner being obscured. The PM surprisingly joined in, arguing fiercely with Ops. Their stances were clear: Product prioritized efficiency and minimal distractions; Operations wanted a vibrant feel and rich content. As designers, where did we stand?

How do we see banners? Annoying, mostly. Often irrelevant, space-consuming, and visually jarring. Many PMs likely agree. They see it as Ops’ domain, something to ignore. If Ops wants a say, give them a banner and let them handle it. I’ve thought that way myself.

PMs and product designers are usually rational, logical, efficiency-driven. It’s the job. As an engineer and pragmatist, I believe a good product sells itself. Perfect it, and growth follows. That’s not wrong, but if you think Ops-driven projects are less intelligent, mere grunt work, you’re mistaken.

The search box debate ended inconclusively, the design killed by a majority vote. But, something Ops said near the end resonated:

“We use this banner for partnerships, resource swaps. People will say, ‘It’s not prominent. It’s on the homepage, but blocked.’ We can’t offer that.”

We could’ve solved the blocking. The point is, did we, designers and PMs, ever care about Ops’ needs? Did we consider their role in the bigger picture?

Many companies succeed through refined products. Sketch is an example. But not every industry has that level of technical depth or differentiation. The more grounded the industry, the tougher that path. Ruthless expansion, dominating the market – that’s another, winner-takes-all strategy.

Our team is in that kind of industry, and our strength is Operations. So, why not play to our strengths? I often face situations against my design principles. I follow Ops’ lead, using design to achieve their goals, but we find a balance. Alignment is more crucial than individual principles.

What is product design? It’s not so lofty. Designers have a mental scale, measuring user experience. A slight shift can turn a well-meaning nudge into manipulative, brand-damaging dark patterns. We warn against that, but it rarely reaches that point. We represent users, defending their interests. But the foundation is helping the company profit. On that, we and Ops are aligned.

So, these colleagues deserve design support. Create unique elements for their diverse display needs. Track and improve metrics for their monetization needs. Establish guidelines for their partnership needs. Shift your perspective, and you’ll see your work is still valuable.

Back to the icon: What represents “Operations”? I drew a simple bar chart: X and Y axes, two bars, one taller. It’s abstract, and Ops’ work varies greatly, but business growth is the shared goal.

If we don’t understand the sailors, how can we build a good ship?

Notes on Interior Design from a Designer

hi@victor42.work (Victor42) — Sun, 26 Mar 2017 01:03:58 +0000

I’ve been compiling these notes for over a year, gathering information and jotting down thoughts. Now, it’s time to share.

In June 2013, I bought a 90-square-meter apartment. It was pre-construction, so I waited two and a half years, finally getting the keys in November 2015. As a UI designer, interior design was unfamiliar territory. But, I decided to manage the renovation myself. The renovation team’s designer only measured the rooms and drew up plans for plumbing, electrical, and carpentry. Essentially, I handled 95% of the design, from layout to details.

It was more rewarding than expected. It was a hassle, yes, but fun. I documented the process to consolidate what I learned.

Should You DIY?

This requires careful consideration. You need to understand the project’s complexity. Assess if you have the energy and if it’s truly for you. Taking charge means managing every detail. You don’t have to do the work yourself (full-service, semi-service, or DIY are options), but you need to grasp most of the details.

Renovation is a collection of small problems. Figuring out where to start took time. Time, space, and budget all factor in. It’s unlike computer design; techniques and materials limit you, and budget often dictates choices. Perfection isn’t achievable in one go. Everything, including your ideas, will evolve. Embrace the exploration.

Start by reading articles about renovation. I stumbled upon one about kitchen cabinets, which opened my eyes. The countertop alone had so many details: drip grooves to protect cabinets, raised edges for waterproofing, curved surfaces for easier cleaning…

Pay attention to these details. If you’re intrigued rather than discouraged, you might be a tinkerer. I hope this content helps.

Pre-Preparation Prep

Ultimate Goals

Renovation needs clear goals beyond aesthetics. Consider durability, aesthetics, storage, ease of cleaning, and ease of modification. Budget isn’t a primary goal; it’s a constraint considered within each detail.

Imagine 10 points to allocate across these 5 indicators (each with a perfect score of 10). My goals were:

[3/10] Durability
[1/10] Aesthetics
[4/10] Storage
[2/10] Ease of Cleaning
[0/10] Ease of Modification

I’m clearly a storage enthusiast. My girlfriend criticized my designs as ugly. She’s right; I neglected aesthetics.

If unsure, visit friends’ homes. Don’t aim for a mediocre 2/10 on everything. Goals are crucial; stick to them.

Logical Organization

Before starting, plan how to organize information. Renovation is information-heavy. Consider categorization, organization, summarization, portability, and sharing. Tools, structure, recording methods, and formats matter. Consistent maintenance and updates are key. Adjust your framework as needed.

I initially used a mind map, which worked for a high-level overview (listing rooms, contents, construction phases). But as details increased, each area became a complex system, beyond a tree structure’s capacity. So, each dimension got its own documentation:

Space: floor plans, 3D models, plumbing/electrical diagrams.
Time: construction/purchasing schedules, photo albums.
Design: style references, color palettes.
Budget: spreadsheets.
ToDoLists for small tasks.

The mind map became less relevant. It served its purpose of untangling initial thoughts.

Key documents: floor plan, 3D model, dimensions list, color palette, budget spreadsheet, construction/purchasing schedule.

Floor Plan

The renovation company provides this with precise dimensions. Keep a copy on your phone for early material cost estimates.

3D Model

This helps design the layout and communicate ideas. Creating it takes effort, but it’s worthwhile for expressing your vision.

Dimensions List

Record dimensions not shown on the floor plan (vertical dimensions, curtain widths, etc.). Note dimensions as you think of them to avoid extra trips.

Color Palette

Useful for controlling color consistency. Keep it on your phone and follow it strictly, even for small items. This applies to new purchases; don’t discard old items solely for color coordination.

Edit the color palette in Illustrator.

Budget Spreadsheet

Essential in later stages, it needs constant updating and mobile access. (I splurged on the kitchen faucet…)

Construction and Purchasing Schedule

This document connects the process in time, showing what to do when. Print it, check off completed items, and cross out unnecessary ones.

These are excerpts. Complete files are available for download at the end of the article.

Home Inspection

Home inspection is the first step. Ruling out quality issues is paramount. The renovation company will check most items, but ensure thoroughness.

Test water pipes: Pour water down each drain to check for blockages and leaks. Leak detection is crucial to define responsibility before renovation.
Mark hollow areas: Tap walls and floors, circling hollow sounds for repair.
Check for flatness: Use a straight edge to check wall flatness, which affects tile, flooring, and baseboard installation.
Look for cracks: Cracks indicate quality problems. Cracks on beams and load-bearing walls are serious. Check adjacent floors.
Check doors and windows: Ensure smooth operation, tight closure, and no damage.

Layout Design

Layout dictates function and lifestyle. A balcony for relaxation needs a table and chairs. Extensive clothing requires a walk-in closet. Yoga needs open living room space. Layout serves lifestyle, not just copying appealing designs.

Layout comes first, then aesthetics.

Six-Sided Measurement Method

When measuring, a 5cm error is acceptable. The renovation company’s measurements suffice for a floor plan, but we need more data, including window size and height for the 3D model.

First, draw the floor plan. Based on the developer’s plan, draw a rough shape. Record wall width and thickness, doorway width and position, bay window size, and pillar size. Mark load-bearing walls.

My measured floor plan; blacked-out areas are unalterable load-bearing walls. (Excuse my handwriting.)

Second, create a labeling diagram. Label each area (e.g., room ‘a’ is my kitchen). Label kitchen walls a1-a4. Consistent labeling prevents confusion.

Area ‘h’ is a small balcony with a water source and drain.

Then, draw each room’s four walls, one room per page. Record wall height, window size and position, doorway height, beam position, and special facilities (exhaust vents, AC holes). Beam position accuracy is less critical.

My kitchen’s four walls. The narrow strips on a2 and a4 are 250mm-high L-shaped beams. I unnecessarily recorded switch/socket positions, as wiring will be redone.

My master bedroom. The frame on g4 is a window, 400mm from the floor, 2100mm high. Combined with g3, it’s an L-shaped window.

The top surface is missing from the six-sided method, but it’s hard to measure accurately. Visually record beam positions. If there are few beams, drawing them is unnecessary.

Take photos. They can clarify roughcast details later.

Drawing the 3D Model

Convert measurements to a 3D model while the manuscript is fresh. Learn SketchUp, an architectural design software.

It’s simple; drawing cubes and cylinders suffices. No need for architectural design expertise. This tutorial is enough for one day:

http://study.163.com/course/courseMain.htm?courseId=381005

I only finished Chapter 6. I focused on dimensions and furnishings, not material textures.

Reflecting materials and textures is unnecessary. This diagram is for communication and layout planning. It helps determine room usage and facility purchases.

The 3D model looks like this – various blocks, but descriptive of furnishings (see below, upper left, microwave to the right of the refrigerator):

The challenge isn’t drawing, but knowing object dimensions (cabinet height, aisle width). Research and measure. Carry a tape measure.

Discuss the model with family and friends. Adjust the plan if needed. This 3D model is the core of the renovation plan until soft decoration. Use it for buying materials and communicating with the renovation team. Update it promptly.

I had several earlier versions. Kitchen sides were swapped, sofa area furnishings were different, and the second bedroom door was elsewhere. Modifying the prototype is better than costly rework.

Special Items to Consider First

Certain items significantly impact layout, usually related to plumbing and electricity. Decide on these before plumbing/electrical work begins. Changing your mind later causes major rework.

Central AC and fresh air systems require pre-buried pipes/wires and drilled holes.

Underfloor heating requires electricity and affects floor leveling.

Integrated stoves have downward smoke exhaust, requiring different socket and vent positions. The space under the stove has options (bowl baskets, disinfection cabinets, ovens, steamers). Ovens require specific wiring; inform the electrician.

Decide on the water heater type (gas, electric, air-source, solar). Different types have different plumbing/electrical layouts.

Consider hot water needs in the kitchen, bathroom, and balcony. If close, one water heater suffices. If far, prioritize the bathroom. For distant kitchens/balconies, consider a small kitchen treasure instead of long pipes. Leave a socket for it. My kitchen and bathroom share a gas water heater; the balcony has an electric faucet.

Wall lamps and functional lighting require reserved power lines.

For bathroom cabinets and toilets, decide between floor-standing or wall-mounted. This determines drain location (floor or wall).

Defining Your Decor Style

Let’s get to the fun part: defining your home’s style. I admit, I fumbled this a bit.

Finding Your Direction

Collect interior design photos. Organize them by room (kitchens, bedrooms, etc.). Show your favorites to your partner. Each of you should remove the ones you dislike. The remaining photos will likely suggest one or more styles.

Then, find more photos of those specific styles and repeat. Removing the disliked images again helps narrow down details. For a Mediterranean kitchen, should cabinets be white or blue? Bedroom walls: paint or wallpaper? Living room: tiles or hardwood? These are key choices. Find mutually agreeable solutions.

Don’t fixate on one style unless you’re absolutely certain. Styles often blend – Mediterranean and American, for example. “Authenticity” isn’t crucial; go with what appeals to you. My home mixes modern, Mediterranean, and Scandinavian elements, but most items are neutral. For major purchases like materials and furniture, avoid anything with a very strong style. A single, contrasting item can add drama.

Understanding Style

Analyze your reference pictures. Identify common elements and extract the universal ones. For Mediterranean: arches, rounded corners, white walls, mosaics, stone, wrought iron, shutters. Incorporate these, and the vibe will follow.

Understanding style requires viewing many pictures. Seeing numerous American interiors, you’ll recognize those signature sofa armrests.

Choosing a Color Palette

After this process, your basic color scheme should be clear, especially if you’re limiting colors. Create a color chart and keep it on your phone for comparisons while shopping. I waited until buying tiles to consider the overall style (a bit late), but the chart still helped. My home’s main tone is a bright, true blue. I avoided using too many teal or purple-toned blues to keep the scheme consistent.

Consider natural wood color. Wood tones, besides wall paint/wallpaper, sofas, and curtains, are significant. Stain colors vary widely. Walnut and ash are usually dark brown, but one might be reddish, the other greenish. Even slight differences can clash.

My place fails here – wood tones are inconsistent. I recommend a maximum of two wood tones for major items. Be selective with wood-grain furniture.

Be Careful with Inspiration

Don’t blindly copy attractive designs. Restaurants and cafes, while atmospheric, serve different purposes.

Dark ceilings are common in modern restaurants but rare in homes. Dark ceilings can feel oppressive. Lighter elements above heavier ones are visually preferable. A modular TV stand with wall-mounted and floor cabinets shouldn’t have larger wall units.

Restaurant’s black ceilings hide pipes and dirt. With downward lighting or high ceilings, they’re almost invisible. But homes aren’t brightly lit 24/7. Public space decor is a poor reference.

Open-concept designs (wardrobes, bookshelves, louvered-door shoe cabinets, cabinets) are another example. Consider local air quality. Increased surface area invites dust. Don’t copy designs from other regions.

Budgeting

With a large budget, prioritize quality. With a tight budget, control costs. Categorize materials/furniture into four tiers based on the consequences of compromise:

Safety: Gas water heaters/stoves, switches/sockets.
Financial Loss: Waterproofing, pipes/wires, angle valves.
Hassle: Range hoods, tiles, floor drains.
Aesthetics: Lamps, TV stands, curtains.

Unless aesthetics are paramount, cut costs according to this. Start with top-tier products, understand their benefits, and then make trade-offs. This clarifies your needs.

Cutting the budget doesn’t mean neglecting quality. I skimped on kitchen wall tiles, and they’re awful – rough, uneven. Better tiles were available at the same price elsewhere.

The Imaginary Overall Budget

Establish a preliminary budget, perhaps based on others’ experiences. My classmate’s 90-square-meter apartment renovation cost 180,000 RMB. I aimed for 160,000 RMB, a somewhat arbitrary figure.

The Budget Sheet

List your budget items. This document needs constant updating. My renovation was semi-inclusive, so I divided the budget into: semi-inclusive, hard finishes, soft finishes, and small items. Only hard and soft finishes are fully controllable.

The semi-inclusive part is technical; I don’t recommend full DIY for beginners.

Small items (decorations, spice jars, etc.) are bought as needed, so just keep a record.

My initial ratio of semi-inclusive, hard finishes, and soft finishes was about 6:8:4. This varies. High kitchen demands increase hard finishes; a love of wood furniture increases soft finishes. Determine item prices through research: visiting markets and browsing Taobao. Understand quality levels, price ranges, and brand variations. More knowledge means less expense deviation. Don’t forget miscellaneous costs: initial cleaning, property management fees, supplementary materials, delivery fees.

Use my sheet as a starting point. Hard finishes are grouped by material (tiles, flooring, doors are bought in bulk), while soft finishes are grouped by space (allowing for more detailed combinations).

Modifying the Budget

A budget isn’t perfect. Allow one modification, and only one. Use it only if you initially underestimated necessary items and prices. It’s not for impulsive changes in standards.

I used this opportunity. I underestimated supplementary materials (wallpaper adhesive, curtain gauze/tracks, screens, appliances, installation). The total budget rose to 185,000 RMB. The final ratio was 6:8:5.

Finding a Renovation Company/Team

This can start during layout planning. I didn’t compare many companies.

My classmate used a relative who was a project manager. Our homes were renovated simultaneously, off-the-books.

The materials were reliable, and the price was fair. However, renovation teams often overextend, prioritizing whoever pushes hardest. Hard finishes took half a year. It’s hard to hold acquaintances fully accountable.

This off-the-books team lacked professionalism. Floor leveling and plumbing/electrical details were rough. Skill limitations led to less-than-ideal results.

Construction

Once construction starts, the schedule is key. It clarifies tasks and material needs. Here are some general tips:

Photograph each phase for reference. You might need to check for a beam location or socket height. Photograph plumbing/electrical lines before tiling to prevent damage. My photo organization. Cloud storage is essential.
Hidden furniture saves space but requires more effort. It also needs skilled carpentry. Frequently used furniture should be traditional, unless space is extremely limited. Small daily actions become annoying.
Complexity shortens lifespan. Consider advanced gadgets carefully.
A flatbed trolley is useful for moving large items. Items that aid the transition are worthwhile (ladders, toolboxes, etc.).

Now, the construction stages:

Demolition and Alteration

This involves removing old renovations, wall modifications, and altering door openings. Even new walls need scraping/repainting. Spatial changes should be updated in the 3D model.

Cover drainpipes to prevent blockages.

Drill air conditioning holes now.

Determine range hood, stove, sink, and built-in appliance brands/models for dimensions. Cabinets are needed, and the hood affects wall cabinet layout. Stove/sink affect countertop openings. This allows time for price comparisons.

Plumbing and Electrical

Before this stage, confirm water outlet, switch, and socket locations with the electrician. Mention high-power appliances (oven sockets need thicker wires). Specify wall lamp, night light, and speaker locations for wiring. I later switched two sockets and found the thicker copper wire in the 6-point pipe.

Each functional area’s electricity should be independently controlled. Generally: lighting, kitchen sockets, other sockets, each AC, refrigerator, underfloor heating, electric water heater, weak current box. Finer division by space is better.

I won’t re-emphasize needing more sockets. Frequent kitchen users should ensure all kitchen sockets have switches. It’s easy and safe.

Each water outlet needs an angle valve, not a direct faucet connection, for easier repairs.

After trenching, inspect before sealing. Check for missing/misplaced openings. I missed the dishwasher socket and had to lengthen the cord.

Tiling

This involves sealing trenches, leveling, waterproofing, shower curb installation, tile laying, and floor drain installation.

Consider flooring type in advance (joists or cement leveling). Information is in the purchasing section. This affects leveling layer thickness, aiming for level floors (bathroom slightly lower).

I switched from engineered wood flooring + joists to laminate + cement leveling. The tiler re-leveled the room floor.

After bathroom waterproofing, do a water test and photograph. Shower area waterproofing must reach the top. Otherwise, water can seep through tile joints.

Ensure the floor slopes towards the drain in areas with floor drains. My bathroom has a non-draining corner, but it’s outside the shower.

Tiles give the first glimpse of the finished home. I used wood-look tiles on my balcony.

The tiler also installs threshold stones and windowsill boards (can be done later).

Schedule gas meter installation after kitchen tiles.

Carpentry

This involves ceilings, cabinets, tatami mats, and bay windows. Discuss special needs with the carpenter. My classmate had a dressing table made with a flip-up lid and mirror.

Wardrobe construction. My wardrobes were carpenter-made, including a wall of wardrobes in the walk-in closet. Carpenter-made wardrobes are more environmentally friendly.

Design the wardrobe’s internal structure yourself, or with the renovation company designer. Carpenters are dimension-sensitive; their wardrobes usually have no practical issues.

Carpenter-made bay window with storage.

Living room ceiling to conceal the duct machine. Rooms had simple right-angle ceilings to hide beams.

Carpenter-made door frame for two bedroom doors. I’ll hang paintings here.

For TV stands, consider future TV size. Don’t limit the possibility of a larger TV.

Painting

This stage is repetitive: putty, latex paint. It requires many purchases (see schedule).

White wall paint; things are taking shape.

Install gypsum lines during painting and paint them with the walls.

The painted house looks spacious, but it’s an illusion. Furniture will reveal the reality. The tape measure doesn’t lie.

Latex paint drips. Keep packaging cartons to protect tiles/floors and prevent damage from heavy objects.

Installation

The electrician installs water/electricity facilities: switches, sockets, faucets, angle valves, toilets, basins, hooks. Vendors install integrated cabinets, doors, floors, fixed appliances (stoves, dishwashers). The gas company lights the fire.

Kitchen/bathroom are complex (electricity, water, gas). The wrong order causes rework (see schedule).

Water heaters, cabinets, doors, ceramics, lamps, wallpaper… It’s complex. I visited the new house almost every weekend.

Supervise the electrician. Problems can arise: reversed angle valves, reversed switch states, crooked panels/switches, upside-down switches, crooked lights, foam debris in lampshades.

Be firm when needed. My electrician claimed a reversed switch was unsolvable. I had him remove it, set it to “off,” and reinstall it. It worked.

Lighting is crucial, especially functional lighting. Eliminate dead spots in frequently used areas. Reserve power lines during plumbing/electrical. Emphasizing again: before plumbing/electrical, consider water/electricity usage. The electrician handles standard lights. You must specify wall lamps and functional lighting.

Select and purchase the microwave before final installation if you plan a kitchen wall bracket. It determines the bracket’s drilling position.

I provided a schematic, marked the location, and placed the microwave nearby. Workers will re-measure for accurate installation.

Purchasing

Purchasing and construction go hand-in-hand. Here’s some advice:

Choosing materials and furniture can be overwhelming at first. I developed a system: ① Research the basics. ② Visit stores, examine top products, learn their benefits, and confirm your research. ③ Decide on quality, material, and structure, making trade-offs. ④ Visit more stores, compare prices, and order.
Taobao is a great resource. Ask customer service for details you can’t find online. After contacting several sellers, you’ll likely have a good understanding, even if they aren’t technical experts.
I avoided group-buying events for renovations. I don’t trust them. Responsibility is unclear, even though they attract many people. Sellers are accountable for their products, but group-buying events aren’t. You might find a few deals, but you’ll mostly encounter slow-moving items or bundles with useless extras. After-sales service is also a concern with multiple parties involved (venue, group leader, seller), leading to potential blame-shifting. Delivery delays are a major problem, disrupting your schedule. In home renovation, time is money (rent).
Furniture stores often feature mid-to-high-end items, which can easily break your budget. However, visiting during holidays can yield unexpected deals. I found a promotional flooring model from a major brand, and the quality and service have been excellent.
Monitor promotions on e-commerce platforms, especially for appliances. Price comparison tools are useful. Appliances are standardized; the same model is identical everywhere. These tools display the lowest current price and historical trends, helping you determine the best time to buy.

There’s extensive information online about most building materials and furniture. A good search engine is invaluable.

The following information isn’t exhaustive. It’s simply what I gathered. I excluded straightforward items like tiles (beginners can hardly tell the difference unless they’re side-by-side). I also omitted items I didn’t purchase. For instance, I have a gas water heater, so I didn’t research electric ones. This focuses on the products themselves; judging industry “tricks” is up to you.

Conflicting information exists about some products, with sellers contradicting each other. I concentrated on gathering information on these. Ignore any brand mentions and focus on the basic knowledge:

Floor Drains

Two main types: water-sealed and air-sealed. Water seals can be shallow or deep; air seals have various mechanisms. No single type is best; different locations require different drains. Areas with constant, heavy drainage versus rarely wet areas need different solutions. See this article:

http://www.dajia365.com/article/97dd4db9449092c2.html

Switches and Socket Panels

Standard formats exist for switches and socket panels. These articles explain them:

http://tieba.baidu.com/p/3251622973 http://www.dajia365.com/article/7c4e032151b68670.html http://www.kaiguanchazuobar.com/kgcz-zhishi/32.html

The spacing between the two-prong and three-prong holes in a five-hole socket should prevent plugs from interfering. Modern sockets are usually well-designed, but ensure they have a safety feature. This design connects metal parts only when all holes are inserted. A child inserting a chopstick into one hole will be blocked by an insulating plate.

Shower Curb

Two installation methods: pre-embedded and non-pre-embedded. Pre-embedded involves fixing the curb before tiling. Non-pre-embedded means attaching the curb to the tiles later with sealant. The latter requires a very flat floor and precise tiling. The sealant must be perfect to prevent aging, cracking, and leaks. Pre-embedded is generally preferred for new homes, provided waterproofing is done correctly, as leaks under the tiles are a major issue.

Curbs are usually PVC or marble. Marble is more durable and solid. PVC curbs are hollow and require cement filling.

Two curb shape details: the skirt and sealant groove. A skirt helps with water resistance if you use a shower curtain (irrelevant with a glass enclosure). The sealant groove is useful for non-pre-embedded installations but irrelevant for pre-embedded ones.

http://www.homevv.com/gonglve/201512/08488.html

Kitchen Cabinets

Kitchen cabinets are complex; understanding them took time. Base and surface materials have confusing, similar-sounding names. Here’s a breakdown. You can search online for property comparisons. Base materials and surface materials are distinct concepts and not directly comparable. Some sellers exploit this to mislead customers.

First, the base materials. Many are used in doors, wardrobes, sofas, and tables, so differentiation is important.

From top to bottom:

MDF (Medium-Density Fiberboard): Made of wood fibers, glue, and other materials. Dense and uniform.
Particle Board: Often called “solid wood particle board,” but it’s not solid wood. Made of wood chips and glue.
Plywood: Multiple layers of wood veneer glued together.
Blockboard: Two thin wood panels sandwiching wood strips. Commonly used for custom furniture.
Solid Wood: Actual solid wood. Numerous wood types exist, with varying quality. Here’s an article: http://weibo.com/p/23041814d60c0640102vrz8

Another article on base materials: https://www.zhihu.com/question/24520029

Now, the door panel surface materials:

UV Board: Smooth surface made by curing liquid paint on the base material.
Lacquer Board: Same material used on cars and pianos.
Melamine Board: Sellers avoid “melamine,” calling it “double-sided panel” or “eco-board.” It’s paper with color/texture soaked in resin, dried, and hot-pressed onto the base. (Melamine in building materials is harmless and common.)
Thermofoil Board: Similar to melamine, but the surface is thicker, not paper. It can have 3D textures and seamless wrapping without edge banding.
Acrylic Board: Called “crystal board” or “organic glass,” but it’s plastic, unrelated to crystal.
Crystal Steel Board: Tempered glass glued to the base, often metal instead of wood.
Fireproof Board: Low-end material, rarely used in homes. I haven’t seen it sold; you can likely ignore it.

Molded board refers to a processing method using a mold for shaping. It’s unrelated to material but usually refers to thermofoil board.

When designing cabinets, reserve space for the refrigerator based on dimensions with the door open. A 60cm wide refrigerator needs more than 60cm. Drawers won’t pull out if the door only opens 90 degrees. Opening it wider exceeds the refrigerator’s width.

Line the cabinet under the sink with aluminum foil. It’s very humid, potentially damaging the cabinet. Even with quality materials, leaks can happen. Foil is the last defense, significantly reducing damage.

Shower Enclosures

Two points about shower enclosures lack definitive answers:

Hardware can be copper, stainless steel, or aluminum alloy. Most sellers favor copper, but some stainless steel models are pricier, even from known brands. Pure copper is more corrosion-resistant but less hard than stainless steel. Theoretically, copper is better. But pricier stainless steel models suggest low-quality copper might be worse than low-quality stainless steel. It’s unclear; avoid being too cheap.
Hinged doors have hinges or pivot hinges. Stress points on the glass differ, and sellers disagree. Left: Hinge; Right: Pivot hinge. Note the door’s rotation connection point. Delli stated they don’t make pivot hinges due to sagging and shattering risks, making them less safe than hinges. Lower-priced brands often use pivot hinges, but in these stores, they’re often more expensive, with sellers claiming superiority. The pivot hinge structure seems more robust, but understanding internal structures is needed for a conclusion, and I found no information. However, for the same door width, a hinged door’s opening is wider.

This Zhihu article details other shower enclosure aspects:

https://www.zhihu.com/question/24903820

Flooring

Flooring discussions mainly involve solid wood, engineered wood, and laminate. Comparison is easy: price and environmental friendliness decrease, while durability and ease of maintenance increase. See this:

https://www.zhihu.com/question/34004791

Gas Water Heaters

Common types include forced exhaust and balanced flue, referring to exhaust methods.

Some sellers mention constant temperature and condensing types, but these are separate features. Constant temperature models adjust water/gas flow for stable temperature. Condensing models reuse combustion gas heat to preheat water, offering some temperature stability but primarily saving energy.

Pay attention to condensing models. They’re more energy-efficient but have an extra condensate pipe. This needs draining via a sewage pipe, so consider how to manage this small pipe.

http://www.dajia365.com/article/d52d55d20d8a99b4.html http://www.rinnai.com.cn/news/detail/id–62.html

Kitchen Sliding Doors

Not much to consider; most of it is here:

http://m.club.sohu.com/zz0277/thread/10se6surdcc

Toilets

A smoother glaze inside the toilet facilitates cleaning with a single flush.

Two flushing methods: direct flush and siphon flush. Direct flush uses gravity; siphon flush uses pressure from the water seal. Jet siphon adds a jet for enhanced flushing.

Water fittings are crucial. Even for major brands, ensure official fittings. Stuck flush buttons or failure to refill are common toilet problems. Half the toilets in apartments I’ve lived in had these issues.

Two drainage types: floor drain and wall drain. Wall drains are less common, requiring wall load-bearing capacity. Floor drain toilets are more reliable; install at the original drain location, avoiding shifters if possible, for better sealing.

Before buying, measure the “rough-in” – the distance from the drain center to the nearest wall. The seller needs this for the correct toilet.

http://weiyu.pchouse.com.cn/41/419033_all.html http://home.163.com/13/0704/21/92VJ650O00104K9K_all.html

Downlights and Spotlights

Downlights provide broad illumination, often for hallways or supplementary lighting. Spotlights have a concentrated, adjustable beam for illuminating specific areas, like paintings.

http://www.eeworld.com.cn/LED/2015/0328/article_11941.html

Wardrobe Doors

Three common base materials: MDF, wood-plastic composite, and particle board (called “solid wood particle board” by sellers). Particle board is only for flat doors. Designs like faux shutters or carvings require the first two.

Wood-plastic composite is a new material. These articles provide definitions and discussions:

http://www.dhmyjgc.com/display.asp?id=717 http://www.hualongxiang.com/simple/?t10164871.html

Bathroom Cabinets

Bathroom cabinets have wall and floor drain options, like toilets. Common materials are PVC and wood panels, usually solid wood. Avoid sellers substituting MDF; it absorbs water and swells in humid bathrooms, making it the worst choice.

http://www.guizhicui.com/zhishi/324.html

LED Lighting

First, understand LED working principles and the resulting excessive blue light issue. The harm isn’t as exaggerated as some claim. Insufficient light and incorrect color temperature can also damage eyes. Improper use is more harmful.

http://digi.163.com/15/0817/10/B17CNRDG00162OUT_all.html

The primary consideration is illumination, with many professional parameters. This Zhihu article discusses them:

https://www.zhihu.com/question/20043507

But reality isn’t ideal. Online, you rarely see lumens, color rendering index, or heat dissipation. You can only compare wattage and color temperature. Besides style, there’s little for ordinary consumers to compare. Visiting a physical store is more insightful. I was lazy and bought online.

Home lighting has two functions: illuminating the entire space or a specific area. Ceiling lights in most rooms do the former, being the main source. Dining rooms are exceptions, only needing to illuminate the table. I chose simple LED square lights for most spaces, providing even illumination without unnecessary colors/shadows. Square lights emit light broadly; you usually won’t look directly at them. A simple style isn’t problematic; it just might not garner compliments.

Bed Frames

Bed frames come in leather, wood, fabric, and metal. These are surface materials; the core load-bearing material is wood or metal.

Metal frames are durable and non-polluting but have limited styles and usually lack storage.

Wooden frames are divided into panel and solid wood. Panel frames use particle board and other engineered wood, with lower environmental friendliness and durability, lower prices, and more varied styles. Solid wood frames are durable and environmentally friendly, with higher prices and simpler styles. Solid wood has many tree species, with significant quality differences. Sellers often recommend teak and walnut. Softer woods like pine might be weaker than panel beds.

This article details wood, more than the kitchen cabinet section:

https://www.zhihu.com/question/24335160

Not all frames use one material; some mix materials. Key load-bearing parts might be solid wood, side panels engineered wood, and the headboard leather or fabric.

Mattresses

Common types: spring, coir, memory foam, and latex. A spring mattress doesn’t only have springs; a latex mattress doesn’t only have latex. Mattresses usually have three layers: innermost spring layer, padding layer, and outermost fabric layer. Some all-coir mattresses genuinely have no springs.

The padding layer determines the type. If it’s mainly coir, it’s a coir mattress; if mainly memory foam, it’s a memory foam mattress. The padding can be multiple layers of different materials. Materials ranked from hard to soft: coir > memory foam > latex. Some mattresses are double-sided, with different padding on each side of the spring layer. For coir mattresses, note they’re not the old coir beds. Modern coir mattresses use glue to bond fibers into a dense layer. Another process uses all-coir fibers woven without glue.

Two common spring layers: innerspring and pocket spring. Innerspring is cheaper but has a mutual influence problem; turning over affects your partner’s side. Older, noisy mattresses are often this type. Pocket springs are independent, and the mainstream now. Pocket springs have a zoning concept, dividing springs into zones with different firmness. Head/waist zones use firm springs, shoulder/hip zones soft springs, back/leg zones medium-firm springs. More zones mean more precise support and higher price. Common zones: 3, 5, and 7.

Mattress firmness is affected by both padding and spring layers. Firmness isn’t a single indicator; soft padding with firm springs feels different from firm padding with soft springs.

This Zhihu article explains it; the above is my summary. Trying it yourself is most important:

https://www.zhihu.com/question/20645726

Sofas

Comfort is the primary consideration. Based on your height and habits, try sofas in a store and determine two key data points: seat depth and backrest height. Cushions can adjust, but the sofa itself is more stable and reliable.

I’m 167cm tall. After trying sofas, 50-55cm seat depth was most comfortable. Shallower decreases thigh contact, increasing pressure and fatigue. Deeper lacks lower back support; adding a cushion strains my neck.

My girlfriend, similar in height, wants to rest her head on the backrest, not a headrest. Headrests are unfixed and too soft, so we need a high-back sofa with 60-65cm backrest height. I searched online; it was challenging. We wanted a sectional sofa with a chaise. High-back searches usually exclude chaises, and styles tend to be classic European, Chinese, or American country, which are hard to match.

With these requirements, we went to the market and found more suitable sofas than expected. Many sellers offer customization: fabric, height, and width are changeable.

Ensure sitting comfort first, then consider material, style, and color. Don’t sacrifice function for the latter. There’s plenty of information online about these aspects.

Don’t be obsessed with storage or sofa bed functions unless necessary. Adding these requires a hardboard under the seat cushion, reducing comfort.

Curtains

Besides aesthetics and feel, consider installation: curtain rods or tracks?

Curtain rods: Simple. Exposed rods look better than tracks without a curtain box; no valance is needed. However, rods have a length limit; excessive length causes deformation. For very wide curtains, two rods are needed, with a gap between curtains. Removing and washing curtains is more troublesome.

Tracks: Flexible. Tracks can be L-shaped for seamless corner coverage. Curtains hang with hooks, making removal easy. For multiple layers (blackout and sheer), tracks save space.

When adding sheer curtains, ensure the curtain box is wide enough for two tracks with sufficient distance. If not, it’s better to forgo sheer curtains. Two layers squeezed together rub, hindering sliding and causing noise, defeating the purpose.

Curtains aren’t limited to these; roller blinds, fan-shaped blinds, and shutters exist, but are usually for smaller windows.

Microwaves

Main distinction: flatbed and turntable types:

http://homea.people.com.cn/n/2014/0720/c41390-25304297.html http://info.homea.hc360.com/2009/09/071055446471.shtml

“Lightwave” ovens combine microwave heating with a heating tube, half microwave, half oven. It’s a differentiated product; not as advanced as advertised, nor as terrible as rumored.

https://www.zhihu.com/question/28411025 http://www.guokr.com/post-en/373417/

TVs

Choosing a TV is personal preference. But it involves considering factors related to TV usage, then choosing the TV.

First, understand common home TV signal sources, usable in combination:

Cable Digital TV: TV signals from the cable company, mainly live broadcasts, with limited, paid on-demand content. Best clarity and stability, dedicated TV line, not affecting internet.
IPTV from Internet Service Providers: Set-top box from the provider, often bundled with broadband. Live broadcasts and on-demand. Live content similar to cable; on-demand is richer. Shares network cable but doesn’t occupy bandwidth. Requires a dedicated line. China Telecom’s IPTV must connect directly to the optical modem; a router in between prevents it from working, complicating home network topology.
Internet Set-Top Box: Most flexible and independent, richest on-demand. Live broadcasts via third-party apps. Affects internet speed; basically an Android computer. Smart TVs are the same, with the box integrated.

About size. Many distance/size charts exist. Don’t be limited. If you like big screens, exceeding the ratio is fine. My TV-to-eye distance is ~3m; I bought a 58-inch TV. It looks great, not too big.

About 4K. TVs seemingly need 4K. But consider usage. For live broadcasts, 4K is irrelevant; resolution isn’t that high; 1080p isn’t widespread. For on-demand movies/shows, 4K matters little; internet speed is a bottleneck. Even if platforms support 4K, your network might not handle it. For downloaded 4K content, a 4K TV is meaningful; the HDMI interface should preferably be 2.0, supporting higher frame rates.

About HDR. Great technology adding brightness layers, enriching shadow/highlight details. You won’t see HDR content for long. Better to have it, but not essential.

About boxes. I struggled: traditional TV + box or smart TV? It’s not a question. Like most cars over 300,000 yuan are automatic, finding a manual is hard. You won’t buy a very cheap TV; at that price, they’re mostly smart. But does a smart TV mean no box? Probably not. I don’t know if all are like this, but my Hisense smart TV is semi-open. Its app store has few apps, no live broadcast apps. No third-party app stores, file managers, or browsers. It wouldn’t read .apk files from USB; it didn’t want me installing other apps. So, I bought a box. The TV’s memory is small; it’s Android, needing enough memory.

Washing Machines

Characteristics and differences between front-loading and top-loading:

http://post.smzdm.com/p/310/

General labels to distinguish:

Top-loading: cheaper, saves electricity and water, faster, harsher on clothes, gravity drainage Front-loading: more expensive, saves water and electricity, slower, protects clothes, motor drainage

Details about front-loading:

http://post.smzdm.com/p/366/ http://www.360doc.com/content/11/1024/14/366037_158690274.shtml

Front-loading and top-loading washing machine capacity isn’t comparable. My new 7 kg front-loader and previous 4.5 kg top-loader hold about the same amount of clothes. Capacity isn’t entirely proportional to the number.

Preparations Before Moving In

Even after the contractors finish, you still have plenty to do.

Acceptance Inspection

A thorough inspection is crucial. Check for these potential issues:

Plug in all appliances to ensure they’re working.
Test two-prong outlets with a phone charger. For three-prong outlets, use a power strip. Test the 16A air conditioner outlet directly with the AC unit.
Confirm all light fixtures are functioning.
Verify that switches control the correct lights, and that bedroom lights have multi-location control (e.g., door and bedside).
Turn each faucet to maximum to check water flow.
Ensure floor drains are draining quickly. (Drainage speed depends on the drain type, but slow drainage is a problem.)
Look for cracked or loose tiles, and missing grout.
Check that room and cabinet doors open and close smoothly, without looseness or noise.
Inspect walls for cracks.

If you find problems, photograph them and contact the contractor or vendor for repairs.

Initial Cleaning After Construction

The first post-renovation cleaning is called “initial cleaning.” It’s much more intensive than regular cleaning, and thus more expensive. Hiring professionals is recommended, as it’s quite tiring.

Initial cleaning mainly involves:

Window washing, especially the exterior glass, which accumulates construction dust.
Floor cleaning, including scraping off dried latex paint and glue.
Cabinet cleaning, wiping down the insides of all cabinets.
Regular cleaning (dusting and mopping).

Removing dried paint is demanding. Good protection during painting saves effort (and money, as some cleaning companies adjust prices based on floor condition). Don’t expect perfection; remind cleaners about paint on baseboards and switch panels.

Keep a ladder handy for cleaning staff to reach cabinet tops.

Airing Out Formaldehyde

Formaldehyde primarily comes from newly purchased furniture. Cabinets built on-site often use more eco-friendly materials. Specifically, formaldehyde originates from glue; denser boards use less glue and emit less formaldehyde. MDF (medium-density fiberboard), being completely crushed and reshaped, has the highest content. Multi-layer boards, with glue only between layers, have significantly less.

We say “airing out” because furniture continuously releases formaldehyde. We can only address it once it’s airborne. The goal is to accelerate this release and reduce the airborne concentration to a safe level.

Four principles for reducing formaldehyde:

Ventilation: Essential. Without it, formaldehyde remains trapped.
Water Solubility: Formaldehyde dissolves in water; increasing humidity helps. Humidifiers and plants increase humidity through transpiration. Plants don’t absorb formaldehyde preferentially; they increase humidity, allowing airborne formaldehyde to dissolve. Large-leaf plants like pothos are more effective due to higher transpiration rates.
Adsorption: Porous materials like activated carbon adsorb formaldehyde. However, this only traps it on the surface. Regularly air out or discard the charcoal. Curtains and sofa covers also adsorb, but less effectively due to less dense pores. Washing curtains helps remove formaldehyde they’ve absorbed.
Chemical Reaction: Photocatalysts, sprayed on furniture, react with formaldehyde to reduce airborne levels temporarily.

However, the last three are far less effective than ventilation. In a closed space like a shoe cabinet, formaldehyde saturates the air, halting further release. Opening the door is more effective than water, charcoal, or chemical reactions.

Therefore, ventilation is key. 24/7 window opening is ideal. I did this without other measures, and tests confirmed significantly lower formaldehyde in well-ventilated spaces.

I made a cardboard louver for my window to allow constant ventilation while preventing rain damage.

For details on the louver, see: https://victor42.eth.limo/post-en/3515/

Finishing Touches

Finally, some miscellaneous tasks:

Consider upgrading your security door lock.
Install the doorbell and property-provided intercom.
Seal unused holes, especially those leading outdoors, with expanding foam to prevent pests.
Inspect balcony floor-to-ceiling glass for gaps and seal them with sealant. My home had a large gap between panes, and the railing was distant from the glass, causing drafts even with closed windows. The sealant looks rough initially, but you can trim it neatly after it dries.

Design Showcase

Time for the reveal! Here’s how the design turned out in real life. These photos were taken four months after I moved in, once I’d settled into the space and everything felt just right.

Living and Dining Room

The living room greets you upon entry. The coffee table’s a bit messy, but that’s everyday life.

I initially didn’t plan on having the elliptical in the living room; I thought it’d block the walkway. I hadn’t factored in space for fitness equipment. After some back-and-forth with my girlfriend (she insisted on watching TV while exercising), I realized putting it in the multi-purpose room, as planned, meant it’d gather dust. So, the elliptical stayed.

Wallpaper’s behind the sofa, within the plaster line. Why not on the TV wall? I’m a storage nut and always want to keep my options open for future shelving or cabinets.

The TV sits on the stand, not mounted.

Fake flowers in a vase on the TV stand.

The dining room sideboard, with lighting in the mosaic area. I’d envisioned decorative pieces here, but after four months, I couldn’t sacrifice the convenience. It’s now home to daily essentials and snacks.

The main walkway, the only path to the bedrooms. A key feature: the blue mosaic baseboard – we call it the “swimming pool.”

The dining room. The four chairs (gray, blue, and brown) follow a color scheme. The painting hides the electrical box.

The dining room chandelier’s the only decorative light fixture. Elsewhere, it’s all large, square LED panels.

Kitchen

First look into the kitchen. This side has the stove, with standard-sized base cabinets.

Opposite the stove is the countertop, linked by the sink cabinet. The sink dishwasher – the kitchen’s priciest item – is here. The countertop base cabinets are shallower (35cm deep). Yep, even in this small kitchen, I went for a U-shaped cabinet. Storage fanatic…

No wasted corners.

This white 5-tier trolley fits perfectly, down to the centimeter.

The prep area, with task lighting.

This kitchen gadget sticks firmly, no drilling needed. Seriously, using the kitchen wall well adds at least 20% more storage.

Bathroom

The bathroom showcases the home’s main color. My style’s roughly 60% modern, 25% Mediterranean, 10% American, and 5% Nordic. The ivory white cabinet is one of the few American-style pieces.

Shower head and shelf.

View from the shower.

Towel rack by the door.

A unique floor drain in the shower – a bit of fun. Pricey, but it’ll be used for decades.

Multi-purpose Room

Next to the bathroom is this north-facing room. I haven’t assigned a specific purpose yet, and it won’t be a bedroom.

It’s primarily a walk-in closet, with a wall of wardrobes! It could become a playroom, music room, art studio, or study – we’ll see.

Unused floor fans are stored here, under dust covers.

Balcony

The balcony’s my biggest floor plan disappointment. It’s long and narrow, like Chile. It barely functions as a utility balcony; a leisure balcony’s impossible.

The curtain behind the washing machine? It hides ugly pipes and a window overlooking the AC unit.

The laundry sink’s at the other end.

Master Bedroom

Let’s head to the main bedroom. Wallpaper’s behind the bed. Where are the pillows? A cabinet has a strong smell, so we’re still sleeping in the second bedroom. This is an old duvet cover for dust.

The master bedroom wardrobe’s huge, and the bed has storage too. I know, I’m obsessed.

The bay window – the best sunlight in the house.

A six-drawer dresser and computer desk at the foot of the bed. White and blue are the main colors, with red, pink, and brown as accents.

Second Bedroom

This is the guest room/future children’s room. Wallpaper divides it: darker inside for sleeping, brighter outside for work/study.

Beyond the wallpaper line, it’s all pure white.

An open-sided fabric table serves as a bedside table.

The resting area. The room’s small, with beams and columns, but this layout maximizes the space.

Mistakes

First-time renovator here, so of course, there are regrets:

I could’ve removed the door/wall between the living room and balcony, using curtains for separation, making the balcony feel larger.
The sideboard’s upper part should have doors to minimize cleaning. The design’s tacky – I don’t know how I approved it.
The mosaic tiles on the sideboard don’t look great. They’re stunning in the store, but dull in this dim corner. Single-direction lighting doesn’t suit them. Colored tape or fabric might be better.
The hanging cabinet right of the range hood was a mistake. Removing it would’ve allowed the hood/stove to shift, creating a larger corner countertop and a better workflow. Now, I prep on the shallow counter behind.
The toilet paper holder’s placement is awkward – too far back, requiring a two-handed reach.
The TV stand was a mismatch. I took a chance on a dark brown Nordic style, and it clashed. I sold it at a loss and bought a matching one, missing the set discount.
Too many wood grain colors, poorly controlled. The beds are black walnut (reddish-brown); the dining table legs are ash (brownish-green); the chair legs are pine (light, reddish); the TV stand/coffee table legs are more yellow. It’s driving me nuts.

Final Thoughts

The renovation took over six months – constant trips to the new home, building material markets, furniture stores, and showrooms. I didn’t have a car then, relying on ride-hailing. Looking back, it was intense, sometimes 7-8 trips a day.

These notes reflect my living habits. Others will have different needs. This is about understanding your lifestyle and planning accordingly.

I shared a draft with friends, and they were amazed by the detail, saying renovation’s exhausting and they’d leave it to experts. I asked myself: was all this energy worth it? To answer that, we need another question:

What’s the point of home renovation?

It’s not just “making your place pretty.” It made me focus on life’s details and learn a lot. Examining each detail is envisioning a lifestyle, reviewing the past, and considering the future. It’s a fresh start, a life revolution – from chaos to order, from getting by to quality. These were unexpected benefits.

As a designer, loving life is my calling. My home should be my best work.

The Texting Experience

hi@victor42.work (Victor42) — Sun, 11 Dec 2016 01:20:29 +0000

Image from Dribbble.

The title might be misleading. I’m not discussing the UX of messaging apps, but the reading experience of chat content.

Number OCD

My supervisor recently asked for my phone and ID numbers for some paperwork. We were chatting on DingTalk. I replied “OK” and sent:

×× (My Name) Phone: 186×××××××× ID: 360103××××××××××××

I stared at the message and thought I could do better. So, I resent it:

×× (My Name) Phone: 186 ×××× ×××× ID: 360 103 ×××× ×××× ××××

I mentioned it was easier to read. My supervisor quipped, “OCD kicking in again, eh?” I replied, a bit pretentiously, “User experience is everywhere,” followed by a grinning emoji.

That was that. But since I’d mentioned UX, I figured I’d explore it further. It wasn’t just me being nitpicky. My initial message wasn’t exactly user-friendly.

Formatting a reply is a design task, tied to the user and goal. The user was clear: my supervisor on DingTalk mobile. But the goal? I hadn’t asked. She needed the numbers for documents, but she wouldn’t be preparing them herself. She’d pass the info along. How? Jot it down or forward it? That’s a big difference!

Writing it Down

If she was writing it down, it’d likely be the old-fashioned “read-memorize-write” method. I can’t control the writing, but the reading and memorizing depend on my formatting.

Research suggests people can only remember about 7 digits at a time. Anything longer needs chunking. We remember five and seven-character poems. Nine-character poems exist, but they’re rare. Qu Yuan’s Li Sao is an exception, but even there, most meaningful content stays within 7 characters, thanks to the modal particle “兮”.

Seven is the limit, though, not ideal. Think about verification codes: usually 4 or 6 digits. We can recall 4 digits easily, but 6-digit codes get broken into 3+3. This suggests the sweet spot for easy recall is under 6 characters. China’s 11-digit phone numbers are commonly read as 3+4+4. We say, “Call my 186 number.” Online, the middle 4 digits are often masked. We also tend to remember the last 4 digits. This shows how ingrained this grouping is. ID numbers aren’t usually split up visually, but they have inherent sections: 6 (region) + 4 (year) + 4 (month/day) + 4 (last four). That’s likely how most people memorize them.

As an aside, is the magic number 4 or 5? I lean towards 4, though I lack hard proof. But the examples above hint at it. Bank card numbers, too: different lengths, but when deliberately grouped, they never exceed 4 digits per chunk.

However you format a long number string, that’s how the recipient will read and memorize it. We should all offer this courtesy to each other.

Forwarding on Mobile

Back to the point. If the numbers were to be forwarded and copied into a system, things change entirely.

I couldn’t know if the system handled spaces. Pasting the “easy-read” format might result in “186 ×××× ××”. Also, my supervisor, on Android, couldn’t use clipboard tools like Pin. Extracting the numbers would be a hassle.

Mobile IM often forces you to copy the entire message.

So, for copying from IM, the best format is:

Name:

×× Phone: 186×××××××× ID: 360103××××××××××××

This reminds me of my WeChat public account. I mostly just post articles, so I set up an auto-reply directing people to my Weibo.

For a while, the auto-reply just said: “I don’t check this account often. Contact me via private message on Sina Weibo: @我_ColaChan.”

Then I messaged myself. It was a pain to copy just the nickname. So I changed it: “I don’t check this account often. Contact me on Sina Weibo. Reply ‘Weibo’ for my username.” Replying “Weibo” triggered a message with just “@我_ColaChan”.

An extra step, but much easier to extract the information.

Eliminating Typos

Text chat isn’t just about numbers. Everyday conversation is key. What defines “good” or “bad” here?

In middle school, we didn’t have cell phones. We chatted on QQ via computer. A classmate once said chatting with me was reassuring. Why? Because I never made typos.

Thinking back, it’s true. Life’s faster now, and with auto-suggestions, typos happen. But attitude matters. I proofread my messages and always fix typos.

Many people don’t check their messages. They don’t check after typing, or even during. They just fire off a message. Even if they spot a mistake, they often can’t be bothered to fix it, assuming the other person will get it. This leads to gibberish like “Enai” (should be “En Ai,” meaning “love”) or “Bu hui ni o” (should be “Bu hui you ni o,” meaning “won’t have you”). Misspelled keywords require serious guesswork, even considering homophones and keyboard layouts. I’ve dealt with printers and developers whose messages are incredibly hard to decipher. Sure, being busy is understandable. But typo-free chat is a better experience for everyone.

Language is Serious

I’ve gotten messages like this before, a jumbled mess:

are you there Does UI need hand-drawing? Can’t do it without hand-drawing? No response to resume Is it not enough experience What are the ui specifications do I need to look at both ios andriod Are you there are you there、 What to do without a portfolio?

That’s not verbatim, but it captures the essence. Missing punctuation, misused punctuation, spaces instead of commas, extra spaces, mixed Chinese and English punctuation, misspelled words, misused words, no clear topics… It’s a catalog of common communication errors.

Language’s main purpose is communication. It’s the agreed-upon system for expressing concepts. Ignoring language norms is like disconnecting from that system. It’s a big deal. Even in casual texts, I think it’s important to use “的,” “地,” and “得” correctly. These details are often overlooked. It’s not about language purity; it’s about making things easier for the reader. Standard language helps.

The Mindset of Writing a Press Release

Think of your messages like press releases. Unless you’re just shooting the breeze with a close friend, there’s usually a point.

The jumbled message above, besides being imprecise, suffers from scattered topics. How do you even answer that? If you’re confused and need help, write a clear request for help. The example above isn’t even an outline.

Clear messages have structure. Start with a sentence stating the topic, then elaborate, point by point. If you’re informing someone, state the key facts. If you need something, explain why, and ideally, offer a solution. If you’re reporting a problem, give enough details for troubleshooting.

When friends ask for computer help, they often just say, “My computer’s broken, help!” And then they wait for me to ask questions. I wish just once someone would proactively tell me the error message, if it’s happened before, when it started, what they did before and after, what they tried, and what the results were.

Imagine a robbery. The police arrive, and the victim just keeps saying, “I’ve been robbed! Catch the thief!” The case won’t get solved.

Focused conversations are efficient. A ten-minute explanation can drag on for an hour due to poor communication. Wasting someone’s time is a cardinal sin.

Modern Big-Character Posters

China has a thing for slogan banners and posters. For urban planning: “Gather all forces, plan water management, build a harmonious city, promote the water town image, and establish a legacy.” For construction safety: “Safety creates happiness, negligence brings pain. Safety is efficiency, safety is happiness.” For hospitals: “Create a safe hospital, build harmonious doctor-patient relations.”

Let’s not even get into the slogans themselves. The point is, the people behind these didn’t consider their audience or tone. A slogan near a military area was actually good: “Obey the Party’s command, be able to win battles, and have a good work style.” It’s hierarchical and logical. Most importantly, it’s clear and unambiguous.

News and official outlets use vague language to be inclusive and cover all bases. But this isn’t just a media thing. We’ve all encountered people who write in an overly formal or flowery style at work. Think of those landing pages: a confusing illustration with shopping carts and money flying everywhere, and text like, “Enjoy endless discounts.”

I remember one ad clearly. I forget the brand, but it showed traditional soy sauce making. The spokesperson, standing by a field of drying soybeans, said plainly, “Just dry it here, just rely on the sun.” A less direct approach might have been: “XX hectares of soybean processing, natural air-drying.” That’s uninspiring. No matter how accurate or fancy, it lacks imagery.

You can see the ad’s directness here: http://t.cn/RcxcZ3I.

It reminds me of a joke with my classmates:

“The rolling Yangtze River flows eastward…"

“Get to the point!" “The river flows east!"

Topic Guardian

After I started working, someone commented on my chat style again, saying I was “chatting with my life.” They explained that with others, it’s a back-and-forth. With me, they’d see me “typing” for ages, sometimes over ten minutes. They’d return from getting water to find a massive, multi-paragraph message from me, addressing every tangent from the earlier conversation.

So, I do have that habit! I don’t let topics die; I need closure. I can see how this would be tiring in casual chats. I don’t want to be like this. I’d prefer to stick to one thing. But once the conversation derails, even if it’s not my fault, I feel compelled to keep it going. If the other person is fine with this style, I’m the one who ends up exhausted.

Long messages have pros and cons. The downside is making people wait. But the upside is preventing further tangents. If, mid-reply, something reminds the other person of something else, they might interrupt, creating more branches. It’s very common.

This is a dilemma. Wasting time is bad, so shouldn’t I avoid long waits? But if I don’t control the topics, forgotten points might need revisiting later, which also wastes time. In text chat, prioritizing the other person’s experience means choosing the less time-consuming option. Letting topics explode seems like a lesser evil.

Oh, Hehe, [Grin]

These are the worst replies, the ultimate conversation killers. Why? They’re short and meaningless, yes. But the real problem is they don’t reflect the sender’s state. They replied, but didn’t actually respond. You don’t know if they understood; they could have been typing those replies mindlessly.

It’s like sending an email with no loading indicator or confirmation. The compose window stays open. You close it, and the email’s nowhere: not in Sent, Outbox, Drafts, Inbox, Junk, or Spam. WTF?

It sounds ridiculous, but these conversations happen all the time. An Android developer asked me for an asset. I asked how he planned to use it – fixed size or .9 patch? He replied, “Okay.” I thought he’d hit send accidentally. But after 30 seconds, not even a “typing” indicator. The topic died, forcing me to start a new round of questions.

Tech people should understand feedback. The TCP/IP handshake is a prime example: Client sends to server: “I want to connect.” Server replies: “Is this what you sent? Is it you?” Client confirms: “Yes, it’s me, let’s connect.”

Humans are good at context, machines less so. But even with context, clear feedback is crucial. At the very least, reply with “OK” or “Received.” If there’s a choice, repeat the chosen option.

Conclusion

Looking back at my IM interactions, there’s a clear divide. Some people are a breeze to communicate with; others make you want to just call. The same task, expressed differently in text, leads to vastly different experiences.

Experience design is everywhere, and it’s practical. Strip away the methodologies, and you’re left with one core principle: Put yourself in the other person’s shoes.

My Roommate's Ride Home

hi@victor42.work (Victor42) — Thu, 19 May 2016 16:42:02 +0000

This true story about interaction design gave me some insights into ride-hailing apps. It all started with my old roommate.

The Roommate

We called my college roommate “Boss” – he was assertive, thought differently, and often dropped unexpected truth bombs. He’s an embedded systems engineer, utterly obsessed with the field. He’s also a hardware whiz.

Around 4 PM, he used Didi (China’s Uber) to visit me for dinner. He lived about 6km away. We hadn’t seen each other in a while, so we had a lot to catch up on.

We started talking about a classmate’s wedding, and the conversation naturally drifted to his area of expertise. He went on about algorithms, development philosophies, different ways to control electric motors, and even battery management systems for electric cars. That’s just how he is. He knows I don’t get most of it, but he keeps going, regardless. Even though I only grasped the basics, I listened patiently. His passion is infectious; it’s not painful to hear him talk about this stuff. He reminds me of my calculus professor, who would pause mid-lecture, reflect, and exclaim, “Isn’t the proof of this equation beautiful!” I hated that class, but I respected that professor.

Our major was electronic information. Maybe less than 10% of the class understood the core courses, and we were both in the majority. In our senior year, it was like a switch flipped. He suddenly became super interested in our major, catching up on previous courses and studying beyond the textbooks. He later told me he finally saw how this knowledge applied to real projects – it was actually useful! That’s when his passion ignited. With his dedication, I’m sure he’s a big shot in the industry now.

But he’s clueless about internet products. He still uses an iPhone 4, with very few apps, all on one screen. No folders, no icon organization, and the dock still has the four default iOS apps. It shows that even someone as studious as him won’t waste time on things he doesn’t care about.

I asked if he took a regular ride or carpooled (I wasn’t precise, because I also use Uber, so “regular ride” meant Didi’s Express option). He wasn’t sure, saying it was probably a regular ride since there were no other passengers. I asked the cost, and he said 14 yuan.

After dinner, around 9 PM, he used Didi to head back. I watched him, and noticed a few interesting things:

Calling a Ride

He first tried hailing a taxi, hesitated, then tapped “Hitch” (carpooling). Realizing I was watching, he asked, “Should I choose Hitch?”

I suggested Express, thinking it was what he used to get here, and it would be familiar.

He selected Express and entered his destination. He hadn’t set “Home” or “Work” addresses, so he had to type it in. He tapped the pickup location first, but didn’t realize it.

As he was about to enter his home address, I pointed it out and gestured to the text prompt: “Where are you?”.

He backed out, tapped the destination, but then realized he didn’t remember the exact address. So he backed out again, tapped the top-left menu, and went to “Trips.” He tried to copy the pickup address from his earlier ride, but couldn’t.

He went back to the ride-hailing screen and typed in his home address. The list showed several results: shops, bus stops. He just waited. I didn’t say anything, observing.

But his eyes had left the phone, and his hand lowered. He thought he’d successfully called a ride.

I had to tell him again to choose an address to confirm his destination.

He picked a bus stop, tapped “Call,” and finally got a car.

However, his Express ride back, without carpooling, only cost 5 yuan. So I guessed he probably didn’t take Express on his way here.

The Problem

After he left, I wrote down the process. Thinking about his actions and mindset, I had some insights.

His ultimate goal was to go home. Unsure how the app would react, he assumed it would understand his intentions like a real person. Since you picked me up from home earlier, you should know where my home is, and I want to go back there. His struggle to copy the earlier pickup address clearly showed his goal: a return trip – going back where he came from.

But reality wasn’t perfect. Even a real person can’t always understand another’s thoughts.

The gap between the result and his expectation created a problem. The root cause wasn’t that he didn’t remember his address; it was that he thought Didi should know his home, but it didn’t. The “Home” and “Work” addresses are designed to solve this. However, few people proactively set these, even some IT professionals.

This got me thinking. Aren’t these two separate issues?

Didi can’t intelligently know or guess my home.
Didi doesn’t offer a convenient return trip option.

In my roommate’s case, “going home” and “return trip” overlapped. But they’re not always the same, so let’s consider them separately:

Going Home

From a mental model perspective, going home is switching between “at home” and “outside.” Calling a ride to leave exits the “at home” state. Until you step back inside, you’re “outside.”

For example, if someone gets a call about a package while they’re out, they’d say, “I’m not home,” or “I’m out, please leave it with management.”

“Outside” is uncertain, but “home” is relatively fixed. By analyzing historical trips, visit frequency, and arrival times, it should be possible to guess. For users without set addresses, if the app detects frequent trips to the same area, it could prompt: “We noticed you often go to [location]. Is that your home? Or work?” Recommendations and guidance could encourage users to set addresses, making future trips easier.

Return Trip

Is a return trip common? I don’t have the data. But this scenario is typical: going from home (or work) to a place for leisure or errands, and returning the same way on the same day.

If it’s between two frequent places, “return trip” doesn’t quite fit. We’d think “going home” or “going to work,” part of our routine. A return trip implies a temporary, less frequent location, subconsciously feeling like a short “business trip” or “outing.” Like people going home for the holidays; when it ends, we need a “return” ticket to the city we live in. The destination doesn’t matter; the key is that having come here, we can get back. The “return trip” concept becomes clear.

But a meaningful “return trip” concept doesn’t mean a “return trip” feature is meaningful. The most obvious approach is a “Return Trip” button on the main screen, allowing a one-tap ride to the last trip’s starting point. But there are problems. What if the user hailed a taxi on the street? Or got a ride from a friend? The user wants to go back; they don’t care how they got there. The app can’t know this, so a return trip option would just add confusion.

The key issues are:

How can Didi track user travel history using other methods?
How can Didi know if a destination is temporary?

A mobile app alone can’t solve these. Therefore, the “return trip” concept might be meaningful, but it’s not something a single mode of transportation can provide.

A Newbie's Perspective

hi@victor42.work (Victor42) — Sun, 13 Sep 2015 15:50:00 +0000

Work had slowed down, and with some personal stuff happening, I’d fallen out of touch with tech and design. After a few days, I felt off, like I was losing my creative spark.

Normally, I’d dive back into work or explore new designs. But this time, I went further. I suspected something valuable was hidden in that “ignorance is bliss” mindset.

So, for two months, I avoided design blogs, tech news, and industry trends. I cut myself off as much as I could. I stuck to basic work, kept up my weekly translations, and that was it. My free time was all about personal life: hanging out with friends, dining out, sleeping in, gaming, reading, and watching movies. It was a great life, honestly, but it felt off.

Initially, I was anxious, feeling myself getting rusty. Design ideas became scarce. Then, I adapted, even got comfortable – a no-brainer, right? Finally, I was immersed. A different life, a different mindset, with its own way of operating and perceiving. And new ideas started emerging, the most valuable part of this whole experiment – I’d successfully become a tech newbie, seeing the world from their perspective: what mattered to them, and what didn’t.

Newbies Aren’t Dumb, They Just Don’t Care

We tech and design people tend to look down on newbies. Like, “You don’t know you can change your profile pic by tapping? You turned off notifications and now you’re complaining? You left your files at home? Heard of the cloud?”

Now, I’m one of them, and I understand the “tech ignorance.” My tech instincts haven’t disappeared; I can still figure things out faster than most. But now, I’m impatient. I have novels to read and games to play.

My 16GB iPhone 5 was constantly complaining about low storage. I used to check storage, meticulously clear caches, and delete downloaded data. I still can’t remember which apps let you clear the cache and which don’t. As a newbie, I found the easiest, most drastic solution: delete WeChat and QQ, then reinstall. Boom, hundreds of MBs freed up.

It sounds extreme, but it’s logical. Deleting, reinstalling, and logging back in takes five minutes, max. I know exactly how to do it. Clearing caches might take two minutes, but that “might” is key. What if it takes 15 minutes and doesn’t even work?

If I don’t view my phone as “fun,” I won’t waste an extra minute on it. It’s not central to my life.

Notifications, Updates… Who Cares?

My friends, Dee and Shuai, both in IT, have completely different phone setups. Dee’s is a classic product manager: tons of folders, neatly organized by function. Shuai’s is the opposite: few folders, many screens, endless scrolling, and red notification badges everywhere. On his home screen, the App Store badge showed over 70 updates.

It’s the classic “red dot OCD” debate. I used to update everything, open every notification (though not necessarily read them). It was like doing daily quests in a game – I had to clear those exclamation marks before logging off. Dee used to tease Shuai, “You’re a front-end engineer, and your phone looks like this?” I didn’t chime in, but I did think it reflected someone’s self-discipline.

Turns out… it’s not that at all. At some point, I became indifferent to the red dots, probably because of WeChat Official Accounts. An app can only push so many notifications; you can clear them quickly. But subscribed accounts? You follow first, worry about reading later. When notifications flood in, you become numb, and the red dots lose their significance. WeChat’s like, “Blame me?” You’re like, “Blame me?” Nobody’s fault.

It’s like a zombie apocalypse. I enter a supermarket with a gun. If there are two zombies, I’ll eliminate them and lock the door. If there’s a horde, even with enough canned food for 20 years, I’m out of there.

Lately, apps have gotten creative with their App Store update notes. Opera Coast used to write clever one-liners; Medium wrote poems. I’d chuckle, briefly amused. Then… I wouldn’t open the app. I’d just return to the home screen, every time.

What the Heck is a “Field”?

I haven’t touched front-end tech in about a year and a half. I don’t need to anymore. I have to strain to recall some tech concepts. Now, actively avoiding tech, I was slightly worried this might be a turning point in my design career.

One day, I was signing up on a website, and it said “This field is required” next to an input box. I knew what “field” meant, but it felt alien. What the heck is a “field”? I stared at the words, wondering if the developer had mistyped something.

And “cache,” mentioned earlier, I’m going to ask my mom this year, “What do you think ‘Clear local cache’ means?” If she says it clears her location info, I’ll take it, because I’ve thought that too.

At work, there’s a constant debate about a design detail: after a complex process, should there be a “back” button? Where should it be placed? As a newbie, my actions showed me it’s irrelevant. I follow the product’s flow, going in and out step by step, naturally. Let me paint the picture: task complete – press home – (if it’s a battery hog like maps, double-tap home to close it) – lock screen – back in pocket. I found that excessive, so after some lazy attempts, I figured it out: task complete – lock screen – back in pocket. The key is “back in pocket”! That’s my end of the process, not exiting your feature.

Back to being a newbie, holding this perplexing glass screen, I just want to share a song from NetEase Cloud Music to Sina Weibo. It says my Weibo authorization expired, so I need to log in again. I patiently enter my username and password. This happens frequently, in other apps too. But for the first time, I instinctively blamed NetEase, not Weibo. Then I realized, NetEase was the scapegoat.

If I were a true newbie, I might never realize that, and NetEase would be forever blamed. Tech details, product logic, I don’t know, and I don’t care. The situation tells me someone’s at fault. Maybe I slip on a wet floor in a restaurant, and a server apologizes for the cleaning crew, and that’s that.

Are You Reminding Me, or Am I Reminding You?

You rarely see people using Siri, right? I understand. Talking to a device in public, hoping for the correct response, feels awkward. It’s noisy, and it might pick up random sounds. Plus, it’s a privacy concern; people know your business.

But, it works. I’m walking home, listening to music, and remember I need tissues. I’ll forget by dinner. So, I long-press the earphone button to activate Siri: “Remind me to buy tissues at 9 PM.” No need to even pull out my phone.

I used to be a productivity app fanatic: email, calendar, notes – all front and center on my home screen… though I rarely used them. I tried every to-do app, so many well-designed ones, each with unique features. I settled on Any.do, loving its simplicity. Pull down to add a task, swipe right to complete. I categorized tasks by context: “buy laundry detergent” under “life,” “update annotations” under “work,” “research Pixate” under “learning.” Tasks with deadlines went into their calendar app, Cal. I was meticulously managing myself, precisely as Any.do intended.

Then I lazily used Siri once, and I couldn’t go back. I’m a newbie, not a pro. Bamboo reminds me to buy fruit; HR reminds me to make a name card for the new hire. What’s the difference? At some point, I remember something I need to do, and that’s all. Why report back to the to-do app afterward? Is it reminding me, or am I reminding it?

Once the reminder pops up, I don’t need it anymore. If you could do it for me, great, tell me the result. But you can’t, so you remind me, and I do it myself. No app can cook me scrambled eggs with tomatoes. Finishing the task on time is the best self-management. Who cares if the to-do app is a mess?

A good servant comes and goes as needed.

We’re Penny-Pinchers, Especially with Time and Money

I moved to a place with a KFC, my go-to when I can’t decide on dinner. KFC is great; they have mobile payments, so I only need cash for my bus fare.

Alipay has had an 8.8% discount forever, and Bamboo and I always get it before ordering. Her phone is still on 2G, so it stalled halfway. We found a table, struggled with it for 10 minutes, finally got the discount, and ordered.

Sometimes I go alone, same no-network problem, probably the carrier’s fault. I’m too impatient to deal with it, and I don’t want to hold up the line. Five bucks isn’t worth two minutes of a hungry queue’s time. If mobile payment fails, I just use cash. Pull it out, hand it over, get the change, pocket it, done. And I don’t have to stare at a tiny screen, trying to tap even tinier buttons.

Same situation, two completely different reactions. Bamboo wants the discount, even if it takes 10 minutes. I’m starving after walking across Hangzhou; I don’t want to wait a second. Neither has anything to do with mobile payments.

Looking at my WeChat history with Bamboo, it’s nothing significant. We see each other all day; urgent matters are a phone call, non-urgent things can wait till we’re home. Even so, we’re constantly sending each other food delivery coupons. The shifts in our chat history are revealing.

For a while, we’d send each other Ele.me coupons around lunchtime. One day, she started sending Meituan coupons; I kept sending Ele.me. After a few days, I switched to Meituan too. Then, I started sending Ele.me again, and she followed. Recently, we both switched back to Meituan, almost at the same time. What happened?

I randomly remembered this and asked Bamboo why we kept switching. She accused me of copying her; I said she copied me later. We hashed it out and reached the obvious conclusion: Ele.me had a “15 RMB off 8 RMB” deal, so we started ordering takeout frequently. The discount dropped to “15 RMB off 6 RMB,” and Bamboo discovered Meituan’s “15 RMB off 7 RMB.” I was slower, but one day I felt like it and installed it, and rarely opened Ele.me after that. But I didn’t delete it, until I saw it had a “20 RMB off 12 RMB” deal, and I started using it again, keeping Meituan too. Obviously, Bamboo noticed as well. It didn’t last long, of course, it was 12 RMB off! We watched it drop to “15 RMB off 8 RMB,” then “10 RMB off 6 RMB.” And we happily started sending each other Meituan coupons again.

If you’re going to have a price war, nobody cares about usability.

Final Thoughts

Now, turn on your phone, glance at your home screen icons. Think, are they trying their hardest to get your attention? Look here, look here, look here! But I’m a newbie; I just want to check the bus route to the subway. Everyone’s enthusiasm stresses me out. I dive into the maps app, find my route, shut off my phone without looking back, and go on my way.

My two months as a newbie felt schizophrenic. In a good mood, I’d tap anything, download random games and apps, and forget how I found them the next day. In a bad mood, everything was noise. I’d pull down the notification center, it was a nightmare, and I’d silently push it back up, pretending I hadn’t seen anything.

It’s hard to grasp; people are so unstable. Newbies are fickle; they change their minds; opening an app is basically mood-based. During this time, I felt like my thinking was stream-of-consciousness, my actions were “goto” statements, unpredictable.

I thought the newbie state was temporary, but it’s a great feeling, and part of it has permanently influenced me. There’s more to say, but I don’t want to write anymore. While writing this, the designer in me is resurfacing, the newbie feeling is fading, and there are some mindsets and perspectives I don’t want to give up.

The conclusion might be a bit pessimistic, or maybe there’s no constructive conclusion at all. But during this time, I experienced what was real, and maybe this is what tech life should be.

Basic Knowledge of Mobile Dimensions

hi@victor42.work (Victor42) — Sun, 19 Apr 2015 19:55:00 +0000

If you’re new to mobile design and development, you’ve likely struggled with dimensions. This guide breaks down the basics for beginners.

The Situation

Mobile screens come in many sizes. Fragmentation, especially on Android, is a challenge. You’ll encounter resolutions like 480x800, 480x854, 540x960, 720x1280, 1080x1920, and even 2K screens. iPhones have joined the fragmentation party: 640x960, 640x1136, 750x1334, 1242x2208.

Don’t panic. Most apps and sites display well across screens. There’s a method to the madness.

Pixel Density

Screens are made of tiny pixels. The resolutions mentioned above are the screen’s actual pixel dimensions. A 480x800 screen has 800 rows and 480 columns of pixels. Each pixel emits colored light to create images. However, a phone’s physical size doesn’t scale proportionally with its pixel dimensions. For example, the iPhone 3GS (320x480 pixels) and iPhone 4S (640x960 pixels) are both 3.5 inches, but the 4S has double the pixels.

This is where pixel density (PPI, or pixels per inch) comes in. It bridges the digital and physical worlds.

PPI is the number of pixels in one inch. An inch is a fixed length (2.54 cm). Higher PPI means a sharper display. Retina screens are clearer because their PPI is doubled.

Scaling and Logical Pixels

Consider the iPhone 3GS and 4S again. Imagine an email list. If designed like a PC webpage, the 3GS might show 4-5 rows, the 4S 9-10, with each row being very wide. But the phones are the same size! If displayed this way, content legible on the 3GS would be tiny on the 4S.

In reality, they look similar. Retina screens use 2x2 pixels to represent 1 pixel. A 44-pixel-high top bar on a regular screen uses 88 pixels on a Retina screen, making it appear twice as large, matching the 3GS’s appearance but with greater clarity.

Older iOS apps often had “@2x” and non-"@2x" versions of images. iOS automatically chose the correct one; Android works similarly.

Apple used the regular screen as a baseline, with a 2x scaling factor for Retina screens (3x for iPhone 6 Plus). Dividing actual pixels by the scaling factor gives you logical pixel dimensions. Screens with the same logical pixels display content similarly.

Android’s approach is similar but more involved. Due to the wide range of Android screen sizes, Android groups devices by pixel density, assigning scaling factors to each group for visual consistency. iOS and Android handle PPI calculations for us.

Screens around 120 PPI are classified as ldpi, around 160 as mdpi, and so on. Scaling factors are:

ldpi [0.75x]
mdpi [1x]
hdpi [1.5x]
xhdpi [2x]
xxhdpi [3x]
xxxhdpi [4x]

iPhone scaling factors are simpler. But with many Android phones, how do we categorize them? Here’s a table (Umeng data, Oct 2014 - Mar 2015):

Based on the market then, we can categorize phone resolutions (this isn’t exhaustive, but was relevant for about a year):

ldpi: Nearly extinct.
mdpi [320x480]: (Under 5% market share; new phones won’t use this; screens are usually tiny).
hdpi [480x800, 480x854, 540x960]: (Older/current low-end phones, screens around 3.5/4.7-5.0 inches).
xhdpi [720x1280]: (Older mid-range/current low-to-mid-range phones, screens around 4.7-5.0/5.0-5.5 inches).
xxhdpi [1080x1920]: (Older high-end/current mid-to-high-end phones, screens usually above 5.0 inches).
xxxhdpi [1440x2560]: (A few 2K phones, e.g., Google Nexus 6).

mdpi (1x) is the baseline. Devices with different densities are multiplied by their scaling factor to achieve a similar visual effect.

However, Android logical pixel dimensions aren’t uniform. For example, 480x800 (hdpi) and 1080x1920 (xxhdpi) have logical dimensions of 320x533 and 360x640, respectively. The latter is wider and taller, displaying more. So, even with scaling, displays on various Android devices aren’t perfectly identical.

Units

Logical pixel dimensions determine how things look. iOS and Android use units for these: “pt” (points) for iOS, and “dp” (density-independent pixels) for Android. They’re essentially the same.

Conversion between units depends on the scaling factor:

1x: 1pt = 1dp = 1px (mdpi, iPhone 3GS)
1.5x: 1pt = 1dp = 1.5px (hdpi)
2x: 1pt = 1dp = 2px (xhdpi, iPhone 4S/5/6)
3x: 1pt = 1dp = 3px (xxhdpi, iPhone 6 Plus)
4x: 1pt = 1dp = 4px (xxxhdpi)

We should think in logical pixels. Some Android designers use 1080x1920 canvases, others 720x1280, leading to inconsistent UI element sizes. The minimum tappable area on Android is 48x48dp. On xhdpi, a button should be at least 96x96px; on xxhdpi, 144x144px.

Regardless of canvas size, design for the baseline, and developers need logical pixel dimensions. For clarity, use logical pixels in specs and discussions. Avoid saying, “The tab bar is 96 pixels high, designed for xhdpi.”

What about Web?

The absolute unit for mobile web is still “px” in code, but the principle is the same. Pixel density affects all apps, including browsers. Front-end tech can leverage this. One line of code lets the browser render the page using the app’s scaling method.

Use this test page http://greenzorro.github.io/demo/basic/响应式断点.html to check your device’s logical width.

The iPhone 5S (640x1136, scaling factor 2) is seen by the browser as 320x568 (baseline). Design and develop using logical pixels. You’ll need to prepare 2x images and scale them down to 1x in code for sharpness.

Practical Application

Here’s how to set up your canvas for iOS, Android, and Web. First, a Photoshop tip:

Think in logical pixels. In Photoshop, set “Units & Rulers” to “Points” (“pt”). Use this for iOS, Android, or Web. Remember platform-specific unit names (pt, dp).

Adjust scaling with DPI (actually PPI) in Image Size. Screen designs use 72 DPI; print uses 300. Why?

300 DPI relates to the human eye’s resolving power. More pixels per inch (DPI) means greater clarity. 300 DPI creates realism; 10 DPI would look like a mosaic.

72 DPI has historical roots. Early Macs had 72 DPI displays. Setting Photoshop to 72 DPI matched on-screen and print sizes. 72 DPI became a standard.

To adjust scaling: 72 DPI is 1x. 144 DPI (72 x 2) is a 2x scaling factor.

Canvas settings:

iPhone

iPhone sizes vary (in logical pixels). For one design covering all iPhones, choose a moderate size.

iPhone 5/5S (2x scaling, 320x568 logical pixels) is common. iPhone 6 (2x, 375x667) is gaining popularity.

Designing for either accommodates the 4S and doesn’t look too empty on the 6 Plus.

For the 6 Plus, 3x images are scaled from 2x, so ensure bitmaps stay sharp.

Android

Android fragmentation is manageable. Logical dimensions are more unified: 360x640. Choose a scaling factor. For xhdpi, DPI is 144 (72 x 2). For xxhdpi, it’s 216 (72 x 3).

Older 480px-width devices will show less content. Keep important content near the top/middle.

These devices are fading. Those in use are likely feature phones; user experience is less critical. It’s okay to disregard them.

Web

There’s no single standard. A common approach is designing for the iPhone 5 (2x, 320x568).

This is practical: 2x screens are common on iOS and Android, and it’s the smallest 2x size, leading to smaller images and faster loading. The downside: images might not be perfectly sharp on 3x devices.

For image quality over speed, design for the iPhone 6 Plus (3x, 414x736).

Conclusion

Mobile dimensions are more complex than PC, with scaling being key. But scaling brings different sizes to a common level, allowing one design to adapt. This makes it easier to understand.

Creating a Circular Progress Bar in AE

hi@victor42.work (Victor42) — Tue, 10 Feb 2015 15:16:00 +0000

[Update: Simpler methods exist (see the end of the post). However, the techniques here are still valuable practice.]

I’ve been using After Effects for about a year. It’s fun, useful, and easy to learn, especially with prior Flash experience. Complex UI animations are combinations of basic movements, rotations, scaling, opacity, and color changes. Online resources abound; I learned from this video series.

This circular progress bar requires a bit more thought.

The Idea

Circular progress bars are unique. They rotate while selectively revealing parts of the circle, which isn’t immediately straightforward.

I drew inspiration from a CSS3 circular progress bar I created earlier. The core concept involves splitting the circle in half. The dark green (progress) is the background and remains static. Two light green semicircles cover it, rotating sequentially to reveal the progress.

To create a ring, add a smaller circle on top. AE layer masks achieve a similar effect (explained later).

AE can create a truly transparent circular progress bar, but the core principle remains: rotating two semicircles independently. See the diagram below:

Divide the circle into left (red) and right (blue) semicircles, restricting their visibility to their respective halves. Add a static right semicircle (purple) underneath. Let’s break it down step by step.

Left, Right, and Background Semicircles

First, prepare the three semicircles.

Create a 720p composition.

Draw a 400x400 circle.

Set the circle’s position (not the shape layer’s) to 0, 0 for perfect centering.

In the same shape layer, draw a 200x400 rectangle (half the circle’s size).

Set the rectangle’s position to -100, 0 to cover the circle’s left half. This rectangle will cut out the semicircle.

Click “Add” and choose “Merge Paths”.

Set the mode to “Intersect” (like path operations in PS/AI).

Group (Command/Ctrl + G) the circle, rectangle, and Merge Paths. This is our semicircle.

Expand the group, copy the inner rectangle, and paste it outside the group.

This new rectangle acts as a vector mask. AE’s built-in masks rotate with the layer, which we don’t want. We need a stationary mask and a rotating semicircle. So, we use “Merge Paths” again.

Add -> Merge Paths, setting the mode to “Intersect”. This creates the intersection of the new rectangle and the group.

Rotating the group now shows that the area outside the rectangle is hidden.

Reset the rotation and add a keyframe to the group’s rotation (for later use). Press “u” to quickly access keyframed properties.

Name this layer “Left Semicircle”.

Duplicate the layer (Command/Ctrl + D) for the right semicircle. Set the outer rectangle’s position to 100, 0 (covering the right half). Nothing appears because the semicircle is still on the left.

To clarify: the inner circle and rectangle form the rotating semicircle. The outer rectangle is the mask. The left semicircle’s mask covers the left; the right semicircle’s mask covers the right. Together, they form a full circle.

Duplicate the right semicircle, rename it “Background Semicircle,” and move it to the bottom. Set the inner rectangle’s position to 100, 0. The circle becomes whole again.

The static assets are now ready.

Creating the Rotation Animation

Let’s animate the semicircles.

Press “u” to show only the rotation property with the keyframe. This is the group’s rotation, not the layer’s.

Remove keyframes from the right and background semicircles’ rotation. Keep the right semicircle’s rotation property visible.

Click the dot on the left semicircle layer to solo it (like Alt + clicking the layer eye in PS).

Create a simple animation: one full rotation.

Important: Alt + click the right semicircle’s rotation property. An expression appears in the timeline.

Drag the right semicircle’s rotation property’s pick whip (spiral icon) to the left semicircle’s rotation property. The expression updates.

Alt + clicking activated the expression. Dragging the pick whip links the right semicircle’s rotation to the left’s. Now, the right semicircle always follows the left.

Turn off solo display for the left semicircle.

For clarity, fill the semicircles with different colors (for demonstration only).

Use red for the left, blue for the right, and purple for the background semicircle, matching the “Idea” section’s diagram.

Finding the Critical Frame

Play the animation. It’s incorrect: the left semicircle is visible initially. It should appear only after the right semicircle rotates halfway. The same applies to the background semicircle.

We need a specific frame where the left and background semicircles are hidden.

This critical frame is when the right semicircle reaches 180 degrees (or slightly more).

Select the left and background semicircles and trim their timelines’ left ends to this frame. They won’t appear too early now.

Playback is now correct!

The constant-speed rotation is unnatural. Open the Graph Editor (graph icon). Select the left semicircle’s rotation to see a straight line.

Select the line and click the two-handled icon. The line curves, and handles appear.

The Graph Editor is simple: the horizontal axis is time; the vertical is value change. A flat curve means slow change; a steep curve means fast change.

For a fast-start, slow-end animation, adjust the curve like this:

Find the critical frame again (right semicircle at 180 degrees or slightly beyond).

Adding a Mask

The circular progress bar is done; let’s make it a ring.

Select all layers and Pre-compose (right-click).

The three layers merge (like a Smart Object in PS or Movie Clip in Flash).

Create a mask (Command/Ctrl + Shift + N) - AE’s built-in layer mask.

The mask is a rectangle. Expand the mask menu and click “Mask Path”.

Set the four values (top, left, bottom, right) as shown, and check the box to make it a circle.

These numbers ensure the circular mask matches the progress bar’s size and position.

Check “Inverted”. The circle disappears because the mask now shows the area outside it.

Select the mask and press Command/Ctrl + T.

Hold Command/Ctrl + Shift to scale from the center, making it slightly smaller. The ring appears.

Done! That’s the progress bar I wanted.

Conclusion

This tutorial is lengthy, focusing on the concepts. The actual process is simple and takes about 5 minutes with practice.

For the lazy, here’s the source file: Here’s the source file

I’m a beginner, so this might not be the best method, just a method. Path animations might offer a simpler solution.

Share if you have a better method!

[Update: I received immediate feedback. “Radial Wipe” and “Trim Paths” are easier. “Radial Wipe” is a one-step solution. See the “Growing Circle” section in this article.]

The Role of a Designer in a Startup

hi@victor42.work (Victor42) — Sun, 12 Oct 2014 10:19:24 +0000

It’s been over a year since I started a business with my buddies, and it’s been a blast. I want to share this experience and discuss my role as a designer in a startup.

There’s no one-size-fits-all answer; a designer’s role depends on more than just design. If you’re confident and have strong ideas, you might lead product direction. Or, if you’re a stickler for pixel-perfect details, you can find your niche. It’s about proactively finding your place in a changing environment.

Getting Started

Our main product is a parking app, so most of my work revolved around its design. Initially, we were mostly part-time, cobbling together the prototype on weekends. No wireframes, no detailed specs – just core functionality. My job was to quickly create basic UI mockups for discussion and development. We had teammates focused on product positioning, and we were all aligned.

“Quickly” actually took a while; it was my first mobile project. I’d only done web design, with some mobile dabbling on my personal site. The first version had fewer than 10 screens, but it was still daunting. Dealing with Android’s resolutions and the iOS 6 to iOS 7 style shift was a steep learning curve. It was a new world, and I had to shed my web experience and start fresh.

In the early stages, when everything is stretched thin, you naturally do what you do best: focus on visuals and interaction, and help turn the startup idea into a reality.

Integration

Once the core product launched, the main roles were set. We realized the manpower shortage was even bigger than expected. There was a ton of tedious but crucial work: promotional materials, third-party API applications, app store listings, etc. And things not directly product-related: company registration, office space, interviews. It was tough to assign these tasks. If I could do it better than others, I did it.

Developers always had more work, and business development was limited by external factors. Designers often have more free time at this stage. I couldn’t just relax. I became a multi-tasker, filling the team’s gaps. The startup was a steel frame; I was the cement.

When developers struggled with UI implementation, I learned their principles, weighed priorities, and made adjustments with them. I made detailed UI annotations. I found a tool to link UI mockups with click-throughs, clarifying the business logic. Marketing was just starting, and having a professional designer boosted results. Banners, Weibo templates, company and product websites – I’d quickly create them. I also thoroughly tested each version, providing detailed bug reports. If I wasn’t the best person to solve a problem, I’d note it for the team to prioritize. Speed was key. Early on, getting these supporting tasks done matters more than perfection.

This stage is messy and fast-paced. The goal is to adapt, integrate, and connect scattered tasks.

Review and Consolidation

As the team progressed, the product entered a stable iteration cycle. Marketing and business development improved. Design workload stabilized, and it was always less than other roles. Everyone’s work was specialized; I couldn’t help much.

I saw this as a chance to pause, review, connect the dots, and think strategically. The significance of the previous stage’s tasks became clear: our design lacked a soul. We lacked standards. The product, materials, and modules were disconnected. The external image was inconsistent, mostly improvised. It looked okay, but it was white noise, not a melody.

So I dove into iOS and Android guidelines, comparing design styles and studying leading products. I felt like starting over, but changes must be gradual.

I created the company’s VI system and applied it to all external materials. I extracted a color scheme and visual style, refined them, and wrote guidelines. App components were unified, with platform-specific differences. Standing on the shoulders of giants is wise.

Everything can have standards: visuals, interaction, animation, sound, data display, units… I wrote them down and kept adding. It’s a long-term project.

Beyond tangible standards, we needed to establish abstract ones. What impression do we want to create? What emotions should we evoke? I’m still pondering this. While this can be established early, it’s unstable. Business and product changes affect it. It takes time, iterations, and refinement for it to emerge. That’s the design’s soul; you can’t force it.

With standards and guidelines, design became simpler, and results improved. Standards drive consistency, and consistency refines standards. This should be done early. When the team grows, its impact is even greater.

I had more time, perfect for fixing legacy issues! Newbie mistakes and edge cases needed addressing. One basic mistake: tiny click areas in our early Android version, violating the 48dp standard. These problems were in core functions, so fixing them was urgent. I also revamped the product website with new technologies.

By now, the team had good chemistry. My teammates’ abilities drove the product. I couldn’t fall behind. I needed to improve through learning and apply it immediately. I learned more that year than in the previous three combined: mobile development, responsive design, HTML5 animation, AE motion graphics, browser APIs, even drawing. Most importantly, my design skills improved.

Keep exploring, venturing beyond design, injecting fresh ideas. Think of yourself as a one-person Google X – a job to get designers’ hearts racing.

Conclusion

Starting a business is exciting, but tough. If you’re prepared to start or join a startup, you’re not just a designer, but an entrepreneur – a problem-solver. Your responsibilities include anything you’re good at that helps the team. It depends on your expertise, personality, and thinking. You’re part of the team, driving it forward.

The Psychology Behind an Icon

hi@victor42.work (Victor42) — Tue, 29 Apr 2014 14:17:00 +0000

I was designing a pull-up info panel – the kind you slide up for more details. How do you make it clear to the user? How do you show it’s draggable?

My first thought was this icon. Makes sense, right?

It works in the UI. But why this shape? It’s abstract. How does it convey “drag”? I’d never considered it before.

Then it hit me: it’s based on real-world objects. Think ridges or stripes – they increase friction, making things easier to grip and slide.

Mice, bottle caps, remote control backs… they all use it.

It clicked! Sometimes, you need the flat form, but the skeuomorphic spirit.

Level Up as a Designer

hi@victor42.work (Victor42) — Sun, 09 Feb 2014 13:45:47 +0000

I’ve had a reflective year. Being a designer is hard, and I felt stagnant, which was disheartening. But I also learned some key lessons about self-improvement. This year, I’m acting on them to break through. And I’m sharing them with fellow design enthusiasts:

Sharing is the first step. Explaining what you know is a review process. It doesn’t instantly grant new skills, but it lets you slow down and truly grasp the core concepts.

A friend asked how to improve color sense and matching. I was initially stumped. Color is tricky. Finally, I suggested paying attention to everyday colors – packaging, cookbooks, clothes, ads. Try recalling them; the details will fade, leaving only the key colors. That’s the essence of color matching. Also, study photography and monochromatic designs. Same idea. I surprised myself with that answer. Had I used these methods? On reflection, I had, but I’d only just realized it.

Answering her question helped me summarize a key design skill. The benefits of sharing are often subtle, things you won’t find in books. Don’t miss them.

2. Work Hard, Network Harder

I’m not overly talkative, but I’m not an introvert either. I make friends, but I don’t actively expand my circle. I value my close friends, but I’m not driven to meet new people. This is a drawback for a designer. Design isn’t solitary; it’s about understanding others. Designers need to connect, especially with peers.

After my article, “How I Became a Designer”, gained traction, my blog became less isolated. Designers and enthusiasts I’d never met reached out, shared experiences, asked for advice, discussed careers, offered projects, invited me to join startups, or just sought encouragement. I was overwhelmed but also touched. After three years of working mostly alone, I found a design family, a sense of belonging. These were real people, not just a forum. Everyone had unique experiences and passion. Most importantly, they were good people, worth knowing.

Cultivate your design network. Beyond the information you’ll gain, the mutual support is invaluable.

3. Every Field is a New Challenge, Embrace It

I did graphic design for six months and then moved to web design. I can confidently discuss web structures, resolutions, browser engines, and common hex codes, but should I stop there?

No way. I can’t ignore the mobile boom. I created a mobile version of my blog early on, and even though I was still in a PC mindset, it showed me mobile is a different beast. Shifting screen sizes, different units, touch interactions – there’s much to learn. For Apple’s Retina screens, you double background image sizes and then compress them with CSS. You only learn this by diving in.

And “design” is broadening. App animations are becoming crucial. Button vibrations and sound effects are now design considerations. Design is no longer purely visual.

The more media you explore, the broader design becomes. How do you design for a colorless e-reader? What’s the difference between a smart TV interface and PC software? How should a blind person use a phone? Open your eyes, and the hidden depths of design emerge.

4. Build Willpower, Cultivate Habits

I was a gaming addict in college, playing World of Warcraft constantly for almost two years. While I gained something (understanding good game design), three months would have sufficed. I uninstalled and reinstalled it several times before finally quitting, even though I enjoyed it.

If breaking a habit is tough, forming one is even harder. You need subconscious actions to train willpower.

Since my student days, I’ve consistently written – about life, movies, even weird dreams. Maybe that showed me the value of habits. Whether the habit is useful or not, forming it builds willpower.

I decided to do something meaningful, long-term, anything. I had a great idea: translate a foreign design article weekly and create a WeChat account, “Me,” to share them. I love English and wanted a long-term way to use it. I’m a designer, and foreign articles are helpful. I enjoy writing, and translation is creative, plus it enriches my blog. So, I’ve kept up this habit, hitting multiple goals, for seven months. If there’s anything else I want to do long-term, I’m confident I can.

5. Happiness First

The previous points indirectly improve skills, but this one directly impacts your work. An unhappy designer struggles to inspire, and their skills rarely grow. I know this from experience, having had several miserable jobs.

Knowing some front-end, and mostly working in startups, I naturally did two people’s jobs. But front-end developers are scarcer than designers. My coding work increased, and eventually, the company hired another designer and had me focus on slicing. My front-end skills improved, but that wasn’t my aim. I should have said no, but it happened, and it soured my mood. The physical toll of overtime and the anxiety of wanting out drained me, leaving no energy for design. It ended with me quitting and starting fresh.

When you’re happy, a designer’s mind is supercharged. Amazing ideas flow, and you create interesting things in your spare time. Party posters, crafts, concept designs – practice is vital for growth.

Conclusion

Being a good designer isn’t easy. But the charm lies in the breakthrough after the struggle. It’s like Neo flying his ship towards the Machine City in The Matrix. Under attack, he bursts through the clouds and sees the warm, bright skyline.

So, for the sunshine in your hearts, designers, full speed ahead in 2014!

How I Became a Designer

hi@victor42.work (Victor42) — Fri, 01 Nov 2013 14:59:42 +0000

People often ask me why and how I became a designer, given my electronics background. In interviews, I have plenty of answers for “why.” But with friends, I’m stumped, because they’re asking “how.” Recently, a UISDC editor asked me the same thing. I couldn’t answer immediately, so here’s my attempt, at least to clarify it for myself.

First, a disclaimer: this isn’t a how-to. It won’t make you a designer. It’s just my story.

I think most people feel their lives really begin in college. We’re asked what we want to be, but it takes a decade to truly answer. Dreams and college, however, are different beasts. My reason for choosing electronics was simple: I disliked my city. The easiest escape? A so-so major at a so-so university elsewhere. My application became about picking a city, which simplified things.

Electronics was duller than expected, at least initially. It was clear this major, focused on capacitors, resistors, and circuits, wasn’t for a right-brained person like me. After failing to switch to English, I knew I had to do something.

The library was full of options. After some novels, my first turning point came: an advertising magazine. Advertising was a lifeline for many confused young people – inspiring, passionate, individualistic. But I got sidetracked. I grew to dislike the clever marketing and focused on the beautiful visuals. This might have been my first encounter with “design.”

Photoshop seemed like the answer. Luckily, I’d dabbled before, so it was easy to pick up. But I fell into a trap. I spent six months on videos and tutorials, learning all sorts of effects, yet I couldn’t design a simple book cover.

In my sophomore year, I interned at a graphic design company. That’s where I got on track. After learning some software, I was tasked with designing a business card. The result was predictable, but some details were praised – thanks to imitating good designs, not Photoshop tricks. Imitation is key initially, as my boss later confirmed. I spent a long time copying flyers, brochures, and real estate pamphlets, which made color matching and composition my strengths. By graduation, my boss said I was at a senior graphic design major’s level, and he wasn’t wrong.

So, I started in graphic design, on par with design majors. But that became irrelevant. My first job showed me that a typical graduate’s skills aren’t enough. I struggled with an 8-page brochure for a month, needing help from an experienced colleague to finish. Simultaneously, the company’s website development needs were huge, so I assisted the front-end developer, beginning my journey into front-end tech.

On-the-job learning is incredibly effective. I learned by doing, and within two months, I was comfortable with HTML and CSS, creating pages without animations. Later, I realized front-end skills are valuable for designers. I recommend learning them quietly, or at least understanding the principles. Why quietly? We’ll get there. The company finally found a use for me. I handled daily news feature pages. Initially, senior designers designed, and I built. Gradually, I could create decent pages myself, and my work stabilized.

Once, with free time, I was sent to the advertising department to create brochures. My first client project, and a government one at that. I couldn’t communicate directly with the requester, leading to endless overtime and revisions. The contact was a short-tempered, harsh guy who’d also studied design, so I was bossed around and mocked for two months. I don’t know how I survived. Though we were never going to be friends, I learned some design from him. And one more thing: don’t get angry needlessly.

I’ve changed jobs, but always stayed within the Internet. I also built and redesigned my personal website several times, improving my design and front-end skills, and giving me a broader perspective on products. So far, my work has been mainly web design, sometimes front-end. However, holding two roles isn’t a badge of honor, but the start of a vicious cycle. I realized this late, and it was hard to reverse.

Specialization is crucial. Design and development are distinct mindsets. Switching constantly hurts efficiency. Limited time and energy are split, reducing output. I feel this with every job change and my thin portfolio. So, learn front-end, but discreetly. Don’t flaunt it, unless you’re in an early-stage startup. Some may disagree, but for designers, personal growth trumps company tasks.

Is that all it takes to be a good designer? I thought so until I joined a PC software company. My first encounter with software products. Their complexity far exceeded regular websites. Function trumped content. Four interfaces spawned dozens of PSDs. Fortunately, I led the design from start to finish. Unfortunately, massive layoffs killed the project.

This made me rethink the definition, or categories, of designers. Design has two mindsets: content and product. Print, banners, event pages, and some corporate sites are the former; social products, e-commerce, management systems, and most apps are the latter. They overlap, but the former emphasizes visuals, the latter usability. A great designer needs both, but for me, “warped” by front-end, the latter is a better entry. This doesn’t mean narrowing your focus. Broad exposure is vital, mastering trends in graphic, web, UI – all are welcome.

The direction became clear. As tech deepens its reach, product thinking will become increasingly important. User experience is now a must-have for designers. Learning resources aren’t structured. What matters is a love for technology and life, and a “no compromise” approach.

Before I finish, one question remains: Do I really like design? Well… it’s my favorite among all professions I know. The brainstorming and inspiration phase is the most fun, and the focused execution the most rewarding. Though progress becomes harder to see with time, looking back at my work sometimes surprises me – I actually created that.

Once a designer, it’s a lifelong commitment. Even if I stop designing professionally, I can’t stay away.

It’s become my worldview.