Challenge Summary
Welcome to Topcoder Website UX Refresh Skills Icons Design Challenge - Part 3.
We need to design sharp high quality icons for skills in the member profile page of the Topcoder website. We’re in the process of redefining the UI/UX of the entire site. This is part of the change, join us and jump in!
Plus, it’s an opportunity to learn a new design tool, Sketch. It’s not mandatory, however we’re starting to introduce this tool as an option to the regular tools we’ve been using.
Round 1
For your R1 deliverables please submit the following icons (9). Provide more if you want to receive early feedback for more icons.
2) Applet
3) IBM Design
4) Search
7) Shell
8) Simulation
9) String
10) String Manipulation
12) Use Case Diagrams
13) Servlet
Round 2
Final design will contain all the icons (13) plus any updates from client feedback.
1) Activity Diagrams
2) Applet
3) IBM Design
4) Search
5) Ldap
6) Rich Text
7) Shell
8) Simulation
9) String
10) String Manipulation
11) String Parsing
12) Use Case Diagrams
13) Servlet
We are in the process of redesigning the Topcoder website to improve the whole experience of the site. We need to create high quality icons for the member profile page that represent the technologies and skills members have acquired or manually added.
You are provided with the files of the new Topcoder website for capturing the new branding essence and inspiration.
Branding
- Keep it simple. Notice the current style is based on flatness and simplicity.
- Avoid cartoonish styles or heavily outlined figures.
- Keep the color palette tight to the one provided.
-Avoid use of text in the icons; we want graphic representations of the skills that are recognizable, expressive and unique.
- Declare your fonts according to the Studio font’s policies.
- All text should be converted to outline.
- Use solid colors without transparency; try to represent the color without having to mix with underlying layer(s).
Dimensions & File Organization
- All icons are displayed at 64dp × 64dp. The edges of icons are at 2dp, making the active zone of the canvas of 60dp. For ease of design, you can scale the grid 4 times to facilitate design. The basic unit is 2dp. Use icons.ai/icons.sketch attached.
- In order to stay consistent we’ve used a set of key objects to construct the geometry of the icons. This ensures we stay within the same volume for our geometry. This ensures a good distribution of different shape icons when displayed together. See iconbodyguidelines.png attached.
- Create an independent artboard for each icon.
- Each icon (artboard) should be name using the following rule: id-### where ### is the identification number that represents the icon (below in the design requirements you will see each icon ID). Sample: API icon ID is 117, it means this artboard will be named id-117 in illustrator/sketch.
- Follow the provided iconsplaceholder.ai/iconsplaceholder.sketch files to place the icons for presentation purposes.
- FYI, all icons will be used as .svg files only; be careful about the number of points, gradients and alignment, as this reflects the final .svg file.
Geometry (see geometryguidelines.png)
DO:
- All icons should be constructed with well executed vector strokes.
- Stroke in general should be centered on the vector path.
- All paths should be constrained to 30º, 45º and 90º of rotation, unless a more complex or freeform shape is created.
- Use simple geometric shapes and their intersections when building the basic geometry of an icon.
- Check your icon vector paths.
DON’T
- Cut corners and place points randomly.
- Use more points when 1 can do.
Anatomy (see anatomyguidelines.jpg)
- The anatomy of an icon depends on the group they generally fall within. All icons should work well together as a family.
- Use 2dp strokes and multiples of it.
- Prefer to use color instead of drop-shadows.
- Less is more: think about the semantics; don’t use overly-complex details to express simple ideas.
- Think in black and white first, color second.
- Check your icon in pixel view.
- Check your icon in small size.
- Adjust for optical illusions (positive/negative/balance/volume).
Design Requirements
- You will be designing original icons (ideas conceived by you, i.e. algorithm, database, etc.). You’re encouraged to do further research for inspiration.
- Do not recreate stock photos/icons/ideas.
- Follow anatomy guidelines for creating the appropriate type of icon.
1) Activity Diagrams
- Artboard name: id-103
- Type: skill/development.
2) Applet
- Artboard name: id-120
- Type: skill/development.
3) IBM Design
- Artboard name: id-220
- Type: skill/design
- Try to use the IBM logo as part of the icon, branding the IBM design language.
4) Search
- Typing into search field.
- Artboard name: id-334
- Type: skill/data-science.
5) Ldap
- Internet protocol. You can use text as part of the representation.
- Artboard name: id-263
- Type: skill/development.
6) Rich Text
- Artboard name: id-395
- Type: technology.
7) Shell
- Generix *nix shell or command line representation
- Artboard name: 345
- Type: technology.
8) Simulation
- Artboard name: id-349
- Type: skill/data.
9) String
- Artboard name: id-359
- Type: skill/development.
10) String Manipulation
- Artboard name: id-360
- Type: skill/data-science.
11) String Parsing
- Artboard name: id-361
- Type: skill/data-science.
12) Use Case Diagrams
- Artboard name: id-374
- Type: skill/development.
13) Servlet
- Artboard name: id-337
- Try to include Java logo as a parent technology
- Type: skill/development.
Target Audience
- Topcoder community members and clients.
Judging Criteria
- Consistency with the provided branding.
- Originality.
- Design Quality.
Submission File
All requested challenge requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Illustrator or Sketch and saved as layered files respectively. Use separate artboard for each icon, at 100% (64x64 dpi artboard); name the artboard with the appropriate name.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.