ADEL DESIGN Blog

Sunday, May 19, 2013

7 Tips & Tricks to Creating a Gorgeous Restaurant Website

In order to create a proper website for people, you should start think in the same way they do. When it comes to designing a gorgeous restaurant website, what should you put your mind to? Well, why do people like going to restaurants? For the food, the ambience, to relax and have a good time with friends. Keeping that mind, restaurant websites can be real useful to the dining business.
Guests can have an opportunity to be acquainted with your menu, style, interior and services. Moreover, an online website also means that you can receive orders online as well as reservations for those interested to check out your restaurant. The website is a necessary attribute of any modern business.

So today I’d like to talk about creation of a proper restaurant website design. It seems easy on the surface, but still there are a few tips you totally should follow in order to create a gorgeous restaurant website that you can be proud of.

Recommended Reading: 9 Ideas for Building Great Websites With Less

1. Target Audience

From the very beginning you have to find out your target audience. If there is a university near your cafe, students will probably be your frequent visitors. If there is a business center not far from your restaurant then expect business-executive types to lunch at your place. Check your surroundings for the type of target audience, their age group and ultimately their preferences.
After the target audience is defined, you can begin website creation. If it is a students’ cafe, a clean and bright design will be the perfect choice. But if you are trying to engage the more serious managers and office workers, go for an elegant or professional style.
CAU Restaurant

Also, you can arrange “happy hours” or some other discounts to attract more customers. Don’t forget to create an extra website page, slider image or pop-up window for a brief description about it. Here you can see an offer in a slider at the website header. The visitors of this website are well-informed, because the offer is on the main page.
Giraffe

2. Keep It Simple

Every good restaurant website should include important and required pages, such as a home page or main page, the menu, the ‘About us’ page, and a Contact form. It’s critically important to create all these pages, because without any of them the website will never be complete. You can also add a review page in order to show your visitors what people say about your restaurant.
Cantilever

Also, try your best to keep it as simple as possible. There is a design principle noted by the U.S. Navy that is called KISS. It means “Keep it simple, stupid”. By this principle, simplicity and a user-friendly design is your main goal. If a user doesn’t find what he or she is looking for in three clicks,it’s byebye for good.

3. Color Sheme

Have you noticed that the color palette of most restaurant sites consists of four main colors: brown, white, red and black. Of course, these days you can see a full spectrum of colors on restaurant websites, but these main four colors were selected for a reason.
Brown color symbolizes reliability, stability, and adherence to tradition.
FIG

White gives a feeling of freshness, purity, and freedom.
Solegiallo

Black is associated with mystery and power of creation. Moreover, food photography looks great on a black background.
Daimu

The color red is most often used by fast food restaurants as it is the symbol of passion and secret desires. Always try to take into consideration the fact that colors influence a user’s behaviour. Use this knowledge to your benefit.
Backyard Burgers

4. Easy-to-use Contact Form

Your restaurant website should have an easy-to-use contact or feedback form. It’s not enough just to leave an email address or a phone number on the contact page. A contact form lets you add fields which can help narrow down what the person is trying to contact you for.
Also, don’t forget to attach a map to the form in order to show the location of your restaurant, that will remove questions about the location of your restaurant.
Cannolificio Mongibello

5. Stay Sociable

There are lots of social websites you can use to share information and find potential customers. Let your visitors follow your news, updates, and even staff via social networks. Stay open to communication, be friendly with your customers, be kind and they will act in the same way.
The Noodle Box

“Word of mouth” is a quite strong motivator. You can turn it to your advantage. Just share information that is really useful and interesting to your target audience, for example, the rules of proper nutrition with the corresponding dishes from your menu.

6. High-Quality Images

On the Web we are constantly fighting for attention and the website is usually on the front-end trying to get people to click in and find out more. Hence, it needs to be attractive first of all. Large background photos are an amazing choice for restaurant website design.
Also, you can add some high-quality images to the menu page in order to demonstrate how your dishes look like. Make the images “delicious”, they are supposed to arouse an appetite. Food photography should awaken a desire to try them out, because when they do, people can’t wait to step into your restaurant and get a bite.
Easy Bistro

Moreover, you can add some interior photos to your site to convey the cozy atmosphere that prevails in your restaurant.

7. Killing “About Us” Page

Your website is an instrument to win over the crowd and to top your competitors. The “About us” page should be unique and make you stand out from the crowd. Try to find your personality layer and add it there. Show your potential customers how friendly and professional your team is.
Square

People read the web information differently from the way they read books and magazines. They read fluently, selecting the key points for themselves. Keep this fact in mind and highlight the main moment with bold font. It will help not just to perceive the information better, but also to index it for search engines, such as Google.

Bonus Tip: Logo Placement

I’d like to share one more small tip with you. Almost all websites try to place the logo on the top left corner of the page. But why?
Napoli Centrale

According to the scientific research, when a person opens a website, his or her view runs from left to right. People are used to reading in a such way. So, the best place on the page to put a logo is the top left corner.

Conclusion

These tips are designed for beginners, but I hope that the pros appreciate them as well. Define your goals and try to achieve them with the help of your website. Remember that perfection is a journey, not a destination.

Saturday, May 18, 2013

Create a Realistic iPhone 5 Mockup in Photoshop

Mobile mockups are in great demand these days. They are the perfect choice for displaying your mobile websites, designs, and apps. Rather than relying on stock photography, it is best to create your own set of screens in Photoshop. It gives you much flexibility to edit and modify your mockups as needed, and it allows you to keep your designs up to date with the rapidly-changing hardware and software of the industry.
In this tutorial, I’ll show you how to create a realistic iPhone 5 mockup in Photoshop. We’ll use various shape tools, filters, and different layer styling techniques to achieve the final result. Hopefully you will learn some useful tips along the way. So, let’s get started.

