5

The only ways to do this are to: Use "actual" 3D rendering (like WebGL) for the UI which isn't usually recommended for UI because it's harder to make UIs with just WebGL, especially making them accessible. Or Loop through each instance of each relevant item, calculate where it is with respect to your fake light, and adjust the shadows based on ...


4

The most efficient method of animating something like a loading icon may be to create it with pure Cascading Style Sheets. There are no images to load and the http request is typically the same as when loading the basic page display. Secondly, may be a small animated gif because the format supports animation and there's little to no overhead in terms of ...


4

You say you tried to use the example as inspiration, but to be honest, I don't think you have implemented that "inspiration", and certainly not enough to achieve a similar look. Perhaps it's because you aren't seeing things as a designer does. This isn't really about following any rules, it's about developing an ability to see what makes ...


3

I think you could call this a Pop-Up, You might also see this referred to as a Popover, or Popper. The idea is the user clicks on a button and a modal like window "Pops" up on their screen calling attention for the user to make some type of decision or provide more detailed information than a tooltip. In your example, I would call this a Pop-up ...


3

You could place a button next to the input box that says "Save answer" and use a checkmark on the button. Below, you could use a link button that says "Show answer" and use an eye icon. It sounds like, though, you want users to try to answer each question so that you can understand their difficulty, so you might want to not make the ...


3

Know your audience It starts with knowing what you design and who you design it for. The color palette considered suitable for a funky new social networking site for young cat lovers in South Asia might look very different from the colors that would be considered working well for a new financial online service for young families. Psychology of colors There ...


2

Check out this site. https://www.programmingfonts.org/ The most condensed is Quinze, but it may be too much. I found glyphs were touching each other in some cases. Then there is sudo, wich works great with line-height 1.0 and is an OK compromise if you really want to save space. Many fonts are as condensed as Iosevka: M+, Terminus, Inconsolata Regular, etc......


2

Generally, you can't assume that brand guidelines for use on web pages will also apply to print. I have managed to find information about using them in some print cases (which might not apply to your specific use-case): This page on use of google logos/trademarks says: Google typically does not allow third-party use of our logo or brand features to create ...


2

This is exceptionally broad and opinion-based. Every designer will have their own opinion. There are no "rules" for what looks good. None. Simply put, you can't quantify "taste" or "beauty" as a set of rules. There's a psychology to every single aspect of a design that will alter perceptions. For example, purely looking at ...


2

JPG is a lossy format, you can't expect anything to remain the same. Save as a PNG to retain all information.


2

Not sure about Chrome, but for Firefox you need an extension called Transparent Standalone Images because in Firefox transparency is normally only visible when the PNG appears on a web page with a background. It might be better instead to check your images in Photoshop or GIMP, where transparency is displayed using a chequered grid. Another possible issue ...


2

Illustrator is merely an image editor. Nothing more. While more recent versions of AI have seen things like CSS and SVG more integrated, these are woefully lacking in terms of actually creating a web page. Illustrator is not designed to build even a single web page, let alone an entire web site. One would, at the very least, need a good text editor and an ...


2

I've made a script that does almost exactly that (in terms of end result... It doesn't really merge anything). The thing is, it only supports one source folder at a time. Export document for each layer inside selected group.jsx. The way it works: First it hides all layers in the first level of the selected folder Then it loops through each of those layers ...


1

One probable option would be using a parallax script, and on one layer add the shadows as transparent PNG and on the main layer add the objects projecting that shadow.


1

This is very much an opinion question. My answer is that it should be OK: both are popular. Although traditionally people advised against pairing two different sans-serifs, in the web age people are used to a sans for body text. The old print design "use a sans for heading, serif for text" thinking is outdated now. My one concern would be that Open ...


1

This question can be closed by me. The answer for to how to display old 72 dpi images in a browser on Retina/high pixel density screens (i.e all modern screens) is indeed to use the following CSS properties (probably not all them necessary/valid as of 2021): .preretinaonretina { image-rendering:optimizeSpeed; /* Legal fallback */ image-...


1

I think this amounts to the level of construction and visual complexity you want for any particular web build at any particular resolution of display. It is entirely possible to use 1 image for every possible screen resolution. You can use 1 small image and let it look poor on more 4k/retina screens. Or you can use 1 large image and let it slow load times ...


1

Illustrator is used primarily to create components and layouts for web. You can still use AI to get the visuals right, but as far as building a portfolio website you will need to use different software. Depending on the software used, CSS styles from AI might be useful, images exported from AI will certainly be useful once you optimize them for web. There ...


1

All the width and height measurements in Figma are pixel-based only and you can't change it. Coming to your question, you can ask the designer to share that .jpg image over Zeplin, or if the design is created in Figma, they can share the link to Figma file with you (with just the view access), and once you have the access, you can select each component and ...


1

Not sure I understand... every medium will have it's own general rules or guidelines, but all should fall under the umbrella of brand guidelines. Brand guidelines typically encompass the broad scope of the visuals - typefaces, colors, logo usage, etc. However, each and every medium or delivery method may then have its own set of general guidelines (sizes, ...


1

There are no specific, valid-for-anything, rules when designing, but in your particular case it feels like some more whitespace is needed (which you seem to be anticipating yourself). So try: more space in between list entries (car, tree, etc) more space above car, and identical value below soup shift the entire list and header to the right, touching the ...


1

Step 1 - Align your big circle and small circles to the center of the canvas to have a simple reference point (since we know exactly what the center of the canvas is). Step 2 - Move all of your small circles to the desired distance from the big circle. Then select four of them and enter free transform mode (Ctrl+T). If your reference point is disabled, ...


1

I recommend Freight Sans, a humanist sans-serif. It's quite open and a little bit lighter than most body text typefaces on the web. So it feels very fresh to me. It's used as the body text on stratechery.com, for example, and I think it looks really good there. It feels like a good balance between hand-made and fresh and modern, and feels very premium. As ...


1

If you have the printed book you can take a calibrated photo and take samples from it. I have the reverse problem. Is there any way that I can simulate printed CMYK colors on my screen? No, It is not the reverse problem, the problem is the same always. You can not simulate RGB colors on a print, you always simulate printed colors on a screen. The "...


1

Ask yourself.. Do you really need a Facebook logo on a business card? Don't you think Facebook users, who are aware of your company name and are interested, would NOT search for you on Facebook? Facebook has become ubiquitous. One would not put a Yellow Pages logo next to your phone number. It's the same thing essentially. All this all holds true for the ...


1

I think you don't need to worry about it. Your design looks clean and well thought out. As someone who has looked at a lot of portfolios and interviewed programmers and designers, I have seen many less appealing sites. This design should not exclude you from getting an interview.


1

Here's a few things you might want to consider when picking your colours. Contrast Make sure your information stands out against backgrounds are contrasting enough to be easy to ready. Environment Also with features like dark mode, you can consider the environment or time of the day your website will be used during. Accessibility Make sure your colours ...


Only top voted, non community-wiki answers of a minimum length are eligible