Index. Services. Tracey Talevich WEB160 / Summer 2015 Final Package

Transcription

1 Tracey Talevich WEB160 / Summer 2015 Final Package Index Title: Web Design, Brand Strategy, UI/UX Drafting Tracey Talevich Seattle, WA Headline: none Text: The index page will explain what tracey.pw is, the services which offered (and a short description of what they are) using a heavily keyworded paragraph(s). Keywords: Web, Website, Design, Graphics, Drafting, Brand, Strategy, User Interface, User Experience, Seattle Design, Freelance, Web Development, Seattle Website Designer, Website Wireframing Service, Northwest Website Design, Website Wireframe Guide, Tutorial, Portfolio, Search Engine Optimization, Web Portfolio Tracey Talevich of tracey.pw is a Seattle based web and visual designer specializing in Web Design and Development, Search Engine Optimization (SEO), Brand Strategy, and UI/UX Drafting to consolidate your brands image through the web. Services Title: Services Tracey Talevich Seattle, WA Headline: Services Text: The services page will contain a list of all my skills which I offer. The list will contain a brief description of each skill, linking to an inner page of the skill. Keywords: Web, Website, Design, Services, Hiring, Branded, HTML, CSS, Wireframing, Hire web designer, Freelance, Web Development, Seattle Web Designer, Seattle freelance design, Business, Client, Process, Contact, Personalized, Search Engine Optimization (SEO) I offer a multitude of web related services to ensure your website functions well and looks the part. These services include: Web Design and Development Web Design and Development are the visual design and user experience of your website. Whether you need a website built from the ground up, or a redesign of your current site. I will provide a unique and functional design while keeping your brand s signature image. Search Engine Optimization (SEO)

2 SEO is the keywording which search engines such as Google use to index and rank your page higher in the search results. With SEO in mind, I will write the content to fill your website. Brand Strategy Brand Strategy is to develop, define, and refine your brand's future. A brand is only as strong as it s ubiquity. Together, we will strategize the message, future goals, and ideal outcomes of your brand. Web Design User Interface (UI) and User Experience (UX) Design User Experience does not end with the web. Mobile applications, print, and physical media all dictate how a user or customer interacts with your brand. I offer my design skills to help develop an interface for an enjoyable user interaction for your product. Title: Web Design Tracey Talevich Seattle, WA Headline: Web Design Text: On the Web Design destination page, an explanation of what web design is will be provided, along with some past branded website designs (with a brief description of each, linking to my portfolio page about the website in question). Keywords: Dynamic, Website, Design, Services, SEO, Branded, HTML, CSS, Wireframing, Portfolio, Development, Business, Client, Process, Structure, Content, Search Engine Optimization, Timeframe, Javascript and JQuery, Wordpress, Users Web Design is the visual design and user experience of your website. Whether you need a website built from the ground up, or a redesign of your current site, I will provide a unique and functional design while keeping your brand s signature image. The most current web design and development standards will be used to build a website which represents your brand. HTML & CSS HTML and CSS can be thought as the skeleton and skin of a website. HTML is the structure, the layout, and content of a web page. Whereas CSS is the presentation of your branded visual design. PHP & MySQL

3 PHP allows your site to talk to the server and perform functions outside of your browser. PHP goes hand in hand with MySQL, a database program which allows for storing and pulling information such as customer account information. WordPress Wordpress is a powerful open source content management system. I can create Wordpress Templates which are the theme of your website, allowing for often changing content to be easily updated through the Wordpress utility. JavaScript & jquery Javascript and jquery allow for extra functionality to be added for your website. These powerful languages add another layer to your websites design which is unachievable with CSS alone. Search Engine Optimization (SEO) SEO is the keywording which search engines use to rank your site amongst the masses, is an often overlooked by web designers. With SEO in mind, I will write the content to fill your website. Brand Strategy Title: Brand Strategy Tracey Talevich Seattle, WA Headline: Brand Strategy Text: The Brand Strategy page will feature an explanation of what Brand Strategy means, and how I intend to work with the client to develop their brand identity. Examples will be provided of brands which were developed by myself or with the help of the client. Keywords: Branded, Company, Business owner, Characteristic, Trademarked, Custom/Tailored, Collaborative, Future, Designing, Portfolio, Remember, Business, Client, Success, Recognizable, Strategic, Notice, Visual, Marketable/Marketing, Sales A brand is only as strong as it s ubiquity. Brand Strategy is to develop, define, and refine your brand s future. The products and services are why your brand exists. But a planned and perfected execution leads to a strong brand equity, in other words how much your customer is willing to pay, and how your customer perceives your brand and its products. Together, we will strategize the message, future goals, and ideal outcomes of your brand.