Resources: (Download the finished, layered PSD file.)

Final Result:

Step 1

Create a new document in Photoshop with a 600px width and a 700px height.

Step 2

First, we’ll make the body of the iPhone. Set #000004 as your foreground color. Now, select the rounded rectangle tool, click the canvas, and put the following values into the options window, 285px width, 624px height, and 45px radius.

Step 3

Duplicate this rectangle, label it as “Frame1” and place it below the original body layer. Hide this new copy; we’ll work on the original layer now. Double-click on the body to open the layer style window and apply the following settings for Stroke and Outer Glow.

Step 4

Unhide the “Frame1” layer, and change its color to #767f8f. Slightly increase its size using the free transform tool (Ctrl+ “T”).

Step 5

To make “Frame2”, set #0b0e13 as the foreground color and input the following values for “Create Rounded Rectangle.” Make sure to place this rectangle below the rest of the layers.

Step 6

Next, we’ll make highlights over “Frame2”. Create a new layer above it, and select a 10px soft round brush to draw a straight line in pure white. Press the “Shift” key while applying the brush to get a straight line. After that, go to “Filter” > “Blur” > “Motion Blur” and apply a 30px motion blur filter to this new layer.

Step 7

Now go to “Edit” > “Transform” > “Warp”. Choose Arch with a 30% bend.

Step 8

Position the highlight over top-left corner at an angle using the free transform tool (Ctrl+ “T”). Now, pick the polygonal lasso tool (“L”) and select the triangular area shown below. After that, go to “Edit” > “Clear” to get rid of the lower portion of the highlight.

Duplicate the highlight and position it over the top-right corner using the free transform tool (Ctrl+ “T”). Duplicate both highlight layers and flip horizontally by going to “Edit” > “Transform” > “Flip Horizontal”. Position them over the bottom corners as shown below.

Step 9

Make a small rectangle using color #1b1f22, duplicate it three times, and position them as shown below.

Step 10

To make the iPhone screen, draw another rectangle using the rounded rectangle tool with the following settings.

Step 11

Next, we’ll make a light reflection. Draw a triangle above the rest of the layers.

Now, select the body layer and click on the icon to “Add Layer Mask,” which is found at the bottom of the layers panel. This would confine the reflection to the body. Set the fill of reflection to 0% and apply a white to transparent gradient to it.

Step 12

Next, we’ll make the buttons. Make a rectangle using the rounded rectangle tool with a 5px radius and #242b33 as your color. Now, press Ctrl + to make selection around it. To make highlights, create a new layer above and apply a soft round brush (40 – 50% opacity) in pure white over the top edge within the selection. After that, apply the brush at the right and left borders.

Step 13

Make the side buttons using the same technique explained in step 12.

Step 14

Next, we’ll make the camera. Draw an ellipse using color #1e1e1e. To make a highlight, press ctrl + to make selection around it. Create a new layer and apply a soft round brush on it with 20 – 30% opacity in white color shown below. Draw a smaller ellipse above it using #14171c color and make highlight over it.

Step 15

Make a smaller ellipse using color #0e1377 . Add some shading to it on a new layer using a black and white hard round brush. Reduce its opacity to 50%.

Step 16

Next, we’ll make the receiver. Draw a rectangle using the rounded rectangle tool with a 20px radius and color #191919. Make highlights over it on a new layer using the same technique, and reduce its opacity to 50%.

Step 17

Duplicate the rounded rectangle of the receiver, bring it above the highlights layer, and reduce its size. You can see it below in blue. Set its fill color to 0% and apply the following layer style settings to it.

You can make the pattern used here by creating a new 2px by 2px document with a transparent background. Fully magnify it using the zoom tool (“Z”) and draw the two white pixels shown below. After that, go to “Edit” > “Define Pattern” and save it.

Step 18

Next, we’ll make the home button. Draw an ellipse using color #1b1b1d. Duplicate it, change its color to #000004, and drag it one step downwards. To make a half-moon shaped highlight over it, duplicate the top ellipse and change its color to a lighter gray (#4f5259). Make an elongated ellipse covering its top as shown below. Now, select both the ellipses and go to “Layer” > “Combine shapes” > “Subtract Front Shape”.

Step 19

Apply the following gradient on half-moon shape.

Set #676767 as your foreground color and select the rounded rectangle tool (Tool mode: Shape) with an 8px radius. Set its fill color to “none” and set a stroke of around 1.50-2pt in the top options bar to make a rectangular stroke.

Step 20

Next, we’ll make the shadow. Press “D” to pick the default colors and draw a straight line below the rest of the layers using a 14px Soft round brush. After that, apply a 35px motion blur filter on it to get the effect shown below.

Final result:

That’s it! The iPhone mockup is ready to display your app. I hope you enjoyed the tutorial and learned something interesting. Do share your thoughts!

Friday, May 17, 2013

20+ Photoshop Tutorials to Enhance your Digital Painting

Art is not limited to any method, nor is digital artwork. Yes, you read that right: “digital artwork.” It is a new method in creating amazing art that will inspire you. Recently we showcased 42+Tutorials for Learning Digital Painting Techniques, today we’ve collected 21 tutorials to motivate you to show your creativeness through digital artwork. I hope this collection motives and inspires you to create your own digital painting masterpiece!