Machine Coding Round: UI Design Tips

Machine Coding Round: UI Design Tips

A polished UI scores higher than a raw one. You do not need to be a designer, but basic CSS goes a long way. Here is how to make your component look good in 90 minutes.

1. Use a CSS Reset

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; padding: 20px; }

This removes browser defaults and gives you a clean starting point.

2. Add Padding and Margins

.card { padding: 16px; margin-bottom: 12px; }
.input { padding: 8px 12px; }

Padding and margins make the UI feel spacious, not cramped.

3. Use Borders and Border Radius

.card { border: 1px solid #ddd; border-radius: 8px; }
.input { border: 1px solid #ccc; border-radius: 4px; }

Borders define boundaries. Border radius softens the look.

4. Add Hover States

.suggestion-item:hover { background-color: #f0f0f0; cursor: pointer; }
button:hover { background-color: #0056b3; }

Hover states make the UI feel interactive and responsive.

5. Use a Consistent Color Scheme

:root {
  --primary: #007bff;
  --secondary: #6c757d;
  --bg: #f8f9fa;
  --text: #212529;
  --border: #ddd;
}

Pick 2-3 colors and use them consistently. Do not use random colors.

6. Center Your Component

.container {
  max-width: 600px;
  margin: 0 auto;
}
``
A centered, max-width container looks more professional than a full-width mess.

### 7. Use Flexbox for Layout

```css
.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
``
Flexbox is the easiest way to lay out elements.

### 8. Add Transitions

```css
.suggestion-item { transition: background-color 0.2s; }
.modal { transition: opacity 0.3s; }
``
Transitions make the UI feel smooth and polished.

### 9. Show States

- **Empty state**: "No results found" with an icon or message.
- **Loading state**: a spinner or "Loading..." text.
- **Error state**: "Something went wrong" with a retry button.

### 10. Responsive Design

```css
@media (max-width: 600px) {
  .container { padding: 10px; }
  .grid { grid-template-columns: 1fr; }
}
``
At least add a basic media query for mobile. It shows you care about responsiveness.

### The Takeaway

A polished UI scores higher: CSS reset, padding/margins, borders/border-radius, hover states, consistent colors, centered container, flexbox layout, transitions, state UI (empty/loading/error), and basic responsive design. You do not need to be a designer, but basic CSS makes a big difference.