Tag Info

New answers tagged

2

What's hard with these 2 logos is how they have the a similar shape. What I often do for that kind of project where there's a primary logo and a secondary one is making sure the emphasis is added to the primary one, and then I put the second in a position to make it look more like a badge. For these 2 logos that have a round shape, I think it helps a lot ...


2

You need to use the Fill and Stroke window. This gives you more control over assign color to a stroke (the "outline" of an object), the fill (the inside of it), and what the stroke looks like (thickness, dashed vs solid, etc) Select the object that you want to assign a color to. Click Object > Fill and Stroke Ctrl+Shift+F On the Fill tab, change the ...


2

Some things that would help: Include cut-off portions of surrounding elements. You can add a drop shadow and a torn-edge-like effect to emphasize this. (For the torn-edge effect, I create a layer mask and apply Photoshop's Distort > Ocean Ripple filter with a small ripple size (2) and small ripple magnitude (3).) Reduce the size of the image so that it's ...


0

The (2) and (3) look better. What's important is that it looks good, and it will look good if you have a nice balance and a good alignment! But: Because you have a year at the end of your title, I would recommend using the (3) with all the text aligned to the left. If you use centered for the title with that year, it will look ugly when you'll have long ...


0

To show screenshots as such, I've used a light-gray radial gradient and a box shadow. This method has the advantage of being possible with just CSS--no image editing needed: background: -webkit-radial-gradient(white,white,#e5e6e7); background: -o-radial-gradient(white,white,#e5e6e7); background: -moz-radial-gradient(white,white,#e5e6e7); background: ...


1

As a side-line, if you're wanting to use the entire window screenshot but not have the large shadows and transparent areas so that you can quickly apply your own styling just enter the following into Terminal: $ defaults write com.apple.screencapture disable-shadow -bool TRUE Then either restart or enter the following to see the changes straight away: $ ...


-4

Well, you have all kinds of possibilities, Wix, Webs Start Today, Wordpress with it's themes and much more but...think about it like this. Can a program/web tool, no matter how good or how many people worked on it, dictate through it's templates what you like or need? I mean, sure, if it's a first, it would probably be a good place to start to figure out ...


5

The empty impression is caused by the image not the text. Take imdb.com as an example and look how they fill all the box with the image. For me the way to go is left aligned text for readability and consistency and then playing with the sizes of containers and images depending on the proportions of each one. I would not recommend "tall and skinny" ...


4

Note that most of the following is nothing but an educated guess. I do not know what actually motivated the Typeplate scale If you mulitply 18 repeatedly with ∛2 ≈ 1.26 you get the following sequence which, when rounded to “standard” font sizes yields the Typeplate scale with some exceptions: 18.0 → 18 22.7 → 21 28.6 → 24 – This is out of place, 28 would ...


0

First, Thank you all for the answers and precious guidelines, it sure helped! Allow me to add my conclusion: Practically, designing for mobile screen resolution is not good UX, the resolution is too high for the small screen, font will look too small to read, icons too small to click, logo, etc. So, its better to make design based on actual screen size! ...


1

Well, the observation of the gradient will definitely be affected by the colors you choose and the size of the font. As you can see in my image, the first letter is full blue while the other two have a two color gradient in them. The level of observation will be determined by the contrast in your choice of colors. Also, for a font as thin as this one you ...


0

Before you start learning all those frameworks... I want to redirect your attention towards the design part of web design. Of course, you can easily build a website with Bootstrap or some other framework. But that's not designing. A framework can be a basis, but if you don't put your own spin, you'll basically get a website that's just like all other ...


0

I guess this would be a start. Taking into account you based this website on another one and it turned out pretty much the same, you might wanna consider changing the colors and the font too. Good luck. PS: I took out your design on the upper right corner cause it had nothing to do with what's going on in your actual website design.


1

I would advise the following: Grid alignment: Scoot your main content and top nav to the left so it lines up with "home page" Content Justification: the secondary information on the right is calling a lot of attention to itself, I would change the blue to something less eye catching, and put more color emphasis on the main content somehow. Perhaps make it ...


0

Ouf...where to begin, you said not much changes... Well, first of all, get some js in there to stretch the background image cause right now, it's width is 100% and height auto or something like that, you need a code to see if window height > window width then image css = width: auto; height:100%; and the other way around, this way the image fills the ...


0

I would suggest centering the background image so it covers the entire page and does not leave white space on the right hand side. The image of the child looks stretched out and not proportional. And the hover over green does not look appealing. I would suggest with some basic grey hover instead of the piercing green. Also I am not sure if you are aware of ...


1

It would have helped to know the sitemap, it's very important to know what pages with what functionality you will have and isolate only 3 of them. Aside from homepage, 2 other pages should be presented. Especially since they are not final. Basically just show your most powerful and iconic 3 pages. That's how I usually present my work.


1

It does not hurt. Knowing how to do X is not really a part of design. Designing means that you put thought behind your task, plan it, and make sure the plan is executableable. So for great designers it wold be enough to communicate the idea to others. Note not really talking of graphic design just design in general. Now for practical purposes the designer ...


2

Define "web code". That can mean a whole lot of things. Do you need to be a great coder to be a great graphic designer? No. Of course not. Does having a good understanding of front end presentation layer code make you a better web/UI designer? Absolutely. As with any medium, the more you understand the medium and the tools used within it, the more you ...


1

If you're going to be designing graphics intended for web use it would be good to understand what makes your work user friendly to the web developer that needs to use it, but beyond that, NO!!!... There's a quirk to being an Artist where a lot of people look at us as the "grunts" of the workplace simply because they underestimate the value of our trade. ...


3

It never hurts to know both and I think that knowing both puts you above the rest. I think that if you like this line of work you learn both. I personally do both and I cannot honestly tell you which one I enjoy the most. Both are awesome in their different ways.


4

A graphic designer creates graphics. A web designer builds web sites. They aren't the same job. It's very cool if a web designer can create his own graphics, or a graphic designer can prototype web pages, but in my experience of working in organisations, the 'graphics department' and the 'web team' are usually different teams with different skill sets. ...


2

They are really closely related. Layout is defined as the arrangement of predetermined items on a page. Basically, you're given the pieces and they are arranged. Design is defined as the art or skill of combining text, images, and other items into a visually pleasing arrangement. So, really they can be almost interchangeable. The primary difference is ...


0

You can use Zeplin. It's an app that shares mockups right from Sketch or Photoshop, including all measures and color values. No extra effort from your side and your developer will thank you.


1

Below you can see an example of a blue box with a black stroke, on the right there's a white overlay. You can see that this does not effect the black. Therefore, overlay should be the effect you are looking for. Hope this helps! :) PS.for future reference on colours, click here.


1

Try the following: Add a new blank layer at the top Fill it with white Lower its opacity to yield the flared look on the side you want, say on the left like this, ignore what happens on the rest Add a layer mask, fill it with gradient fill from black to white starting where you want the effect to start diminishing See the images below which show before, ...


3

Ideally, you'd have a room full of testers with a pile of different devices. The general things you need to check for: different browsers different operating systems different devices different viewport sizes These can affect: layout typography functionality In most cases, you need some form of the actual software you want to test. That would ...


0

Google Chrome Instructions for Windows Press F12 Click on "Toggle device mode" Select your device and refresh the page Step 1 and 2 Step 3 Pros It works well Cons Limited device emulation choices? Not sure if this is relevant Being cruelly forced to refresh the page after switching devices Android Studio If you really want to go overboard ...


1

Like Zach said, ideally you want to test on specific devices/browsers and use validation tools. However, I have found it helpful to use browsershots.org as well. They used to have IE options, but have recently removed that from their list. Unfortunately, that just displays how your interface will look and does not provide any functionality as to how your ...


8

The use of vector images in websites has had a bit of a stunted growth due to weak browser support. It was not until version 9 (released 2011) that Internet Explorer included native SVG support. For IE 8 and below, it is necessary to make use of a fallback to ensure consistency across browsers. That's an added step that dissuaded the use of vector images; ...


5

The best tools for testing how a website will look on different platforms are actually using the different platforms themselves. That means owning all the devices and using all of the relevant operating systems and browsers that your users will use. The pros are that every option is tested (if done correctly). The cons are that it can be relatively expensive ...


0

Smart object (Daily Useful Repository) Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image's source content with all its original characteristics We can use with Innovative way This will be helping me out with inner page designs, we can use this method for ...


0

I understand that you use many of the assets in most, if not all your designs. One idea worth considering is this: Create a master PSD document, the largest possible size you may use. This can be a blank document Now, find each element file original in the largest possible size and "Place" that in the master document. This is done from "File/Place" and the ...


2

I don't have the rep to comment on 'DA01's answer, but the 'fuzzy' edge can be eliminated by setting the size of the background to match the size of the div and setting those coordinates to be in px as opposed to %: background-image: linear-gradient(135deg, #f00 0, #f00 281px, #ddd 282px, #f00 283px, #f00 566px); background-size: 400px, 400px; The ...


1

If you can live without it being exactly 1px, you can use pure CSS on a single div by using a background gradient: div { width: 400px; height: 400px; background: linear-gradient(135deg, #ff3232 0%,#ff3030 49.6%,#d6d6d6 50%,#ff3030 50.4%,#ff0000 100%); } The catch is that you set gradients by % so you likely will never get exactly a 1px line in ...


1

Since you're talking about styling a DIV and tried a CSS solution (and there is actually a good and working one), this question would be better asked on StackOverflow. But since I know how to use CSS I'll answer here now anyway. Create two DIVs. One for the red box, one for the white line like so <div class="container"> <div ...


2

Let's see... given your premises: fibersensing.com is a good site to draw inspiration from; client requirements are optional; teal is very bad indeed; white on a pink-to-orange fade is good; mouseovers the same color as the background are good; consistency ("looks like all of the others that use blue") is bad; looking "commercial" is bad. ...any answer ...


2

I agree with the other posters. If the company color makes your eyes hurt, just use it sparingly and emphasize other elements. Also, compare your company's site with others in the same line of work and ask yourself what is working for the competition that could be done better by you and your company?


6

Vincent's answer is right on the money. I would also advise you take a look at a lot of the trends in web design lately, specifically regarding the subtle use of vibrant color, and take some cues from them. Even better, you could use this SE page as a reference. Note the way the bright red and teal are used at the top of this page. They define the tone and ...


25

Any single colour can be worked into a working colour setting, even for a website. So, yes, they are right in stating that using their blue is good for brand recognition. A good idea might be to take the original #2DCCD3 and create less bright, saturated versions of it to use next to the base colour. You can create these shades using the HSB colour model. ...


4

The website you showed as example uses a very thick/bold and big font. They also modified the background to be monotone and have a "flat" color to create more contrast. They seemed to have blurred some zones so the details of the background pictures don't mix up with the text. It's possible you can't do that to the images on your immehabayas.com website ...


1

The website you have referenced uses a fat slab font. Those always stand out well and look great in color. Lato however, is a much thinner font and I wouldn't play around with colors on your site to increase contrast. If you want the font to stand out, try increasing the font weight a little bit. Since you're a webdesigner I guess you will also be ...


2

The Brewsters website darkened their photos with what looks like a Sepia Tone of sorts. They also use a much heavier weight font. Yours on the other hand uses a pretty light font in comparison, and very light photos. Especially around the outer areas of your photos where most of the text is it gets lighter, you have to darken that. Just look at where you ...


0

Great question indeed! My confusing long answer: None and both Just some thoughts here commenting a bit the contradictions we are facing today. The technology is not what it should have being since ages. We all should be designing based on real life units (or percived size), with some degree of flexibility and freedom to let the user do some aditional ...


0

How a responsive page reflows is based on the dimensions of the viewport (not screen) in virtual pixels (not real pixels). On a traditional desktop where 1 virtual pixel = 1 real pixel, if your browser is set to 1000px in width, then the page will reflow to fit that. On an iPhone 6, where 1 virtual pixel (Apple calls these points) = 3 real pixels, the ...


0

UI design is a fascinating area and there's a ton to learn. First of all, welcome! Don't get daunted if things aren't 100% perfect from the get go, it's a constantly evolving field, and I think any UI designers will tell you it took at least 2 years before they were producing work they were really proud of. For me it was even longer. I'll break it down into ...


0

Responsive design is based on neither screen resolution nor screen size. Instead, responsive design is based on the content and how it's made which allows it to fit all sizes and resolutions. The way you're thinking about responsive design is wrong. I assume you're coming from a more conventional print design background, yes? Designing for the web is much ...


0

.SVG is the format for using vector graphics in the web! Look into the cool stuff people are doing with "scaleable vector graphics" in the web realm! That should solve your issue. Happy hunting!


2

Where can I learn and improve my Photoshop skills and how can I start working on a concept? Like @plainclothes said, never focus on the tools. Mastering Photoshop will not make you a web designer. Just like mastering how to use an oven will not make you a chef. Photoshop, Illustrator, Sketch, etc. These tools help you create high-fidelity prototypes. ...



Top 50 recent answers are included