New answers tagged

0

Sketch can handle and export parts of code, but cannot create a whole website. As a possible (and free) alternative, you could check out Macaw, which was recently made available free of charge as it's going to be discontinued, but it's still a rather good piece of software for a graphic approach to building website.


0

Sketch was intended as a design tool for creating responsive websites without having to write code. If the website has additional functionality that cannot be done in Sketch and requires collaboration with coder / developer, you'll need to use additional software such as Avocode.


2

Skeuomorphism The whole purpose of skeuomorphism is to tackle the problems you are facing. Emulating the aesthetics of physical objects that people are used to in the real world helps them to understand the functionality of your interface. Skeuomorphism has got a bit of a bad name recently, mainly due to Apple taking it a bit too far. Pre iOS 7, the ...


2

Currently, the three little nubs don't look like a slideable object, which is why people may not try using them. I suggest taking a look at some sliders/slider plug ins to see how they handle their sliding arms. You may want to use something with a point to it so it pinpoints what exactly they are sliding too. Something like this perhaps. Here's why: ...


0

From illustrator. I normally save as SVG then it will look sharp on a a screen and will re size nicely on gadgets. Then you dont need to worry about screen resolution


5

Traditionally, screen resolution has been 72dpi, though newer high-res monitors like Apple's Retina displays can go up to 400dpi. That said, when saving images for the web, image resolution doesn't really matter. Most people will export at 72dpi, but the most important thing to do is to export at the pixel dimensions at which the image will be displayed. ...


-2

72 dpi is best for web or 92 dpi for retina displays. 300 dpi is generally only for print. Using it for the web will just make a bulkier file.


-5

layout is the attraction for readership and to optimize the Newspaper's effectiveness in presenting information


0

You can use https://www.wetransfer.com/ No need to sign up. Its very secure. I have been using it for few years now. You can send upto 2 gb for free. The UI of this site is good as well.


0

There have been a number of web-based design version control products recently, though most of them seem to have been discontinued (LayerVault was a good one), as it clearly isn't a service enough people are willing to pay for. Pixelapse is another option, though it was acquired by Dropbox in January last year – they said they'd continue support for a year, ...


2

There is a very important distinction between vector images and bitmap images. Vector images, if we simplify a bit, are rendered by the client while bitmap images are being rendered by you. This means that the application your sending the image to has more say into how it behaves. The end result is that you have following downsides: It takes more ...


2

(Not enough points to comment on Richard B's answer directly yet.) To answer your question Richard B, We often see this effect on elements needing anti-aliasing on lower-powered hardware. This even happens on rounded-cornered DOM elements, when anti-aliasing is reduced or removed from those environments. At our company, we have some cases where we use ...


7

(Note: please read the OP's own answer before this one, since my answer is a comment on the OP's investigation) This is a known issue of Android Chrome. On some of their builds they disabled anti aliasing causing the vector shapes to be rendered with crisp edges. The reason for this was to reduce the overload created by anti aliasing calculations. Due to ...


12

I have just run a test and the only difference appears to be on mobile browsers. I created a 990 x 900px image of the Twitter icon (that icon seems far too detailed a design for good scaling, so good for this test). I saved this as SVG, JPG, GIF, Transparent GIF (just the bird shape, no background colour, instead adding this with CSS), PNG, transparent ...


0

You can run this code on your javascript console: var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); or use this bookmarklet: http://nytimes.github.io/svg-crowbar/ Worked perfectly for me:


2

What to include? The Minimum <!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) --> <link rel="shortcut icon" href="/favicon.ico"> <!-- Modern browsers (196x196 should cover all modern browsers) --> <link rel="icon" type="image/png" href="/favicon.png"> <!-- iOS & other mobile devices (ideally 180x180, at least ...


0

"What could be causing this discrepancy in measurement?" design not properly executed in code code not being cross-browser compliant (subset of #1) creative not set to screen resolution used by developer - this discrepancy should've been brought up prior to start of the project. At the end it's up to developer to properly execute creative direction and ...


2

Use CSS to not display these divs below a particular break point. (I use 400px in the example below, but you can set that to whatever you want.) @media screen and (max-width: 25rem) { /* 400 px */ .top, .left, .right, .bottom { display: none; } }


0

This may not resemble Helvetica that much, but I did find a font called Montserrat which you can download from FontSquirrel.


2

First, there is no such thing as Illustrator document's ppi. It just treats pixels as physical units, such that 1 inch = 72 pixel. Second, Raster Effects has no effect on how big Illustrator makes an image pasting it in a document. So, if you create a document with dimensions 1920x1080 pixels, and paste an 144 ppi image of the same dimensions, it ends up ...


3

The origin of "mobile first" The idea of "mobile first" in regards to Responsive Design comes from a time when the browsers for mobile devices were a lot less capable than what you would find on a desktop device. Many of them did not support media queries at all, so the idea of building up a fancy desktop design and then sticking in styles using media ...


-1

To me the main reason to do mobile first is to avoid a situation where your mobile site doesn't do everything the desktop version does. There are tons of websites where I have to request the desktop version on my phone to do something because even though the phone can do it, their mobile version doesn't. That bugs the crap out of me. That said, I think ...


2

This type of layout is called a split layout, for the simple reason that there obvious splits in it, often in the vertical direction. Google has some pretty good results when searching using this term. The above image comes from a Codrops article/template on split layouts. The movement on the page you linked does not use parallax scrolling. Parallax ...


1

There is no one optimal contrast. Readability depends on a combination of contrast, font size, line height, font used, and audience's preference. Pulling from this great answer by Multicon on choosing colors for web design type: While a designer's eye should always be a part of the final equation when making design decisions, there is room to maneuver ...


0

I'm no expert in Illustrator, but in my initial self-teaching with it, I was doing this exact project, but with sports logos (to create that deep neon sign effect). I was able to easily do this with Gaussian Blur and Outer Glow effect in Illustrator CC 2015 by performing an image trace>expand, applying a clear fill and thin stroke to all remaining traced ...


8

Mobile first is best practice -- it's not law, and if you understand why you should be using it, and why you don't want to use it on a particular project, that's fine. It's worth noting that mobile first affects the design/UX and the build itself, and as this is a graphic design forum, I'm a bit perplexed as to why you think a mobile first design will ...


18

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...


2

I tested your website www.cosmosdesign.co.nz on different screen sizes and its's working fine on all screens. Regarding your question for mobile first design I would like to say that your designing approach must consider your target audience along with many other factors like images, content, etc. If your target audience will be using this website mostly on ...


0

@Yisela has some very good points, but if you have to keep categories, the very least would be to split them in multiple pages, so the user first selects the category and than is presented with a list within a particular category. This way the total number of addresses per page is significantly reduced.



Top 50 recent answers are included