Tag Info

New answers tagged

2

I'd suggest images should be enough to show proper UX/UI and a concept. If there's specific functionality that you're looking to sell based off of (like jQuery calculator or advanced animation), then include a link to the live site, but honestly - only if you control it or can be sure it's maintained. I learned long ago that pointing to sites from a ...


1

Grids are used in all forms of design to all you to easily organise your page(web or otherwise). There are many different types of grids people use. Some are responsive while others are not. Check out http://960.gs/ as an example of a web grid system. Most designers will find a system that suits them and what they are designing, for example. Using the 960 ...


5

It's hard to have the perfect color and contrast since the background has almost every color possible! But you can add some effects behind your text to light it up or to make it darker, and play with the contrast this way. That lets you also some freedom to use another accent color... Eg. the color of the logo of the business that website is created for. ...


0

When you are saving the illustrator file as a png, what option is selected? Art Optimized or Text Optimized? I've found that these make a difference in how sharp the resulting image is. If there is no text in your graphic, select "Art Optimized" and see if that helps.


2

I think its a single page website or 'pageless' designed website but you also hear people using the term parallax when describing similar websites. Parallax means the image behind moves separate to the front. You can read more about it here en.wikipedia.org/wiki/Parallax_scrolling


2

It is called one page website or single page website. Sometimes this are enriched with things like "lazy load", which is loading aditional content when you scroll down, "fixed menus", and "smooth scroll".


3

Work is work. You need to get paid for work. Whether it was part of the initial proposal or added on afterwards, you need to bill for it. This also keeps the client in line. If they are being billed for every change, they start to prioritize their changes. When you set up your initial agreement with the client, definitely account for a period of revisions. ...


4

I usually make three revisions. After that, I start charging. .. a flat rate per revision.


1

Maybe this can help: http://freelancing.stackexchange.com/questions/3226/project-based-freelance-project-requiring-multiple-unexpected-redos-from-clien/3337#3337. I like to ask a lot of questions before getting started, prepare quick sketches, and split my projects in "steps"; and then each step gets approved. Once a client goes back, it's a revision that ...


-1

In my opinion, this pattern was made famous because of so many responsive themes available over the Internet. Also, many beginner designer, this one I have seen it personally, follow common patterns to design a website quickly, and this one is simple, easy and quick to create.


0

Adding controls to the header would be one way of doing this, and it depends on the number of actions / relevance to the selected row of whether it belongs there. If there are too many to fit on a mobile device, I would suggest adding it as a slide up section, similar to the bottom sheet. While on desktop, this section could be larger and more informative, ...


-1

If by "hero banner" (5) you mean the header of a website, then it's mainly a matter of CSS and wanting to load the same image for all devices; your example looks like using CSS and not a simple web banner. There's a few reasons why a dev would use the same exact hero banner for all devices besides being faster to implement (1, 2) but each device can easily ...


0

Peope are posting some good resources on the other answers. I just will sumarize your options. Output formats: SVG Can be animated inside the code with Javascript. Canvas Also strong Javascript understanding is needed. Animated gif It is a format that fits well your example. It is a resurected format that works fine on flat design animations. CSS ...


0

There are basically three things you can do, depending on your skills and what you want. Make a video and set it to autoplay and hide the video player interface. Depending on how complex the animation will be, this might be the simplest solution, but it will result in the worst quality with the largest file size. Do SVG-animation (like recommended by Eli). ...


0

I noticed that some designers urchase templates online and simply modify them! Or they use the .psd templates that come with some Wordpress themes. For some designers it's also easier to modify the hue/saturation of some elements and test their color scheme with Photoshop. They might also prefer to work with only one software for this and not having to ...


2

With illustrator you can draw the lines and then export the svg code to your website To make an effect like this: http://codepen.io/chriscoyier/pen/bGyoz You can learn more about svg animation here https://css-tricks.com/svg-line-animation-works/


2