4 A successful strategy relies on these key components: Market Research Determine who your customer is their wants, needs, and desires from your company or product Identify your competition Learn what the customer s ideal image of your brand shall be Branding your brand Determine the image or personality your brand should convey to the world Creating a historical backstory, relating to your key customer (as determined by market research) Design a color palette, typeface (font), design language and various visual elements to create your company These core components are the stepping stone to a successful brand which defeats its competition. We will determine the most effective path to take. Working together to create the vision of your brand and the customers purpose for buying your product. A strong strategy is determined by how a brand communicates with the customer and the market. A brand without an effective strategy will join the many others in

5 News Posting Title: Creating A Website s Visual Design in Illustrator tracey.pw Blog Text: I will create a text/photograph tutorial on how to make a website visual design using Adobe Illustrator. The overview of the guide will contain keywords which relate to the web/visual design process. Keywords: Tutorial, Website, Design, Visual, Guide, Create from scratch, Original, Static, Color Theory, Adobe, Illustrator, Photoshop, Step by step, Process, Convert, Wireframe, Custom, Branded, Tools, After wireframing Creating A Website s Visual Design in Illustrator by Tracey Talevich Web Designer tracey.pw So you ve worked tirelessly on wireframing the design of your project finally time to start coding, right? Wrong. Today I will teach you the how and why of giving your wireframe color and finalizing its design using Adobe Illustrator to then be coded in HTML and CSS. This article assumes that you have a basic understanding of Adobe Illustrator and it s various tools. You made the wireframe, right? The visual design process is potentially the most important aspect of planning website design. Between computer created wireframes, napkin scribbles, and visual design I d say the latter two are key. But what if you re not lazy like I am? You ve created your wireframes using Illustrator s capabilities. The grunt work is done, now let s finalize the design to make your coding life easier. Prerequisites Begin by opening your wireframe document in Illustrator. Hit CONTROL SHIFT S or CMD SHIFT S (if you re on a Mac) to save your document as Visual Design.ai or something as equally generic. Do not overwrite your wireframes. Creating a Color Palette If you ve got a color palette in mind great! If not, I recommend using a tool such as Coolors.co to force inspiration. Once you ve decided upon a visually pleasing palette (5 different colors is not visually pleasing) follow these steps: 1. Add another artboard to your project.

6 2. Create 8 150px by 150px squares filled with a single color from your chosen palette. This is your base color Keep these squares in a line with a bit of space between them 3. Highlight the first using the Selection Tool (hotkey: V) 4. Using Illustrator s built in color palette generator set your base color as the base color of the generator 5. Notice there are 8 different shades of your base color. Each is 10% lighter or darker than your base color. We will be filling our squares with these shades. 6. With your first square selected, click the lightest shade from Illustrator s generator. Your box should now be the lightest color. 7. Now move to your second box, do the same, but rather than filling it with the lightest shade chose the second lightest. 8. Repeat from step 3 for the rest. Each square should be one shade darker than the last. If you completed the steps properly, you should have an array of shades originating from your base color! repeat for any other colors you chose to add. Colorizing Your Wireframes If you used Illustrator s Rectangle Tool to create your wireframes adding color will be a breeze! 1. Select the box with the desired shade from your color palette. 2. Double click the Fill icon, copy the hex code, click cancel to exit the color selector Sometimes the color picker will already be set on a different color. To fix: click the rectangle in the upper left corner with your chosen color located below the random one. 3. Now select the rectangle from the wireframe which you d like to add color to. 4. With the rectangle selected, double click the fill icon, paste your copied hex code in place of the current code, and click Confirm to apply the changes to the box! 5. Do this for every box in your wireframe. You should be well on your way at this point. Images, you ask? Use Photoshop to size them properly. This is one of the few areas where Illustrator falls behind in visual design. Final Details If you did not draft your typography in the wireframes, do it now. Ultimately, your fonts, line height, font sizing and other aspects will be slightly different once you begin the CSS (unless you re that kind of person).

7 The visual design of your site is now complete. Your coding workflow will greatly speed up once you have a near pixel perfect design to reference. Tracey Talevich is a Web Designer based out of his home in Seattle, WA. If you have website ideas you d love to chat about, send hate mail, or add to your spam registry: contact at tracey@tracey.pw Hopefully this guide was of help. If you have any questions or need clarification leave them in the comments section!