The reason why many designers use Photoshop is because they feel comfortable using it. You should use whatever gets the job done faster (I prefer to do my mock ups in InDesign). For many of us, mock ups are important because it allows us to experiment in a familiar environment. It's easier and faster to write the code once we know what is the end goal. ...


3

Should text be indented? Well that is a matter of personal preference but a vast majority of sites I have seen do not indent paragraphs. You have to look at the origin of HTML When HTML started there was not a standard guide. HTML was original created by Berners-Lee considered who wrote the browser and server software. People at major organizations asked ...


4

This is mostly a personal preference and some would argue why people don't use a Drop Cap instead of indentions, too. Personally the space between paragraphs merit the indention. My understanding of the purpose when using the indent is only to be used for new blocks of content when writing something like a blog post for a site. That said when some ...


5

You can separate paragraphs a number of ways. Indents Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in orci pellentesque, volutpat metus eget, interdum mauris. Nunc faucibus lectus id libero blandit, et varius augue vehicula. Cras eu dictum libero, a elementum velit. Fusce ultrices malesuada elit, et convallis massa tristique ...


3

For designing the elements of a web site, you should use whatever tool works for you. Photoshop is a common tool, but there's no requirement that you use it. As for designing full layouts, I'd suggest you treat your tools as napkins. Whether photoshop or illustrator, it's just a napkin sketch and it may need to be changed as it gets put into HTML/CSS/JS.


7

This has been asked several times and I will still say the same thing each time. The best place to develop websites is in the browser which is the environment it will live in. Photoshop and Illustrator have their merits but should, at best, be only used for mockup or wireframing to get a general idea. If this is for a client that will also use the same ...


2

A short list of terms you need knowledge about would be: Viewport settings (http://www.w3schools.com/css/css_rwd_viewport.asp) CSS media queries / CSS breakpoints Mobile First development Difference between adaptive and responsive design Scalable images (SVG) / Retina-ready images (@2x) A nice overview for starters: ...


0

When I had the same question, I found this article: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ For me it was very useful, I hope for you to be.


0

It is 800 x 115. A quick Google search told me.


0

2015 Twitter background/header cover dimensions It's not so easy anymore to customize the twitter header because the design has to fit on desktop computer and all the other different devices such as mobile phones and tablets. Some areas will be hidden or visible on some of them. It's better to not put too much details on it for this reason, and keep the ...


0

For a career in web design, some tools (not a complete list, but the most common) that you will need are as follows: Overall graphic design: Photoshop Icons and other vectors: Illustrator, Corel draw, Inkscape HTML authoring: Dreamweaver Text editing software: Sublime text, brackets Learning javascript along with graphic design will give you an edge in ...


0

Thanks for the suggestions, guys. If it were the code making it zoom, then it would be zoomed on another device and it's not(I checked it on a mac). It's my Windows 8.1 combined with a high rez screen that is zooming the browsers independent of the usual in-browser zoom controls as I checked that the in-browser zoom was at 100%.


1

The filter editor dialog box for drop shadow in Inkscape gives you information on color, composite, gaussain blur, offset and on what are all these effects applied. The color setting is the default effect visible in the filter editor dialog box. Below which there are other settings which can be edited. In the image below gaussian blur is selected and the ...


-2

That means, the pictures have no problems. The HTML/CSS code is enlarged the image from its actual size. Check the size how its defined by the Source code by using the Browser's Inspect Element. The width and height might be differ from the actual size of the image.


1

Coming from a solutions architect perspective, I have never seen a guideline. But there is a good technical reason for making your site at runtime use "www.", and it's all about DNS (avoiding collision with SOA and NS records). So while you might want to share content that says "go to http://mysite.us" the actual hosting should be on "www.mysite.us". ...


1

I copied the images to look at them in Photoshop and Paint, and they were both sharp and displayed smaller. There's the key to your problem. If you just copy-pasted the images to PS, and they're smaller there than they are in browser, your browser is upscaling them, thus enlarging the pixels and giving you the blurry view. Check your CSS again. ...


3

To add more technical background to the existing answers: Why would there be differences in DNS between www.example.com and example.comin the first place? There are many cases when one does not enter an A (or AAAA) record, but instead a CNAME record pointing to something like www42.provider.example.net. This way, a migration of www42.provider.example.net to ...


0

www.foo.com is not strictly speaking a URL. It's a relative domain name. It means this: start with your local domains, falling back to the root if you can't find anything there and traverse through com and foo to get to www. It doesn't say what records to grab from that domain though or what you would do with those records if you did retrieve them. Most ...


0

To explain what the differences are. example.com is the domain name. www in this case (www.example.com) is the subdomain www. in the configuration people actually have to direct both www and subdomain-less to the same resources (web files) Also keeping SEO in mind it's important only one of these is leading and the other should direct to the leading one. ...


3

First, don't give up and don't think you're stuck in what you're doing now! I don't know what I can suggest you about your present job but maybe you're taking too much on your own. It's not healthy indeed to stress so much about your full time job it affects your evenings and nights. That's the kind of worries that are usually more common for entrepreneurs. ...


41

www.example.com and example.com are two different addresses. It is only a common convention for web servers to be configured such that both variants work the same. This convention is not universal, and some web sites will be set up only to respond to one or the other. You need to confirm with whoever is in charge of the web site, which is acceptable to ...


14

www. may have valid technical reasons for being used. When a server is configured it must be set up to use http://www.example.com and http://example.com. It is completely possible that www.example.com loads the site and example.com does not. They are two, different, separate, addresses. This is all controlled by the server. Both addresses may work, or one ...


0

If you have a Microsoft Office license, they just released a new tool called Sway which is somewhat similar to these examples. https://sway.com/ Another impressive tool that is more slide/presentation based is impress.js Which requires some coding or you could use an online editor to create it like: http://strut.io/


1

The snippet you posted is not valid XML. It needs an XML declaration and the <path> tag needs to be closed. <?xml version="1.0" encoding="UTF-8"?> <svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"> <path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 ...


0

In the prefereneces panel: Edit > Preferences > General or cmd+k make sure anti-aliasing is selected. It will smooth exported png 24 files out nicely. Also make sure you are using png-24 as suggested above and when you are saving-for-web that you have art optimized selected (its in the drop down menu in the image size menu).


0

For a Helvetica Neue Condensed, you can have a look at the webfont Archivo Narrow: https://www.google.com/fonts/specimen/Archivo+Narrow For the Helvetica Neue Black version, this version of Archivo Black is not bad either: https://www.google.com/fonts/specimen/Archivo+Black For the other Helvetica Neue like the standard one, other answers have been ...


0

If you're looking for an easier way to manage responsive designs and you have an Adobe CC subscription, Adobe has a product called Edge Reflow that makes designing for various resolutions much easier. Here is a video from adobe about it. But esentially you can import your PSDs and manipulate them so that they'll change on different resolutions. Edge Reflow ...


1

Check out a Chrome extension called Dimensions (demo too), download here. Some info from the page: A tool for designers to measure screen dimensions Images & HTML Elements Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Mockups ...


0

Design the mobile layout only. Then work with the developers to reflow things as needed for other views. The reason for mobile first is that it forces you to prioritize content and functionality down to the necessities. It gives you a streamlined design that, more often than not, is also perfect for desktop, albeit perhaps laid out differently. The reason ...


1

If the site loads jQuery, you can enter this in the Developer Console: $.each($('*'), function(i, e) { console.log(i, $(e).width(), $(e).height(), e ); }); It gives you an indexed list, width and height of all items. Like always, when you hover an item in the list, the item get's highlighted. Another nice tool to see size is the FireFox developer 3d ...


1

There's a new (a few days ago) way for you to do this. I was just updating Photoshop and you may be happy to learn that you can now create multiple art boards in one Photoshop document. This will allow you to have all 3 of your layouts in one file. Here's the video of how this new feature: https://helpx.adobe.com/photoshop/how-to/design-with-artboards.html



Top 50 recent answers are included